Move the "Buy add-on CI minutes" process into the app

We want to start moving away from having such simple transactions being processed in a separate app (Customer portal). Let's move the whole buying process into the main GitLab app to avoid additional user authentication and to further simplify the process.

Our goal is to maximise repeat purchases: an existing customer should be able to buy additional CI minutes with only 4 clicks.

Related:

• Emily's prototype for in-app pro-rated seats purchase
• Emily's wireframes

Early-stage mockups of the flow

Mural

The flow as outlined above takes 3 clicks to complete when an existing credit card is stored.

Questions:

• Do we need to tell the user which credit card it is? For example: Credit card ending with 5021
• Do we need to allow the users to change the credit card when an existing one is present?
• Do they need to accepts the T&Cs every time they buy minutes?
• How will this flow work/look like on mobile devices?

Next steps

• MVC Implement something like this screen which shows after the completed current flow in Customer portal based on @jackie_fraser's suggestion (gitlab-org/gitlab#222516 (closed))
• Next step: move the CI minutes purchase flow as it is now in Customer portal to .com as suggested by @chris_baus but don't save the credit card info to avoid non-authorised people making purchases as suggested by @mkarampalas (gitlab-org/gitlab#222517 (closed))
• work on improving the flow by moving it to the modal and cover all cases (existing card, nonexistent card etc.) after https://gitlab.com/gitlab-org/growth/engineering/-/issues/5372 and #1551 (closed) are resolved. (gitlab-org/gitlab#222519 (closed))