diff --git a/types/react-stripe-elements/index.d.ts b/types/react-stripe-elements/index.d.ts index 8f5e5a4568..11903ec705 100644 --- a/types/react-stripe-elements/index.d.ts +++ b/types/react-stripe-elements/index.d.ts @@ -11,6 +11,7 @@ // Maciej Dabek // Hiroshi Ioka // Austin Turner +// Benedikt Bauer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.5 @@ -18,6 +19,7 @@ import * as React from 'react'; export namespace ReactStripeElements { + import BankAccountTokenOptions = stripe.BankAccountTokenOptions; type ElementChangeResponse = stripe.elements.ElementChangeResponse; type ElementsOptions = stripe.elements.ElementsOptions; // From https://stripe.com/docs/stripe-js/reference#element-types @@ -28,14 +30,6 @@ export namespace ReactStripeElements { type SourceOptions = stripe.SourceOptions; type HTMLStripeElement = stripe.elements.Element; - /** - * There's a bug in @types/stripe which defines the property as - * `declined_code` (with a 'd') but it's in fact `decline_code` - */ - type PatchedTokenResponse = TokenResponse & { - error?: { decline_code?: string }; - }; - interface StripeProviderOptions { stripeAccount?: string; } @@ -44,7 +38,12 @@ export namespace ReactStripeElements { | { apiKey?: never; stripe: stripe.Stripe | null } & StripeProviderOptions; interface StripeOverrideProps { - createToken(options?: TokenOptions): Promise; + /* + * react-stripe-elements let's you use the same createToken function + * with either credit card or bank account options + * which one to choose depends solely on the inferred elements and can't be expressed in TypeScript + */ + createToken(options?: TokenOptions | BankAccountTokenOptions): Promise; createSource(sourceData?: SourceOptions): Promise; createPaymentMethod( paymentMethodType: stripe.paymentMethod.paymentMethodType, diff --git a/types/react-stripe-elements/react-stripe-elements-tests.tsx b/types/react-stripe-elements/react-stripe-elements-tests.tsx index 68857f7e35..5265b19f74 100644 --- a/types/react-stripe-elements/react-stripe-elements-tests.tsx +++ b/types/react-stripe-elements/react-stripe-elements-tests.tsx @@ -8,7 +8,10 @@ import { CardExpiryElement, CardCvcElement, CardCVCElement, + IbanElement, + IdealBankElement, PostalCodeElement, + PaymentRequestButtonElement, ReactStripeElements, } from 'react-stripe-elements'; import InjectedStripeProps = ReactStripeElements.InjectedStripeProps; @@ -16,8 +19,8 @@ import InjectedStripeProps = ReactStripeElements.InjectedStripeProps; import ElementChangeResponse = stripe.elements.ElementChangeResponse; import ElementsOptions = stripe.elements.ElementsOptions; import ElementsCreateOptions = stripe.elements.ElementsCreateOptions; -import PatchedTokenResponse = ReactStripeElements.PatchedTokenResponse; import HTMLStripeElement = ReactStripeElements.HTMLStripeElement; +import TokenResponse = ReactStripeElements.TokenResponse; const cardElementProps: ElementsOptions = { iconStyle: 'solid', @@ -65,9 +68,7 @@ const fontElementsProps: ElementsCreateOptions = { locale: 'es', }; - el.clear()} />; - -const ElementsWithPropsTest: React.SFC = () => ( +const ElementsWithPropsTest: React.FC = () => (
( onReady={(el: HTMLStripeElement) => void 0} onFocus={(event: ElementChangeResponse) => void 0} /> + void 0} + onBlur={(event: ElementChangeResponse) => void 0} + onReady={(el: HTMLStripeElement) => void 0} + onFocus={(event: ElementChangeResponse) => void 0} + /> + void 0} + onBlur={(event: ElementChangeResponse) => void 0} + onReady={(el: HTMLStripeElement) => void 0} + onFocus={(event: ElementChangeResponse) => void 0} + /> void 0} @@ -111,11 +126,19 @@ const ElementsWithPropsTest: React.SFC = () => ( onReady={(el: HTMLStripeElement) => void 0} onFocus={(event: ElementChangeResponse) => void 0} /> + void 0} + onBlur={(event: ElementChangeResponse) => void 0} + onReady={(el: HTMLStripeElement) => void 0} + onFocus={(event: ElementChangeResponse) => void 0} + onClick={(event: ElementChangeResponse) => void 0} + />
); interface ComponentProps { - tokenCallback(token: PatchedTokenResponse): void; + tokenCallback(token: TokenResponse): void; } class WrappedComponent extends React.Component { @@ -141,6 +164,7 @@ class WrappedComponent extends React.Component { const elements = this.props.elements; + // createToken(options?: TokenOptions) this.props .stripe!.createToken({ name: '', @@ -152,7 +176,19 @@ class WrappedComponent extends React.Component this.props.tokenCallback(response)); + .then((response: TokenResponse) => this.props.tokenCallback(response)); + + // createToken(options?: BankAccountTokenOptions) + this.props + .stripe!.createToken({ + country: '', + currency: '', + routing_number: '', + account_number: '', + account_holder_name: '', + account_holder_type: '', + }) + .then((response: TokenResponse) => this.props.tokenCallback(response)); } isFormValid = () => { @@ -173,7 +209,7 @@ class WrappedComponent extends React.Component = injectStripe(WrappedComponent); class MainComponent extends React.Component { - onTokenReceived = (token: PatchedTokenResponse) => void 0; + onTokenReceived = (token: TokenResponse) => void 0; render() { return ; @@ -195,7 +231,7 @@ class TestHOCs extends React.Component { /** * Just an extra test to check default props */ -const ElementsDefaultPropsTest: React.SFC = () => ( +const ElementsDefaultPropsTest: React.FC = () => (
@@ -210,9 +246,9 @@ const ElementsDefaultPropsTest: React.SFC = () => ( * StripeProvider should either receive `apiKey` or `stripe`, but not both. * See: https://github.com/stripe/react-stripe-elements/blob/d30b32b6b8df282dd8880a3521667c371e90083f/src/components/Provider.js#L83-L86 */ -const TestStripeProviderProps1: React.SFC = () => ; +const TestStripeProviderProps1: React.FC = () => ; -const TestStripeProviderProps2: React.SFC<{ +const TestStripeProviderProps2: React.FC<{ stripe: stripe.Stripe; }> = props => ; @@ -220,7 +256,7 @@ const TestStripeProviderProps2: React.SFC<{ * props.stripe is null until loaded. * See: https://github.com/stripe/react-stripe-elements#props-shape */ -const TestStripeProviderProps3: React.SFC<{ +const TestStripeProviderProps3: React.FC<{ stripe: stripe.Stripe; }> = props => ; @@ -228,7 +264,7 @@ const TestStripeProviderProps3: React.SFC<{ * End-to-end usage of loading stripe.js asynchronously. * See: https://github.com/stripe/react-stripe-elements#loading-stripejs-asynchronously */ -const TestStripeProviderProps4: React.SFC<{ +const TestStripeProviderProps4: React.FC<{ stripe: null | stripe.Stripe; }> = props => ( @@ -242,7 +278,7 @@ const TestStripeProviderProps4: React.SFC<{ * StripeProvider should be able to accept options. * See: https://stripe.com/docs/stripe-js/reference#stripe-function for options. */ -const TestStripeProviderOptions: React.SFC = () => ; +const TestStripeProviderOptions: React.FC = () => ; class CreatePaymentMethod extends React.Component { testCreatePaymentMethod = () => { diff --git a/types/stripe-v3/index.d.ts b/types/stripe-v3/index.d.ts index fd517f2087..6b9096ca4a 100644 --- a/types/stripe-v3/index.d.ts +++ b/types/stripe-v3/index.d.ts @@ -25,7 +25,7 @@ declare namespace stripe { interface Stripe { elements(options?: elements.ElementsCreateOptions): elements.Elements; - createToken(element: elements.Element, options?: TokenOptions): Promise; + createToken(element: elements.Element, options?: TokenOptions | BankAccountTokenOptions): Promise; createToken(name: 'bank_account', options: BankAccountTokenOptions): Promise; createToken(name: 'pii', options: PiiTokenOptions): Promise; createSource(element: elements.Element, options?: { owner?: OwnerInfo }): Promise; diff --git a/types/stripe-v3/stripe-v3-tests.ts b/types/stripe-v3/stripe-v3-tests.ts index 6f2caf4ed4..51566556bb 100644 --- a/types/stripe-v3/stripe-v3-tests.ts +++ b/types/stripe-v3/stripe-v3-tests.ts @@ -130,10 +130,39 @@ describe("Stripe elements", () => { }); it("should create an iban element", () => { - elements.create('iban', { + const ibanElement = elements.create('iban', { supportedCountries: ['SEPA'], placeholderCountry: 'AT' }); + stripe.createToken(ibanElement, { + country: 'US', + currency: 'USD', + routing_number: '110000000', + account_number: '110000000', + account_holder_name: 'Jane Austen', + account_holder_type: 'individual', + }) + .then((result: stripe.TokenResponse) => { + console.log(result.token); + }, + (error: stripe.Error) => { + console.error(error); + }); + + stripe.createToken('bank_account', { + country: 'US', + currency: 'USD', + routing_number: '110000000', + account_number: '110000000', + account_holder_name: 'Jane Austen', + account_holder_type: 'individual', + }) + .then((result: stripe.TokenResponse) => { + console.log(result.token); + }, + (error: stripe.Error) => { + console.error(error); + }); }); it("should create an idealBank element", () => {