Set up future payments
Collecting payment details using Checkout’s setup mode is useful for setting up a payment method on file for future payments. Setup mode uses the Setup Intents API to create Payment Methods.
Set up StripeServer-side
First, you need a Stripe account. Register now.
Use our official libraries for access to the Stripe API from your application:
# Available as a gem sudo gem install stripe
# If you use bundler, you can add this line to your Gemfile gem 'stripe'
Create a Checkout SessionServer-side
To create a setup mode Session, use the mode
parameter with a value of setup
when creating the Session. You can optionally specify the customer
parameter to automatically attach the created payment method to an existing customer. See the Checkout Session API reference for a complete list of parameters that you can use for Session creation.
Append the {CHECKOUT_SESSION_ID}
template variable to the success_url
to get access to the Session ID after your customer successfully completes a Checkout Session.
curl https://api.stripe.com/v1/checkout/sessions \ -u
: \ -d "payment_method_types[]"="card" \ -d "mode"="setup" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "success_url"="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" \ -d "cancel_url"="https://example.com/cancel"sk_test_4eC39HqLyjWDarjtT1zdp7dc
Your Stripe.js integration needs the id
field from the Session creation API response, so make it available to the JavaScript or HTML file you call redirectToCheckout
from.
Redirect to CheckoutClient-side
Checkout relies on Stripe.js, Stripe’s foundational JavaScript library for building payment flows.
To get started, include the following script tag on your website—always load it directly from https://js.stripe.com. You can’t include it in a bundle or host it yourself. See Stripe samples for examples.
<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'
To use Checkout on your website, you must add a snippet of code that includes the Session id
from the previous step. When your customer is ready to save their payment method, call redirectToCheckout and provide the Session id
as a parameter.
var checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', function() { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }).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`. }); });
This code is typically invoked from an event handler that triggers in response to an action taken by your customer, such as clicking on a payment button.
Retrieve the Checkout SessionServer-side
After a customer successfully completes their Checkout Session, you need to retrieve the Session object. There are two ways to do this:
- Asynchronously: Handle
checkout.session.completed
webhooks, which contain a Session object. Learn more about setting up webhooks. - Synchronously: Obtain the
sessionId
from the URL when a user redirects back to your site (appended to thesuccess_url
) and retrieve the Session object.
curl https://api.stripe.com/v1/checkout/sessions/cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k \ -u
:sk_test_4eC39HqLyjWDarjtT1zdp7dc
The right choice depends on your tolerance for dropoff, as customers may not always reach the success_url
after a successful payment. It’s possible for them close their browser tab before the redirect occurs. Handling webhooks prevents your integration from being susceptible to this form of dropoff.
After you have retrieved the Session object, get the value of the setup_intent
key, which is the ID for the SetupIntent created during the Checkout Session. A SetupIntent is an object used to set up the customer’s bank account information for future payments.
Example checkout.session.completed
payload:
{ "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0", "object": "event", "api_version": "2019-03-14", "created": 1561420781, "data": { "object": { "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k", "object": "checkout.session", "billing_address_collection": null, "cancel_url": "https://example.com/cancel", "client_reference_id": null, "customer": "", "customer_email": null, "display_items": [], "mode": "setup", "setup_intent": "seti_1EzVO3HssDVaQm2PJjXHmLlM", "submit_type": null, "subscription": null, "success_url": "https://example.com/success" } }, "livemode": false, "pending_webhooks": 1, "request": { "id": null, "idempotency_key": null }, "type": "checkout.session.completed" }
Note the setup_intent
ID for the next step.
Retrieve the SetupIntentServer-side
Using the setup_intent
ID, retrieve the SetupIntent object.
curl https://api.stripe.com/v1/setup_intents/seti_1EzVO3HssDVaQm2PJjXHmLlM \ -u
:sk_test_4eC39HqLyjWDarjtT1zdp7dc
Note the payment_method
ID returned for the next step.
If you’re requesting this information synchronously from the Stripe API (as opposed to handling webhooks), you can combine the previous step with this step by expanding the SetupIntent object in the request to the /v1/checkout/session endpoint. Doing this prevents you from having to make two network requests to access the newly created PaymentMethod ID.
Use the payment methodServer-side
If you didn’t create the Checkout Session with an existing customer, attach the PaymentMethod to a Customer. After it has been attached to a Customer, you can charge the PaymentMethod using a PaymentIntent.