— No Results

    Checkout Client Quickstart

    Use the Checkout client integration to sell products and subscriptions defined in the Dashboard.

    Use the following steps to create a Checkout page that lets a customer make a one-time payment or subscribe to recurring payment plans:

    1. Enable Checkout in the Dashboard
    2. Configure products and plans
    3. Add Checkout to your website

    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 integration and customize the look and feel of your checkout page.

    Step 2: Configure products and plans

    Before you start configuring products, make sure you are in test mode by toggling the “View test data” button at the bottom of your dashboard menu. 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. The unique name and image that you supply is displayed to customers on Checkout.

    One-time purchase products

    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).

    Subscriptions

    When you create a recurring product in the Dashboard, you’re prompted 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 as a reference during the checkout process. You can also define free trials from here.

    Step 3: Add Checkout to your website

    To use Checkout on 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 want 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.

    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.

    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 or plan 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`.
});

    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((result) => {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.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. The cancel URL is the page where Checkout redirects customers when they cancel the payment process.

    Fulfill the customer’s purchase when you have successful payment. You can use webhooks to fulfill the purchase when the checkout.session.completed event triggers. For more details about handling purchase fulfillment with Checkout, refer to the documentation.

    Optional: Customizing Checkout

    Branding Settings

    You can customize the look and feel of Checkout via the Stripe Dashboard. Go to Branding Settings where you can:

    • Upload a logo or icon
    • Customize the accent color of the Checkout page

    Customizing the Submit Button

    You can also inform Checkout as to what kind of transaction your customer is performing for SKU and line item Checkout Sessions. By doing this, Checkout can display more relevant copy to your user on the submit button.

    To do this, provide a submitType in the redirectToCheckout call:

    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',
  submitType: 'donate',
}).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`.
});

    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',
  submitType: 'donate',
}).then((result) => {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

    This will cause your Checkout submit button to read “Donate $5.00”.

    See the Stripe.js reference for a complete list of submitType options.

    Optional: Prefilling customer data

    You may already have collected information about your customer that you want to prefill in the Checkout page to avoid your customers needing to enter their payment information twice. You can prefill the customer email on the Checkout page by providing customerEmail in the redirectToCheckout call.

    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',
  customerEmail: 'customer@example.com',
}).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`.
});

    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',
  customerEmail: 'customer@example.com',
}).then((result) => {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

    Optional: Billing address collection

    You can specify whether Checkout should collect the customer’s billing address by setting billingAddressCollection in the redirectToCheckout call. If set to required, Checkout will always collect the customer’s billing address. If left blank or set to auto Checkout will only collect the billing address when necessary.

    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',
  billingAddressCollection: 'required',
}).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`.
});

    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',
  billingAddressCollection: 'required',
}).then((result) => {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

    Next steps

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

    Questions?

    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

    Send

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

    On this page