One-time payments with Checkout Client-only integration

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

    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. It is best suited for simple integrations that don’t need dynamic pricing.

    The client-only integration has several other notable differences. This integration does not support associating payments with existing Customer objects or placing a hold on a card before charging it. Connect platforms also cannot use this integration on behalf of their connected accounts.

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

    2 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 Euro. 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.

    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 and price:

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

    Use the price ID when you create a Checkout Session, to specify how much you’re charging for the product. The product name, description, and image that you supply are displayed to customers on Checkout.

    To create a basic Product via the API, only the name field is required. The product name, description, and images that you supply are displayed to customers on Checkout.

    curl https://api.stripe.com/v1/products \ -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \ -d name="Blue banana"
    product = Stripe::Product.create( { name: 'Blue banana', } )
    product = stripe.Product.create( name='Blue banana', )
    $product = \\Stripe\\Product::create([ 'name' => 'Blue banana', ]);
    ProductCreateParams params = ProductCreateParams.builder() .setName("Blue banana") .build(); Product product = Product.create(params);
    const product = await stripe.products.create({ name: 'Blue banana', });
    params := &stripe.ProductParams{ Name: stripe.String("Blue banana"), } p, _ := product.New(params)
    var productService = new ProductService(); var options = new ProductCreateOptions { Name = "Blue banana", }; var product = productService.Create(options);

    Next, create a Price to define how much and how often to charge for your product. This includes how much the product costs and what currency to use.

    curl https://api.stripe.com/v1/prices \ -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \ -d product="{{ PRODUCT_ID }}" \ -d unit_amount=2000 \ -d currency=usd
    price = Stripe::Price.create( { product: '{{ PRODUCT_ID }}', unit_amount: 2000, currency: 'usd', } )
    price = stripe.Price.create( product='{{ PRODUCT_ID }}', unit_amount=2000, currency='usd', )
    $price = \\Stripe\\Price::create([ 'product' => '{{ PRODUCT_ID }}', 'unit_amount' => 2000, 'currency' => 'usd', ]);
    PriceCreateParams params = PriceCreateParams.builder() .setProduct("{{ PRODUCT_ID }}") .setUnitAmount(2000) .setCurrency("usd") .build(); Price price = Price.create(params);
    const price = await stripe.prices.create({ product: '{{ PRODUCT_ID }}', unit_amount: 2000, currency: 'usd', });
    params := &stripe.PriceParams{ Product: stripe.String("{{ PRODUCT_ID }}"), UnitAmount: stripe.Int64(2000), Currency: stripe.String("usd"), } p, _ := price.New(params)
    var priceService = new PriceService(); var options = new PriceCreateOptions { Product = "{{ PRODUCT_ID }}", UnitAmount = 2000, Currency = "usd", }; var price = priceService.Create(options);

    This price ID is how you refer to the product when you start the payment process with Checkout.

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

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

    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>
    npm install @stripe/stripe-js

    Next, create an instance of the Stripe object by providing your publishable API key as the first parameter:

    var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
    import {loadStripe} from '@stripe/stripe-js'; const stripe = await loadStripe('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({ lineItems: [ // Replace with the ID of your price {price: '{PRICE_ID}', quantity: 1} ], mode: 'payment', 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({ lineItems: [ // Replace with the ID of your price {price: '{PRICE_ID}', quantity: 1} ], mode: 'payment', 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`.

    When your customer successfully completes their payment, they are redirected to the success URL. 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, they are redirected to the cancel URL. Typically, this is the page on your website 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.

    Install the Stripe.js module. Always load Stripe.js directly from https://js.stripe.com. You cannot include it in a bundle or host it yourself.

    npm install @stripe/stripe-js

    Add Stripe.js to your page

    Call loadStripe with your publishable key. It returns a Promise that resolves with the Stripe object once Stripe.js has loaded. When the customer clicks the checkout button, call redirectToCheckout to begin the payment process. Pass it an array of objects containing the SKU ID, quantity, a success URL, and a cancel URL.

    import React from 'react'; import ReactDOM from 'react-dom'; import { loadStripe } from '@stripe/stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); function App() { const handleClick = async (event) => { // When the customer clicks on the button, redirect them to Checkout. const stripe = await stripePromise; const { error } = await stripe.redirectToCheckout({ lineItems: [ // Replace with the ID of your price {price: '{PRICE_ID}', quantity: 1} ], mode: 'payment', 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`. }; return ( <button role="link" onClick={handleClick}> Checkout </button> ); } ReactDOM.render(<App />, document.getElementById('root'));

    When your customer successfully completes their payment, they are redirected to the success URL. 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, they are redirected to the cancel URL. Typically, this is the page on your website the customer viewed prior to redirecting to Checkout.

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

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

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

    5 Confirm the payment is successful

    When your customer completes a payment, Stripe redirects them to the URL that you specified in the success_url parameter. Typically, this is a page on your website that informs your customer that their payment was successful.

    There are several ways you can confirm the payment is successful:

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

    Stripe sends the checkout.session.completed event for a successful Checkout payment. The webhook payload includes the Checkout Session object, which contains information about the Customer, PaymentIntent, or Subscription, and optionally the client_reference_id if you provided it when calling redirectToCheckout on the client.

    The checkout.session.completed webhook is sent to your server before your customer is redirected. Your webhook acknowledgement (any 2xx status code) triggers the customer’s redirect to the success_url. If Stripe doesn’t receive successful acknowledgement within 10 seconds of a successful payment, your customer is automatically redirected to the success_url page.

    As the webhook must be acknowledged before redirecting the customer to the success_url​, you can be sure that the order was successful and can safely show a success message to your customer.

    # Set your secret key. Remember to switch to your live secret key in production! # See your keys here: https://dashboard.stripe.com/account/apikeys Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc' # You can find your endpoint's secret in your webhook settings endpoint_secret = 'whsec_...' # Using Sinatra post '/webhook' do payload = request.body.read event = nil # Verify webhook signature and extract the event # See https://stripe.com/docs/webhooks/signatures for more information. sig_header = request.env['HTTP_STRIPE_SIGNATURE'] begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload status 400 return rescue Stripe::SignatureVerificationError => e # Invalid signature status 400 return end # Handle the checkout.session.completed event if event['type'] == 'checkout.session.completed' session = event['data']['object'] # Fulfill the purchase... handle_checkout_session(session) end status 200 end
    # Set your secret key. Remember to switch to your live secret key in production! # See your keys here: https://dashboard.stripe.com/account/apikeys stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc' # Using Django from django.http import HttpResponse # You can find your endpoint's secret in your webhook settings endpoint_secret = 'whsec_...' @csrf_exempt def my_webhook_view(request): payload = request.body sig_header = request.META['HTTP_STRIPE_SIGNATURE'] event = None try: event = stripe.Webhook.construct_event( payload, sig_header, endpoint_secret ) except ValueError as e: # Invalid payload return HttpResponse(status=400) except stripe.error.SignatureVerificationError as e: # Invalid signature return HttpResponse(status=400) # Handle the checkout.session.completed event if event['type'] == 'checkout.session.completed': session = event['data']['object'] # Fulfill the purchase... handle_checkout_session(session) return HttpResponse(status=200)
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys \Stripe\Stripe::setApiKey('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); // You can find your endpoint's secret in your webhook settings $endpoint_secret = 'whsec_...'; $payload = @file_get_contents('php://input'); $sig_header = $_SERVER['HTTP_STRIPE_SIGNATURE']; $event = null; try { $event = \Stripe\Webhook::constructEvent( $payload, $sig_header, $endpoint_secret ); } catch(\UnexpectedValueException $e) { // Invalid payload http_response_code(400); exit(); } catch(\Stripe\Exception\SignatureVerificationException $e) { // Invalid signature http_response_code(400); exit(); } // Handle the checkout.session.completed event if ($event->type == 'checkout.session.completed') { $session = $event->data->object; // Fulfill the purchase... handle_checkout_session($session); } http_response_code(200);
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"; // You can find your endpoint's secret in your webhook settings String endpointSecret = "whsec_..."; // Using the Spark framework (http://sparkjava.com) public Object handle(Request request, Response response) { String payload = request.body(); String sigHeader = request.headers("Stripe-Signature"); Event event = null; try { event = Webhook.constructEvent( payload, sigHeader, endpointSecret ); } catch (JsonSyntaxException e) { // Invalid payload response.status(400); return ""; } catch (SignatureVerificationException e) { // Invalid signature response.status(400); return ""; } // Handle the checkout.session.completed event if ("checkout.session.completed".equals(event.getType())) { Session session = (Session) event.getDataObjectDeserializer().getObject(); // Fulfill the purchase... handleCheckoutSession(session); } response.status(200); return ""; }
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); // Find your endpoint's secret in your Dashboard's webhook settings const endpointSecret = 'whsec_...'; // Using Express const app = require('express')(); // Use body-parser to retrieve the raw body as a buffer const bodyParser = require('body-parser'); // Match the raw body to content type application/json app.post('/webhook', bodyParser.raw({type: 'application/json'}), (request, response) => { const sig = request.headers['stripe-signature']; let event; try { event = stripe.webhooks.constructEvent(request.body, sig, endpointSecret); } catch (err) { return response.status(400).send(`Webhook Error: ${err.message}`); } // Handle the checkout.session.completed event if (event.type === 'checkout.session.completed') { const session = event.data.object; // Fulfill the purchase... handleCheckoutSession(session); } // Return a response to acknowledge receipt of the event response.json({received: true}); }); app.listen(8000, () => console.log('Running on port 8000'));
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys stripe.Key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc" http.HandleFunc("/webhook", func(w http.ResponseWriter, req *http.Request) { const MaxBodyBytes = int64(65536) req.Body = http.MaxBytesReader(w, req.Body, MaxBodyBytes) body, err := ioutil.ReadAll(req.Body) if err != nil { fmt.Fprintf(os.Stderr, "Error reading request body: %v\n", err) w.WriteHeader(http.StatusServiceUnavailable) return } // Pass the request body & Stripe-Signature header to ConstructEvent, along with the webhook signing key // You can find your endpoint's secret in your webhook settings endpointSecret := "whsec_..."; event, err := webhook.ConstructEvent(body, req.Header.Get("Stripe-Signature"), endpointSecret) if err != nil { fmt.Fprintf(os.Stderr, "Error verifying webhook signature: %v\n", err) w.WriteHeader(http.StatusBadRequest) // Return a 400 error on a bad signature return } // Handle the checkout.session.completed event if event.Type == "checkout.session.completed" { var session stripe.CheckoutSession err := json.Unmarshal(event.Data.Raw, &session) if err != nil { fmt.Fprintf(os.Stderr, "Error parsing webhook JSON: %v\n", err) w.WriteHeader(http.StatusBadRequest) return } // Fulfill the purchase... handleCheckoutSession(session) } w.WriteHeader(http.StatusOK) })
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"; using System; using System.IO; using Microsoft.AspNetCore.Mvc; using Stripe; namespace workspace.Controllers { [Route("api/[controller]")] public class StripeWebHook : Controller { // You can find your endpoint's secret in your webhook settings const string secret = "whsec_..."; [HttpPost] public async Task<IActionResult> Index() { var json = await new StreamReader(HttpContext.Request.Body).ReadToEndAsync(); try { var stripeEvent = EventUtility.ConstructEvent(json, Request.Headers["Stripe-Signature"], secret); // Handle the checkout.session.completed event if (stripeEvent.Type == Events.CheckoutSessionCompleted) { var session = stripeEvent.Data.Object as Checkout.Session; // Fulfill the purchase... HandleCheckoutSession(session); } else { return Ok() } } catch (StripeException e) { return BadRequest(); } } } }

    You can get information about the customer or payment by retrieving the Customer or PaymentIntent objects referenced by the customer or payment_intent properties in the webhook payload.

    Retrieving line items from webhook

    By default, Checkout webhooks do not return line_items. To retrieve the items created with the Checkout Session, make an additional request with the Checkout Session id:

    curl https://api.stripe.com/v1/checkout/sessions/{CHECKOUT_SESSION_ID}/line_items \ -u sk_test_4eC39HqLyjWDarjtT1zdp7dc:
    stripe get /v1/checkout/sessions/{CHECKOUT_SESSION_ID}/line_items

    Testing webhooks locally

    To test webhooks locally, you can use Stripe CLI. Once you have it installed, you can forward events to your server:

    stripe listen --forward-to localhost:4242/webhook Ready! Your webhook signing secret is '{{WEBHOOK_SIGNING_SECRET}}' (^C to quit)

    Learn more about setting up webhooks.

    You can periodically check for new payments made via Checkout by polling the /v1/events endpoint for new checkout.session.completed events. You can then execute the code needed to fulfill the purchase when you detect a new checkout.session.completed event.

    Stripe generates the checkout.session.completed event when a Checkout payment is successful. The event payload includes the Checkout Session object, which contains information about the Customer, PaymentIntent, or Subscription, and optionally the client_reference_id if you provided it when calling redirectToCheckout on the client.

    The following example demonstrates how to retrieve all checkout.session.completed events in the last 24 hours:

    # Set your secret key. Remember to switch to your live secret key in production! # See your keys here: https://dashboard.stripe.com/account/apikeys Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc' events = Stripe::Event.list({ type: 'checkout.session.completed', created: { # Check for events created in the last 24 hours. gte: Time.now.utc.to_i - 24 * 60 * 60, }, }) events.auto_paging_each do |event| session = event['data']['object'] # Fulfill the purchase... handle_checkout_session(session) end
    # Set your secret key. Remember to switch to your live secret key in production! # See your keys here: https://dashboard.stripe.com/account/apikeys stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc' events = stripe.Event.list( type='checkout.session.completed', created={ # Check for events created in the last 24 hours. 'gte': int(time.time() - 24 * 60 * 60), }, ) for event in events.auto_paging_iter(): session = event['data']['object'] # Fulfill the purchase... handle_checkout_session(session)
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys \Stripe\Stripe::setApiKey('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); $events = \Stripe\Event::all([ 'type' => 'checkout.session.completed', 'created' => [ // Check for events created in the last 24 hours. 'gte' => time() - 24 * 60 * 60, ], ]); foreach ($events->autoPagingIterator() as $event) { $session = $event->data->object; // Fulfill the purchase... handle_checkout_session($session); }
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"; // Check for events created in the last 24 hours. HashMap<String, Object> createdParams = new HashMap<>(); createdParams.put("gte", (int) ((System.currentTimeMillis() / 1000) - 24 * 60 * 60)); HashMap<String, Object> params = new HashMap<>(); params.put("type", "checkout.session.completed"); params.put("created", createdParams); Iterable<Event> events = Event.list(params).autoPagingIterable(); for (Event event : events) { EventDataObjectDeserializer deserializer = event.getDataObjectDeserializer(); if (deserializer.getObject().isPresent()) { Session session = (Session) deserializer.getObject().get(); // Fulfill the purchase... handleCheckoutSession(session); } }
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); const events = stripe.events.list({ type: 'checkout.session.completed', created: { // Check for events created in the last 24 hours. gte: Math.floor((Date.now() - 24 * 60 * 60 * 1000)/1000), }, }); // For older versions of Node, see https://github.com/stripe/stripe-node/#auto-pagination for await (const event of events) { const session = event.data.object; // Fulfill the purchase... handleCheckoutSession(session); }
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys stripe.Key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc" params := &stripe.EventListParams{ Type: stripe.String("checkout.session.completed"), CreatedRange: &stripe.RangeQueryParams{ // Check for events created in the last 24 hours. GreaterThan: *stripe.Int64(time.Now().Unix() - 24 * 60 * 60), }, } i := event.List(params) for i.Next() { event := i.Event() var session stripe.CheckoutSession err := json.Unmarshal(event.Data.Raw, &session) if err == nil { // Fulfill the purchase... handleCheckoutSession(session) } }
    // Set your secret key. Remember to switch to your live secret key in production! // See your keys here: https://dashboard.stripe.com/account/apikeys StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"; var service = new EventService(); var options = new EventListOptions { Type = "checkout.session.completed", Created = new DateRangeOptions { // Check for events created in the last 24 hours. GreaterThan = DateTime.Now.Subtract(new TimeSpan(24, 0, 0)), }, }; foreach (var stripeEvent in service.ListAutoPaging(options)) { var session = stripeEvent.Data.Object as Session; // Fulfill the purchase... handleCheckoutSession(session); }

    You can obtain information about the customer, payment, or subscription by retrieving the Customer, PaymentIntent, or Subscription objects referenced by the customer, payment_intent, and subscription properties in the webhook payload.

    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

    Was this page helpful?

    Feedback about this page?

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

    On this page