Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Updates initCheckout to be synchronousBreaking changes

What’s new

The stripe.initCheckout method is now synchronous instead of asynchronous.

Why is this a breaking change?

This breaking change affects you if your integration uses Elements with the Checkout Sessions API.

To migrate, you need to:

  1. Remove any await or .then() calls associated with initCheckout.
  2. Replace your fetchClientSecret function with a client secret string or Promise that resolves to a client secret string.
  3. Call the new asynchronous function checkout.loadActions() in order to access actions such as getSession(), which replaces session(), or confirm(). You only need to call loadActions() once.
  4. If you previously wrapped initCheckout in a try...catch block, you should examine the resolved type value of loadActions() instead to check for errors.
const promise = fetch("/create-checkout-session", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
})
  .then((r) => r.json())
  .then((r) => r.clientSecret);

const checkout = await stripe.initCheckout({
  fetchClientSecret: () => promise
});
const checkout = stripe.initCheckout({
  clientSecret: promise
});
const paymentElement = checkout.createPaymentElement();
paymentElement.mount("#payment-element");

const session = checkout.session();
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
}

Impact

The synchronous nature of initCheckout enables you to mount Elements earlier, which reduces the render latency of any Elements you mount immediately after initCheckout. This also enables Elements to display the skeleton loader UI after it’s mounted but the session state hasn’t fully loaded yet.

Related changes

Was this page helpful?
YesNo