Recurring payments with Checkout client-only integration

    Use Checkout’s client-only integration to sell products or services requiring recurring payments.

    With the client-only integration, you create recurring products and pricing plans directly in the Stripe Dashboard and embed a Checkout button for those plans on your website. 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 to combine one-time line items and recurring plans in the same transaction (required to charge a one-time setup fee alongside an ongoing subscription, for example).

    The client-only integration has several other notable differences. It does not support associating subscriptions with existing Customers, placing a hold on a card before charging it, or defining multiple Plans with trials in a single transaction. It also is not compatible with Connect.

    Follow these steps to create a Checkout page for recurring payments:

    1. Enable Checkout in the Dashboard
    2. Create recurring products 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 Checkout settings. From here you can enable the client-only integration and customize the look and feel of your checkout page.

    Step 2: Create recurring 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 goods and services you plan to sell. To create a new product:

    • Navigate to the Products section in the Dashboard
    • Click New
    • Click Recurring products
    • Add 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 trial periods for each pricing plan.

    Step 3: Generate the Checkout button

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

    In the product detail view, click the Use with Checkout button next to a 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, 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 containing the plan ID, quantity, a success URL, and a cancel URL. If you pass only a single plan, it can have a trial period. However, if you define multiple plans, none can have trials.

    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 which the customer viewed prior to redirecting to Checkout.

    stripe.redirectToCheckout({ items: [{ // Replace with the ID of your plan plan: 'plan_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 plan plan: 'plan_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.

    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.


    Prefilling customer data optional

    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 information twice. Currently, you can prefill the customer email on the Checkout page by providing customerEmail in the redirectToCheckout call. We plan to expand this feature to allow you to prefill more fields in the future.

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

    Next steps

    Now that you have a working integration, learn how to handle actions after the payment and the options available for customizing Checkout.

    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