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
Design specs
Edited by Kevin Comoli











