One-time Payments with Checkout Client-only Integration

    Use Checkout’s client-only integration to sell products defined in the Dashboard.

    With the client-only integration, you define your products directly in the Stripe Dashboard and reference them by ID on the client side. This approach makes it possible to integrate Checkout into your website without needing any server-side code. It is best suited for simple integrations that don’t need dynamic pricing.

    The client-only integration has several other notable differences. It does not support associating payments with existing Customers, or placing a hold on a card before charging it. It also is not compatible with Connect.

    Follow these steps to create a Checkout page for one-time payments:

    1. Enable Checkout in the Dashboard
    2. Create your product in the Dashboard
    3. Generate the Checkout button

    Step 1: Enable Checkout in the Dashboard

    To begin using Checkout, log into the Stripe Dashboard and navigate to the Checkout settings. From here you can enable the client-only integration and customize the look and feel of your checkout page.

    Step 2: Create products in the Dashboard

    Before you start configuring products, make sure you are in test mode by toggling the View test data button at the bottom of the Stripe Dashboard. Next, define the items you want to sell. To create a new product:

    • Navigate to the Products section in the Dashboard
    • Click New
    • Click One-time purchase products

    The unique name and image that you supply is displayed to customers on Checkout. When you create a product in the Dashboard, Stripe creates a default SKU with the same name as the product and generates an ID for the SKU. This SKU ID is how you refer to the product when you start the payment process with Checkout. You can create new SKUs to represent variations of your product (multiple sizes of the same T-shirt, for example).

    Step 3: Generate the Checkout button

    To use Checkout on your website, you must add a snippet of code that includes the desired SKU. 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 want to sell.

    In the product detail view, click the Use with Checkout button next to a SKU to generate a code snippet that you can add to your website.

    Copy and paste the snippet into the body of a web page. The snippet adds a button to the page that, when clicked, redirects the customer to Checkout. You can include multiple checkout buttons on the same page.

    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.

    When your customer clicks on your logo in a Checkout Session without completing a payment, Checkout redirects them back to your website by navigating to the cancel URL you specified when configuring the code snippet. Typically, this is the page on your website that the customer viewed prior to redirecting 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 https://js.stripe.com:

    <script src="https://js.stripe.com/v3/"></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');
    
    const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
    

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

    stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
    }).then(function (result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
    });
    
    const {error} = await stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
    })
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `error.message`.
    

    The snippet calls a function that when invoked redirects the customer to Checkout. When your customer successfully completes their payment, they are redirected to the success URL that you specified when calling redirectToCheckout. Typically, this is a page on your website that informs the customer that their payment was successful. When your customer clicks on your logo in a Checkout Session without completing a payment, Checkout redirects them back to your website by navigating to the cancel URL that you specified when calling redirectToCheckout. Typically, this is the page on your website that the customer viewed prior to redirecting to Checkout.

    Fulfill the customer’s purchase when you have a successful payment. You can use webhooks to fulfill the purchase when the checkout.session.completed event triggers. Next, see how to handle actions after the payment.

    Next steps

    Congrats! You now have a complete Checkout client-only integration using SKUs 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.

    Was this page helpful?

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

    On this page