stripe-js: Broken typings for StripeAuBankAccountElement when using StripeElement

Summary

The (I assume new-ish) type StripeAuBankAccountElement seems to break compatibility for resolving other elements such as StripeCardElement against the parent StripeElement.

https://github.com/stripe/stripe-js/blob/master/types/stripe-js/elements.d.ts#L14 (strangely imported here) https://github.com/stripe/stripe-js/blob/master/types/stripe-js/elements.d.ts#L251-L263

TS2322: 
Type 'StripeElement' is not assignable to type 'StripeCardElement | StripeCardNumberElement | { token: string; }'.   

Type 'StripeAuBankAccountElement' is not assignable to type 'StripeCardElement | StripeCardNumberElement | { token: string; }'.

Type 'StripeAuBankAccountElement' is not assignable to type 'StripeCardNumberElement'.

Type 'StripeAuBankAccountElement' is not assignable to type '{ on(eventType: "change", handler: (event: StripeCardNumberElementChangeEvent) => any): StripeCardNumberElement; on(eventType: "ready", handler: (event: { ...; }) => any): StripeCardNumberElement; on(eventType: "focus", handler: (event: { ...; }) => any): StripeCardNumberElement; on(eventType: "blur", handler: (even...'.         
  Types of property 'on' are incompatible.           

Type '{ (eventType: "change", handler: (event: StripeAuBankAccountElementChangeEvent) => any): StripeAuBankAccountElement; (eventType: "ready", handler: (event: { ...; }) => any): StripeAuBankAccountElement; (eventType: "focus", handler: (event: { ...; }) => any): StripeAuBankAccountElement; (eventType: "blur", handler: (...' is not assignable to type '{ (eventType: "change", handler: (event: StripeCardNumberElementChangeEvent) => any): StripeCardNumberElement; (eventType: "ready", handler: (event: { ...; }) => any): StripeCardNumberElement; (eventType: "focus", handler: (event: { ...; }) => any): StripeCardNumberElement; (eventType: "blur", handler: (event: { ......'.             
  Types of parameters 'handler' and 'handler' are incompatible.               
  Types of parameters 'event' and 'event' are incompatible.                 
  Property 'brand' is missing in type 'StripeAuBankAccountElementChangeEvent' but required in type 'StripeCardNumberElementChangeEvent'.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 16 (4 by maintainers)

Most upvoted comments

What a coincidence!! I have opened an issue on react-stripe-js yesterday. @christopher-stripe This is one of the examples causing the error https://github.com/stripe/react-stripe-js/blob/master/examples/hooks/2-Split-Card.js . I have tried the example on npm homepage and sandbox as well. Same goes for them

Basically this, I can post some code when I get back to the project but this essentially covers it.

What a coincidence!! I have opened an issue on react-stripe-js yesterday. @christopher-stripe This is one of the examples causing the error https://github.com/stripe/react-stripe-js/blob/master/examples/hooks/2-Split-Card.js . I have tried the example on npm homepage and sandbox as well. Same goes for them