Update checkout page with registration shared layout
What?
The purpose of this issue is to update the SaaS checkout flow experience and use the shared boilerplate from the registration/trial flow (See #323086 (closed) for reference.).
Registration/trial flow | Checkout flow |
---|---|
![]() |
![]() |
Why?
Updating the checkout page with the shared layout will allow the following:
- A common base to launch our experiment, making it easier for the team to design and implement front-end changes.
- A consistent user interface when people go through the paid checkout flow (Signing up for GitLab while purchasing a subscription).
How?
This is not a redesign of the checkout page. We will use the same components and same layout (2 columns) and fit them in our boilerplate.
Proposed solution
Overview Design
Step | Before | After |
---|---|---|
Subscription detail | ![]() |
![]() |
Customer info | ![]() |
![]() |
Billing address | ![]() |
![]() |
Payment method | ![]() |
![]() |
Review & pay | ![]() |
![]() |
States & alerts
![](/-/project/278964/uploads/b278996789103ca5fdfe0863a5fa69c5/States_Alerts.png)
Design specs
Edited by Kevin Comoli