Add auBankAccount and BECS debit support

tests/types/index.ts

@@ -30,6 +30,8 @@ import {
   StripeIdealBankElement,
   StripeFpxBankElement,
   StripeFpxBankElementChangeEvent,
+  StripeAuBankAccountElement,
+  StripeAuBankAccountElementChangeEvent,
   StripePaymentRequestButtonElement,
   StripeElementType,
 } from '@stripe/stripe-js';
@@ -74,6 +76,12 @@ const MY_STYLE: StripeElementStyle = {
   },
 };
 
+const auBankAccountElement = elements.create('auBankAccount', {});
+
+const retrievedAuBankAccountElement: StripeAuBankAccountElement | null = elements.getElement(
+  'auBankAccount'
+);
+
 const cardElement: StripeCardElement = elements.create('card', {
   classes: {base: '', focus: ''},
   style: MY_STYLE,
@@ -175,9 +183,10 @@ assert<
   >
 >(false);
 
+const auBankElementType: StripeElementType = 'auBankAccount';
 const cardElementType: StripeElementType = 'card';
-const ibanElementType: StripeElementType = 'iban';
 const fpxElementType: StripeElementType = 'fpxBank';
+const ibanElementType: StripeElementType = 'iban';
 
 cardElement.mount('#bogus-container');
 ibanElement.mount('#bogus-container');
@@ -192,11 +201,12 @@ cardElement
     }
   });
 
-fpxBankElement.on('change', (e: StripeFpxBankElementChangeEvent) => {
-  if (e.error) {
-    console.error(e.error.message);
-  }
-});
+auBankAccountElement.on(
+  'change',
+  (e: StripeAuBankAccountElementChangeEvent) => {}
+);
+
+fpxBankElement.on('change', (e: StripeFpxBankElementChangeEvent) => {});
 
 paymentRequestButtonElement.on(
   'click',
@@ -205,6 +215,7 @@ paymentRequestButtonElement.on(
   }
 );
 
+auBankAccountElement.destroy();
 cardElement.destroy();
 cardNumberElement.destroy();
 cardCvcElement.destroy();
@@ -297,6 +308,24 @@ stripe.retrieveSource({id: '', client_secret: ''}).then((result) => {
   console.log(result.source!.type);
 });
 
