Checkout Client Quickstart
Use the Checkout client 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 payment methods with existing CustomersStripe Customer objects allow you to perform recurring charges, and to track multiple charges, that are associated with the same customer. or using separate authorization and capture for card payments. It is also not compatible with ConnectConnect is Stripe’s solution for any business that needs to process payments and pay out to sellers and service providers.. If the limitations of the client-only integration make it unsuitable for your use case, consider using the client and server integration instead.
Follow these steps to create a Checkout page for one-time payments:
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: Create products
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 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 SKUSKUs (Stock Keeping Units) represent a specific Product variation, taking into account any combination of attributes and cost (for instance, size, color, currency, cost). 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 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. 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 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. 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 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.