Build Front-end Customer Checkout Flow

Your Engineering and UX organizations typically complete this phase, which Stripe estimates to typically take about a week.

Payments form

You can collect card details on your site with either Stripe Elements or Stripe Checkout. If you use Checkout, you can modify subscriptions by changing a few attributes, as outlined in Building a Subscription Signup Form. If you need more control over your subscription form’s look and feel, use Elements.

UI considerations

Remember that you will need several UI components:

  1. A form for customers to enter their card details when subscribing.

  2. A form that your customers will use to update their card details, should they want to change their payment method.

  3. A button or link that your customers can use to cancel their subscription.

  4. If you have many plans, you’ll also need buttons or links that will downgrade or upgrade customers’ plans.

Saving cards

You’ll use the payment details your customer submits to create a Customer object, with a stored payment source that you can use later in your application. For more information on creating Customer objects, see our Saving Cards documentation.

Typically, you’ll only need to store the ID of the Customer object, and retrieve it to use later in your application. Our recipe on updating customer cards describes how to display the default card on record for a customer in your application.

Testing the front-end flow

You can use Stripe’s test mode to test your flow as you build it out.

Next steps

Was this page helpful? Yes No


Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.

On this page