[BUG]: TypeScript error on Elements options

[sedrik]

What happened?

Following the guide here https://docs.stripe.com/payments/accept-a-payment-deferred?type=subscription

I get the following error when typescript is trying to compile my component inside of index.tsx (https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=subscription#add-and-configure-the-elements-provider-to-your-checkout-page)

TS2322: Type '{ mode: string; amount: number; currency: string; appearance: {}; }' is not assignable to type 'StripeElementsOptions | undefined'.
  Type '{ mode: string; amount: number; currency: string; appearance: {}; }' is not assignable to type 'StripeElementsOptionsClientSecret | StripeElementsOptionsMode'.
    Type '{ mode: string; amount: number; currency: string; appearance: {}; }' is not assignable to type 'StripeElementsOptionsMode'.
      Types of property 'mode' are incompatible.
        Type 'string' is not assignable to type '"subscription" | "payment" | "setup" | undefined'.
    85 |
    86 |   return (
  > 87 |     <Elements stripe={stripePromise} options={options}>
       |                                      ^^^^^^^
    88 |       <form>
    89 |         <PaymentElement />
    90 |         <button>Submit</button>

Using the following versions (latest published on npm)
"@stripe/react-stripe-js": "^2.5.1",
"@stripe/stripe-js": "^3.0.6",

Environment

Typescript 5.3.3 on Ubuntu 23.10

Reproduction

No response

[sedrik]

It was not included in the original post but my options object looks like this

  const options = {
    mode: "subscription",
    // Fully customizable with appearance API.
    appearance: {
      /*...*/
    },
  };

[brendanm-stripe]

@sedrik I think this is a TS inference limitation and you can address it by explicitly typing your options as StripeElementsOptions:
const options: StripeElementsOptions = { ... }

Does that work for you?

[sedrik]

Hi @brendanm-stripe

Yes that actually solves it. Might be worth updating the documentation to include a TS example when you have time :)

Thanks