v4.0.0

Changed

• [breaking] split out custom checkout imports (#609)
• Update useCheckout to return loading/error states (#606)

Upgrade guidance

Import changes

Checkout paths changed:
Note: this only applies to Elements with Checkout Sessions API integrations.

import {useCheckout, PaymentElement} from '@stripe/react-stripe-js';

to

import {useCheckout, PaymentElement} from '@stripe/react-stripe-js/checkout';

useCheckout changes

Previously:

• CheckoutProvider renders children if initCheckout succeeded, and null otherwise.
• useCheckout() returns the SDK if initCheckout succeeded, and throws an error otherwise.

Now (>= v4.0.0):

• CheckoutProvider renders children unconditionally.
• useCheckout() returns a disjoint union describing the asynchronous state. The new return value now looks like:

type useCheckout = () =>
  | {type: 'loading'}
  | {
      type: 'success';
      checkout: CheckoutValue;
    }
  | {type: 'error'; error: {message: string}};