Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management

One-time payments with CheckoutClient-only integration

Learn how to accept one-time card payments with just a few lines of code.

Stripe sample

Check out the donations sample on GitHub or try the hosted version.

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 any server-side code.

Warning

Client-only Checkout doesn’t support many of the features available with a client and server integration and Payment Links, which might better fit your use case.

Enable Checkout
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.

Create products and prices

To use Checkout, you first need to create a Product and a Price. Different physical goods or levels of service should be represented by products. Each product’s pricing is represented by one or more prices.

For example, you can create a T-shirt product that has 2 prices for different currencies: 20 USD and 15 EUR. This allows you to change and add prices without needing to change the details of your underlying products. You can either create a product and price through the API or through the Stripe Dashboard.

Caution

If you have an existing Checkout integration that doesn’t use Prices, note that the Checkout API has changed since Prices was introduced. You can use this migration guide to upgrade, or keep your existing integration.

Note

Products created in a sandbox can be copied to live mode so that you don’t need to re-create them. In the Product detail view in the Dashboard, click Copy to live mode in the upper right corner. You can only do this once for each product created in a sandbox. Subsequent updates to the test product are not reflected for the live product.

Make sure you’re in a sandbox, and define the items you want to sell. To create a new product and price:

  • Navigate to the Products section in the Dashboard
  • Click Add product
  • Select One time when setting the price

The product name, description, and image that you supply are displayed to customers in Checkout.

Redirect to Checkout
Dashboard
Client-side

To use Checkout on your website, you must add a snippet of code that includes the desired price. 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 Get Checkout code snippet selection in the overflow menu next to a price 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’re 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 succeeded.

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.

Before going live, make sure to configure your domains list in the Dashboard to match the success and cancel URLs.

Caution

Don’t rely on the redirect to the success_url alone for detecting payment initiation, as:

  • Malicious users could directly access the success_url without paying and gain access to your goods or services.
  • Customers may not always reach the success_url after a successful payment—they might close their browser tab before the redirect occurs.

Confirm the payment is successful

When your customer completes a payment, they’re redirected to the URL that you specified as the success_url. This is typically a page on your website that informs your customer that their payment was successful.

Use the Dashboard, a custom webhook, or a third-party plugin to handle post-payment events like sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow.

Successful payments appear in the Dashboard’s list of payments. When you click a payment, it takes you to the Payment details page. The Checkout summary section contains billing information and the list of items purchased, which you can use to manually fulfill the order.

Checkout summary

Note

Stripe can help you keep up with incoming payments by sending you email notifications whenever a customer successfully completes one. Use the Dashboard to configure email notifications.

You can use plugins like Zapier to automate updating your purchase fulfillment systems with information from Stripe payments.

Some examples of automation supported by plugins include:

  • Updating spreadsheets used for order tracking in response to successful payments
  • Updating inventory management systems in response to successful payments
  • Triggering notifications to internal customer service teams using email or chat applications

Test the integration

There are several test cards you can use to make sure your integration is ready for production. Use them with any CVC, postal code, and future expiration date.

NumberDescription
Succeeds and immediately processes the payment.
3D Secure 2 authentication must be completed for a successful payment.
Always fails with a decline code of insufficient_funds.

For the full list of test cards see our guide on testing.

Apple Pay and Google Pay

No configuration or integration changes are required to enable Apple Pay or Google Pay in Stripe Checkout. These payments are handled the same way as other card payments.

The Apple Pay button is displayed in a given Checkout Session if all of the following apply:

  • Apple Pay is enabled for Checkout in your Stripe Dashboard.
  • The customer’s device is running macOS 10.14.1+ or iOS 12.1+.
  • The customer is using the Safari browser.
  • The customer has a valid card registered with Apple Pay.

This ensures that Checkout only displays the Apple Pay button to customers who are able to use it.

OptionalCollect a billing address
Client-side

OptionalCollect a shipping address
Client-side

OptionalCustomize the Checkout button
Client-side

OptionalPrefill customer email
Client-side

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc