Checkout offers a simple way to accept payments for one-time purchases and subscriptions on your website. Checkout is a page hosted on Stripe where your customers can securely enter their payment details. Your customers are sent back to your website when they complete a purchase.

You can use Checkout without using the Stripe API on your server. This makes it ideal for conventional websites or standalone frontend applications. It’s the fastest way to start accepting payments with Stripe.

Use the following steps to create a Checkout page that lets a customer purchase a single product or plan:

1. Enable Checkout in the Dashboard
2. Configure products, SKUs, and plans
3. Integrate Checkout on your website

Sign up for Checkout updates

We'll send email updates when we release new features in Checkout

Get updates

Please enter a valid email address.

You might have had an internet hiccup. Try again?

Thank you!

Check your inbox to confirm your email address. 

Try it out

You can see what it’s like by clicking the Preview Checkout button below. This sample integration is running in test mode, which means that it won’t create a real charge. You can try it by using the following to fill in the form:

• Any contact information
• One of Stripe’s test card numbers, such as 4242 4242 4242 4242
• Any three-digit CVC code
• Any expiration date in the future
• Any postal code, such as 12345

Step 1: Enable Checkout in the Dashboard

To begin using Checkout, navigate to the Checkout section of your Business settings in the Dashboard, and click Get started.

Step 2: Configure products, SKUs, and plans

Next, define the goods and services you plan to sell in the Products section of the Dashboard. To create a new product, navigate to the Products section, click the New button, and select the type of product you would like to sell. The unique name and image that you supply is displayed to customers on Checkout.

When you create a one-time purchase product in the Dashboard, Stripe creates a default SKU with the same name as the product, assigning it a generated ID. This SKU ID is how you refer to the product that the customer is purchasing when you start the payment process with Checkout.

When you create a recurring product in the Dashboard, it prompts you to define a pricing plan. You can define multiple pricing plans with different parameters for each recurring product. Each plan has a generated ID that you can use to refer to the plan during the checkout process.

Step 3: Integrate Checkout on your website

To add Checkout to your website, you must add a snippet of code that includes the desired SKU or plan ID. You can use the Dashboard to generate the necessary code, or you can write it yourself.

<script src="https://js.stripe.com/v3/"></script>

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {betas: ['checkout_beta_4']});

stripe.redirectToCheckout({
  items: [
    // Replace with the ID of your SKU
    {sku: 'sku_123', quantity: 1}
  ],
  successUrl: 'https://your-website.com/success',
  cancelUrl: 'https://your-website.com/canceled',
}).then(function (result) {
  // Display result.error.message to your customer
});

The snippet adds a button to the page that, when clicked, redirects the customer to Checkout. When your customer successfully completes their payment, they are redirected to the success URL that you specified when configuring the code snippet. Typically, this is a page on your website that informs the customer that their payment was successful. The cancel URL is the page where Checkout redirects customers when they cancel the payment process.

Once payment is successful, you should fulfill the customer’s purchase. You can use webhooks to fulfill the purchase when the checkout_beta.session_succeeded event triggers. For more details about handling purchase fulfillment with Checkout, refer to the documentation.

You should not rely on the redirect to the successUrl page for fulfilling purchases, as customers may not always visit the successUrl page when they make a successful payment.

Next steps

Congrats! You now have a complete Checkout integration. When testing your integration with your test API key, you can use a test card number to ensure that it works correctly.

• Checkout Purchase Fulfillment
• Stripe.js Reference