Build a checkout pageBeta
Beta
This custom checkout integration is in private beta. To request access, click here.
You can build a custom checkout experience on your website by using Stripe Elements and Custom Checkout, a front-end SDK that manages tax, discounts, shipping rates, and so on.
Set up the serverServer-side
Before you begin, you need to register for a Stripe account.
Use the official Stripe libraries to access the API from your application.
Set the SDK to use the custom_checkout_beta=v1
beta version header.
Initialize a Checkout SessionServer-side
Add an endpoint on your server that creates a Checkout Session object and returns its client secret to your front end.
A Checkout Session represents your customer’s session as they pay for one-time purchases or subscriptions. Checkout Sessions expire 24 hours after creation.
For more details about creation parameters, see how to create a Checkout Session.
Build your checkout pageClient-side
Collect payment details
Add one-click payment buttons
Submit the payment to Stripe
Handle post-payment eventsServer-side
Handle the checkout.session.completed event to fulfill the order. Depending on which payment methods you accept (for example, cards or mobile wallets), you might have some additional events to handle. This event includes the Checkout Session object, which contains details about your customer and their payment.
Handle delayed notification payment methods
Caution
This step is only required if you plan to use any of the following payment methods: Bacs Direct Debit, Bank transfers, Boleto, Canadian pre-authorized debits, Konbini, OXXO, SEPA Direct Debit, SOFORT, or ACH Direct Debit.
When receiving payments with a delayed notification payment method, funds aren’t immediately available. It can take multiple days for funds to process so you should delay order fulfillment until the funds are available in your account. After the payment succeeds, the underlying PaymentIntent status changes from processing
to succeeded
.
Event | Description | Next steps |
---|---|---|
checkout.session.completed | The customer successfully authorized the payment by submitting the Checkout form. | Wait for the payment to succeed or fail. |
checkout.session.async_payment_succeeded | The customer’s payment succeeded. | Fulfill the purchased goods or services. |
checkout.session.async_payment_failed | The payment was declined or failed for some other reason. | Contact the customer through email and request that they place a new order. |
These events all include the Checkout Session object. After the payment succeeds, the underlying PaymentIntent status changes from processing
to succeeded
.