+stripe.confirmAuBecsDebitPayment('', {
+  payment_method: {
+    au_becs_debit: auBankAccountElement,
+    billing_details: {name: '', email: ''},
+  },
+});
+
+stripe.confirmAuBecsDebitPayment('', {
+  payment_method: {
+    au_becs_debit: {bsb_number: '', account_number: ''},
+    billing_details: {name: '', email: ''},
+  },
+});
+
+stripe.confirmAuBecsDebitPayment('', {payment_method: ''});
+
+stripe.confirmAuBecsDebitPayment('');
+
 stripe
   .confirmCardPayment('', {
     payment_method: {card: cardElement, billing_details: {name: ''}},
@@ -361,6 +390,18 @@ stripe
   .handleCardAction('')
   .then(({paymentIntent}: {paymentIntent?: PaymentIntent}) => {});
 
+stripe.createPaymentMethod({
+  type: 'au_becs_debit',
+  au_becs_debit: auBankAccountElement,
+  billing_details: {name: 'Jenny Rosen', email: '[email protected]'},
+});
+
+stripe.createPaymentMethod({
+  type: 'au_becs_debit',
+  au_becs_debit: {bsb_number: '', account_number: ''},
+  billing_details: {name: 'Jenny Rosen', email: '[email protected]'},
+});
+
 stripe
   .createPaymentMethod({
     type: 'card',
@@ -412,6 +453,22 @@ stripe.createPaymentMethod({
 
 stripe.retrievePaymentIntent('{PAYMENT_INTENT_CLIENT_SECRET}');
 
+stripe.confirmAuBecsDebitSetup('', {
+  payment_method: {
+    au_becs_debit: auBankAccountElement,
+    billing_details: {name: '', email: ''},
+  },
+});
+
+stripe.confirmAuBecsDebitSetup('', {payment_method: ''});
+
+stripe.confirmAuBecsDebitSetup('', {
+  payment_method: {
+    au_becs_debit: {bsb_number: '', account_number: ''},
+    billing_details: {name: '', email: ''},
+  },
+});
+
 stripe.confirmCardSetup('', {
   payment_method: {card: cardElement, billing_details: {name: ''}},
 });
@@ -433,13 +490,6 @@ stripe.confirmSepaDebitSetup('', {
   },
 });
 
-stripe.confirmSepaDebitSetup('', {
-  payment_method: {
-    sepa_debit: ibanElement,
-    billing_details: {name: '', email: ''},
-  },
-});
-
 stripe.confirmSepaDebitSetup('', {payment_method: ''});
 
 stripe.confirmSepaDebitSetup('', {

types/api/PaymentMethods.d.ts

@@ -52,6 +52,23 @@ declare module '@stripe/stripe-js' {
   }
 
   namespace PaymentMethod {
+    interface AuBecsDebit {
+      /**
+       * Bank State Branch
+       */
+      bsb_number: string | null;
+
+      /**
+       * Uniquely identifies this particular bank account. You can use this attribute to check whether two bank accounts are the same.
+       */
+      fingerprint: string | null;
+
+      /**
+       * Last four characters of the account number.
+       */
+      last4: string | null;
+    }
+
     interface BillingDetails {
       /**
        * Billing address.
@@ -101,7 +118,7 @@ declare module '@stripe/stripe-js' {
       exp_year: number;
 
       /**
-       * Uniquely identifies this particular card number. You can use this attribute to check whether two customers who've signed up with you are using the same card number, for example.
+       * Uniquely identifies this particular card number. You can use this attribute to check whether two customers who've signed up with you are using the same card number.
        */
       fingerprint?: string | null;
 

types/stripe-js/elements.d.ts

@@ -6,9 +6,35 @@
 ///<reference path='./elements/ideal-bank.d.ts' />
 ///<reference path='./elements/fpx-bank.d.ts' />
 ///<reference path='./elements/payment-request-button.d.ts' />
+///<reference path='./elements/au-bank-account.d.ts' />
+
+import {StripeAuBankAccountElement} from '@stripe/stripe-js';
 
 declare module '@stripe/stripe-js' {
   interface StripeElements {
+    /////////////////////////////
+    /// auBankAccount
+    /////////////////////////////
+
+    /**
+     * Requires beta access:
+     * Contact [Stripe support](https://support.stripe.com/) for more information.
+     *
+     * Creates an `AuBankAccountElement`.
+     */
+    create(
+      elementType: 'auBankAccount',
+      options?: StripeAuBankAccountElementOptions
+    ): StripeAuBankAccountElement;
+
+    /**
+     * Requires beta access:
+     * Contact [Stripe support](https://support.stripe.com/) for more information.
+     *
+     * Looks up a previously created `Element` by its type.
+     */
+    getElement(elementType: 'auBankAccount'): StripeAuBankAccountElement | null;
+
     /////////////////////////////
     /// card
     /////////////////////////////
@@ -158,16 +184,18 @@ declare module '@stripe/stripe-js' {
     | 'fpxBank'
     | 'iban'
     | 'idealBank'
-    | 'paymentRequestButton';
+    | 'paymentRequestButton'
+    | 'auBankAccount';
 
   type StripeElement =
+    | StripeAuBankAccountElement
     | StripeCardElement
     | StripeCardNumberElement
     | StripeCardExpiryElement
     | StripeCardCvcElement
+    | StripeFpxBankElement
     | StripeIbanElement
     | StripeIdealBankElement
-    | StripeFpxBankElement
     | StripePaymentRequestButtonElement;
 
   /**

types/stripe-js/elements/au-bank-account.d.ts

@@ -0,0 +1,78 @@
+///<reference path='./base.d.ts' />
+
+declare module '@stripe/stripe-js' {
+  type StripeAuBankAccountElement = StripeElementBase & {
+    /**
+     * The change event is triggered when the `Element`'s value changes.
+     */
+    on(
+      eventType: 'change',
+      handler: (event: StripeAuBankAccountElementChangeEvent) => any
+    ): StripeAuBankAccountElement;
+
+    /**
+     * Triggered when the element is fully rendered and can accept `element.focus` calls.
+     */
+    on(eventType: 'ready', handler: () => any): StripeAuBankAccountElement;
+
+    /**
+     * Triggered when the element gains focus.
+     */
+    on(eventType: 'focus', handler: () => any): StripeAuBankAccountElement;
+
+    /**
+     * Triggered when the element loses focus.
+     */
+    on(eventType: 'blur', handler: () => any): StripeAuBankAccountElement;
+
+    /**
+     * Updates the options the `AuBankAccountElement` was initialized with.
+     * Updates are merged into the existing configuration.
+     *
+     * The styles of an `AuBankAccountElement` can be dynamically changed using `element.update`.
+     * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
+     */
+    update(options: Partial<StripeAuBankAccountElementOptions>): void;
+  };
+
+  interface StripeAuBankAccountElementOptions {
+    classes?: StripeElementClasses;
+
+    style?: StripeElementStyle;
+
+    /**
+     * Appearance of the icon in the Element.
+     */
+    iconStyle?: 'default' | 'solid';
+
+    /**
+     * Hides the icon in the Element.
+     * Default is `false`.
+     */
+    hideIcon?: boolean;
+
+    /**
+     * Applies a disabled state to the Element such that user input is not accepted.
+     * Default is false.
+     */
+    disabled?: boolean;
+  }
+
+  interface StripeAuBankAccountElementChangeEvent
+    extends StripeElementChangeEvent {
+    /**
+     * The type of element that emitted this event.
+     */
+    elementType: 'auBankAccount';
+
+    /**
+     * The bank name corresponding to the entered BSB.
+     */
+    bankName?: string;
+
+    /**
+     * The branch name corresponding to the entered BSB.
+     */
+    branchName?: string;
+  }
+}

types/stripe-js/index.d.ts

@@ -38,6 +38,26 @@ declare module '@stripe/stripe-js' {
     /// https://stripe.com/docs/js/payment_intents
     /////////////////////////////
 
+    /**
+     * Requires beta access:
+     * Contact [Stripe support](https://support.stripe.com/) for more information.
+     *
+     * Use `stripe.confirmAuBecsDebitPayment` in the [BECS Direct Debit Payments](https://stripe.com/docs/payments/payment-methods/au-becs-debit) with Payment Methods flow when the customer submits your payment form.
+     * When called, it will confirm the [PaymentIntent](https://stripe.com/docs/api/payment_intents) with `data` you provide.
+     * Note that there are some additional requirements to this flow that are not covered in this reference.
+     * Refer to our [integration guide](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-payment-intents) for more details.
+     *
+     * When you confirm a `PaymentIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
+     * In addition to confirming the `PaymentIntent`, this method can automatically create and attach a new PaymentMethod for you.
+     * If you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
+     *
+     * @docs https://stripe.com/docs/js/payment_intents/confirm_au_becs_debit_payment
+     */
+    confirmAuBecsDebitPayment(
+      clientSecret: string,
+      data?: ConfirmAuBecsDebitPaymentData
+    ): Promise<{paymentIntent?: PaymentIntent; error?: StripeError}>;
+
     /**
      * Use `stripe.confirmCardPayment` when the customer submits your payment form.
      * When called, it will confirm the [PaymentIntent](https://stripe.com/docs/api/payment_intents) with `data` you provide and carry out 3DS or other next actions if they are required.
@@ -149,13 +169,35 @@ declare module '@stripe/stripe-js' {
     /// https://stripe.com/docs/js/setup_intents
     /////////////////////////////
 
+    /**
+     * Requires beta access:
+     * Contact [Stripe support](https://support.stripe.com/) for more information.
+     *
+     * Use `stripe.confirmAuBecsDebitSetup` in the [BECS Direct Debit with Setup Intents](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-setup-intents) flow when the customer submits your payment form.
+     * When called, it will confirm the `SetupIntent` with `data` you provide.
+     * Note that there are some additional requirements to this flow that are not covered in this reference.
+     * Refer to our [integration guide](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-setup-intents) for more details.
+     *
+     * When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
+     * In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
+     * It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
+     *
+     * @docs https://stripe.com/docs/js/setup_intents/confirm_au_becs_debit_setup
+     */
+    confirmAuBecsDebitSetup(
+      clientSecret: string,
+      data?: ConfirmAuBecsDebitSetupData
+    ): Promise<{setupIntent?: SetupIntent; error?: StripeError}>;
+
     /**
      * Use `stripe.confirmCardSetup` in the [Setup Intents API flow](https://stripe.com/docs/payments/save-and-reuse) when the customer submits your payment form.
      * When called, it will confirm the [SetupIntent](https://stripe.com/docs/api/setup_intents) with `data` you provide and carry out 3DS or other next actions if they are required.
      *
      * When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
      * In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
      * It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
+     *
+     * @docs https://stripe.com/docs/js/setup_intents/confirm_card_setup
      */
     confirmCardSetup(
       clientSecret: string,
@@ -164,15 +206,16 @@ declare module '@stripe/stripe-js' {
     ): Promise<{setupIntent?: SetupIntent; error?: StripeError}>;
 
     /**
-     * Use `stripe.confirmSepaDebitSetup` in the [SEPA Direct Debit with Setup Intents](https://stripe.com/docs/payments/sepa-debit-setup-intents) flow when the customer submits your payment form.
+     * Use `stripe.confirmBecsDebitSetup` in the [SEPA Direct Debit with Setup Intents](https://stripe.com/docs/payments/sepa-debit-setup-intents) flow when the customer submits your payment form.
      * When called, it will confirm the `SetupIntent` with `data` you provide.
      * Note that there are some additional requirements to this flow that are not covered in this reference.
      * Refer to our [integration guide](https://stripe.com/docs/payments/sepa-debit-setup-intents) for more details.
      *
      * When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
      * In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
      * It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
-     * These use cases are detailed in the sections that follow.
+     *
+     * @docs https://stripe.com/docs/js/setup_intents/confirm_sepa_debit_setup
      */
     confirmSepaDebitSetup(
       clientSecret: string,