Checkout Client-only Quickstart Beta

    Learn how to get started quickly with Checkout’s client-only integration by using the Dashboard to create SKUs and plans.

    Use the following steps to create a Checkout page that lets a customer purchase products and plans:

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

    Step 1: Enable Checkout in the Dashboard

    To begin using Checkout, log into the Stripe Dashboard, navigate to your Business settings > Checkout section, 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.

    In the Products section of the Dashboard, select the product that you wish to sell. In the product detail view, click the Use with Checkout button next to a SKU or plan to generate a code snippet that you can add to your website.

    Copy and paste the snippet into the body of a web page to add a payment button that redirects the customer to Checkout.

    Checkout relies on Stripe.js. To get started, include the following script tag on your website—it should always be loaded directly from

    <script src=""></script>

    Next, create an instance of the Stripe object by providing your publishable API key as the first parameter:

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

    When your customer is ready to pay, call redirectToCheckout to begin the checkout process. Pass it an array of objects that specify the SKU or plan ID and the quantity of each item that the customer wishes to purchase:

      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      successUrl: '',
      cancelUrl: '',
    }).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 using SKUs and plans created in the dashboard. When testing your integration with your test API key, you can use a test card number to ensure that it works correctly.


    We're always happy to help with code or other questions you might have! Search our documentation, contact support, or connect with our sales team. You can also chat live with other developers in #stripe on freenode.

    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.