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 CustomersStripe Customer objects allow you to perform recurring charges, and to track multiple charges, that are associated with the same customer., or placing a hold on a card before charging it. It also is not compatible with ConnectConnect is Stripe’s solution for any business that needs to process payments and pay out to sellers and service providers..
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-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 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. 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.