Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

danwang-stripe
Copy link
Contributor

Summary & motivation

r? @pololi-stripe

Updates CheckoutProvider and useCheckout to return a disjoint union of loading/error/success always, rather than rendering null until everything loads.

API review

APIREVIEW-3693

Testing & documentation

@danwang-stripe danwang-stripe changed the title Update useCheckout to return loading/error states [breaking] Update useCheckout to return loading/error states Aug 7, 2025
@alanyan-stripe
Copy link
Contributor

Do not merge until the breaking version is ready to be cut.

Copy link
Contributor

@pololi-stripe pololi-stripe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Non-blocking:

const checkout = useCheckout();

This is the storybook example. It needs to be updated as well.

if (!ctx.checkoutSdk) {
return null;
}
const contextValue = React.useMemo(() => getContextValue(stripe, state), [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@alanyan-stripe
Copy link
Contributor

Will add the storybook change as a fast follow

@cbala-stripe cbala-stripe merged commit 53799b1 into master Sep 2, 2025
2 checks passed
alanyan-stripe pushed a commit to alanyan-stripe/react-stripe-js that referenced this pull request Sep 2, 2025
@alanyan-stripe
Copy link
Contributor

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}};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants