Merge pull request #7 from stripe/fpx

Add FPX types

tests/types/index.ts

@@ -28,6 +28,8 @@ import {
   CustomFontSource,
   StripeIbanElement,
   StripeIdealBankElement,
+  StripeFpxBankElement,
+  StripeFpxBankElementChangeEvent,
   StripePaymentRequestButtonElement,
   StripeElementType,
 } from '@stripe/stripe-js';
@@ -111,6 +113,17 @@ const retrievedCardCvcElement: StripeCardCvcElement | null = elements.getElement
   'cardCvc'
 );
 
+const fpxBankElement = elements.create('fpxBank', {
+  style: MY_STYLE,
+  value: '',
+  accountHolderType: 'individual',
+  classes: {webkitAutoFill: ''},
+});
+
+const retrievedFpxBankElement: StripeFpxBankElement | null = elements.getElement(
+  'fpxBank'
+);
+
 const ibanElement = elements.create('iban', {supportedCountries: ['']});
 
 const retrievedIbanElement: StripeIbanElement | null = elements.getElement(
@@ -164,6 +177,7 @@ assert<
 
 const cardElementType: StripeElementType = 'card';
 const ibanElementType: StripeElementType = 'iban';
+const fpxElementType: StripeElementType = 'fpxBank';
 
 cardElement.mount('#bogus-container');
 ibanElement.mount('#bogus-container');
@@ -178,6 +192,12 @@ cardElement
     }
   });
 
+fpxBankElement.on('change', (e: StripeFpxBankElementChangeEvent) => {
+  if (e.error) {
+    console.error(e.error.message);
+  }
+});
+
 paymentRequestButtonElement.on(
   'click',
   (e: StripePaymentRequestButtonElementClickEvent) => {
@@ -189,6 +209,7 @@ cardElement.destroy();
 cardNumberElement.destroy();
 cardCvcElement.destroy();
 cardExpiryElement.destroy();
+fpxBankElement.destroy();
 ibanElement.destroy();
 idealBankElement.destroy();
 paymentRequestButtonElement.destroy();
@@ -292,6 +313,19 @@ stripe.confirmCardPayment('');
 
 stripe.confirmCardPayment('');
 
+stripe.confirmFpxPayment('', {
+  payment_method: {fpx: fpxBankElement},
+  return_url: window.location.href,
+});
+
+stripe.confirmFpxPayment('', {payment_method: ''});
+
+stripe.confirmFpxPayment('', {payment_method: ''}, {handleActions: false});
+
+stripe.confirmFpxPayment('', {payment_method: {fpx: {bank: ''}}});
+
+stripe.confirmFpxPayment('');
+
 stripe.confirmIdealPayment('', {
   payment_method: {ideal: idealBankElement},
   return_url: window.location.href,
@@ -339,6 +373,16 @@ stripe
     }
   });
 
+stripe.createPaymentMethod({
+  type: 'fpx',
+  fpx: fpxBankElement,
+});
+
+stripe.createPaymentMethod({
+  type: 'fpx',
+  fpx: {bank: ''},
+});
+
 stripe.createPaymentMethod({
   type: 'ideal',
   ideal: idealBankElement,

types/api/PaymentMethods.d.ts

@@ -29,6 +29,8 @@ declare module '@stripe/stripe-js' {
      */
     customer: string | null;
 
+    fpx?: PaymentMethod.Fpx;
+
     ideal?: PaymentMethod.Ideal;
 
     /**
@@ -152,6 +154,13 @@ declare module '@stripe/stripe-js' {
 
     interface CardPresent {}
 
+    interface Fpx {
+      /**
+       * The customer's bank.
+       */
+      bank: string;
+    }
+
     interface Ideal {
       /**
        * The customer's bank, if provided.

types/stripe-js/elements.d.ts

@@ -4,6 +4,7 @@
 ///<reference path='./elements/card-cvc.d.ts' />
 ///<reference path='./elements/iban.d.ts' />
 ///<reference path='./elements/ideal-bank.d.ts' />
+///<reference path='./elements/fpx-bank.d.ts' />
 ///<reference path='./elements/payment-request-button.d.ts' />
 
 declare module '@stripe/stripe-js' {
@@ -76,6 +77,23 @@ declare module '@stripe/stripe-js' {
      */
     getElement(elementType: 'cardCvc'): StripeCardCvcElement | null;
 
+    /////////////////////////////
+    /// fpxBank
+    /////////////////////////////
+
+    /**
+     * Creates an `FpxBankElement`.
+     */
+    create(
+      elementType: 'fpxBank',
+      options: StripeFpxBankElementOptions
+    ): StripeFpxBankElement;
+
+    /**
+     * Looks up a previously created `Element` by its type.
+     */
+    getElement(elementType: 'fpxBank'): StripeFpxBankElement | null;
+
     /////////////////////////////
     /// iban
     /////////////////////////////
@@ -137,6 +155,7 @@ declare module '@stripe/stripe-js' {
     | 'cardNumber'
     | 'cardExpiry'
     | 'cardCvc'
+    | 'fpxBank'
     | 'iban'
     | 'idealBank'
     | 'paymentRequestButton';
@@ -148,6 +167,7 @@ declare module '@stripe/stripe-js' {
     | StripeCardCvcElement
     | StripeIbanElement
     | StripeIdealBankElement
+    | StripeFpxBankElement
     | StripePaymentRequestButtonElement;
 
   /**

types/stripe-js/elements/card-cvc.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeCardCvcElementChangeEvent) => any
-    ): void;
+    ): StripeCardCvcElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `CardCvcElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `CardCvcElement` 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.
      */

types/stripe-js/elements/card-expiry.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeCardExpiryElementChangeEvent) => any
-    ): void;
+    ): StripeCardExpiryElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `CardExpiryElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `CardExpiryElement` 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.
      */

types/stripe-js/elements/card-number.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeCardNumberElementChangeEvent) => any
-    ): void;
+    ): StripeCardNumberElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `CardNumberElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `Element` 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.
      */

types/stripe-js/elements/card.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeCardElementChangeEvent) => any
-    ): void;
+    ): StripeCardElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `CardElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `CardElement` 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.
      */

types/stripe-js/elements/fpx-bank.d.ts

@@ -0,0 +1,73 @@
+///<reference path='./base.d.ts' />
+
+declare module '@stripe/stripe-js' {
+  type StripeFpxBankElement = StripeElementBase & {
+    /**
+     * The change event is triggered when the `Element`'s value changes.
+     */
+    on(
+      eventType: 'change',
+      handler: (event: StripeFpxBankElementChangeEvent) => any
+    ): StripeFpxBankElement;
+
+    /**
+     * Triggered when the element is fully rendered and can accept `element.focus` calls.
+     */
+    on(eventType: 'ready', handler: () => any): StripeFpxBankElement;
+
+    /**
+     * Triggered when the element gains focus.
+     */
+    on(eventType: 'focus', handler: () => any): StripeFpxBankElement;
+
+    /**
+     * Triggered when the element loses focus.
+     */
+    on(eventType: 'blur', handler: () => any): StripeFpxBankElement;
+
+    /**
+     * Updates the options the `FpxBankElement` was initialized with.
+     * Updates are merged into the existing configuration.
+     *
+     * The styles of an `FpxBankElement` 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<StripeFpxBankElementOptions>): void;
+  };
+
+  interface StripeFpxBankElementOptions {
+    classes?: StripeElementClasses;
+
+    style?: StripeElementStyle;
+
+    /**
+     * A pre-filled value for the Element.
+     * Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference) (e.g., `affin_bank`).
+     */
+    value?: string;
+
+    /**
+     * The type of the FPX accountholder.
+     */
+    accountHolderType: 'individual' | 'company';
+
+    /**
+     * Applies a disabled state to the Element such that user input is not accepted.
+     * Default is false.
+     */
+    disabled?: boolean;
+  }
+
+  interface StripeFpxBankElementChangeEvent extends StripeElementChangeEvent {
+    /**
+     * The type of element that emitted this event.
+     */
+    elementType: 'fpxBank';
+
+    /**
+     * The selected bank.
+     * Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference).
+     */
+    value: string;
+  }
+}

types/stripe-js/elements/iban.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeIbanElementChangeEvent) => any
-    ): void;
+    ): StripeIbanElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `IbanElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `IbanElement` 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.
      */

types/stripe-js/elements/ideal-bank.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'change',
       handler: (event: StripeIdealBankElementChangeEvent) => any
-    ): void;
+    ): StripeIdealBankElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -29,8 +29,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `IdealBankElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `IdealBankElement` 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.
      */

types/stripe-js/elements/payment-request-button.d.ts

@@ -8,7 +8,7 @@ declare module '@stripe/stripe-js' {
     on(
       eventType: 'click',
       handler: (event: StripePaymentRequestButtonElementClickEvent) => any
-    ): void;
+    ): StripePaymentRequestButtonElement;
 
     /**
      * Triggered when the element is fully rendered and can accept `element.focus` calls.
@@ -38,8 +38,6 @@ declare module '@stripe/stripe-js' {
      * Updates the options the `PaymentRequestButtonElement` was initialized with.
      * Updates are merged into the existing configuration.
      *
-     * If you collect certain information in a different part of your interface (e.g., ZIP or postal code), use `element.update` with the appropriate information.
-     *
      * The styles of an `PaymentRequestButtonElement` 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.
      */

types/stripe-js/index.d.ts

@@ -56,6 +56,23 @@ declare module '@stripe/stripe-js' {
       options?: ConfirmCardPaymentOptions
     ): Promise<{paymentIntent?: PaymentIntent; error?: StripeError}>;
 
+    /**
+     * Use `stripe.confirmFpxPayment` in the [FPX Payments with Payment Methods](https://stripe.com/docs/payments/fpx#web) flow when the customer submits your payment form.
+     * When called, it will confirm the `PaymentIntent` with `data` you provide, and it will automatically redirect the customer to the authorize the transaction.
+     * Once authorization is complete, the customer will be redirected back to your specified `return_url`.
+     *
+     * 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_fpx_payment
+     */
+    confirmFpxPayment(
+      clientSecret: string,
+      data?: ConfirmFpxPaymentData,
+      options?: ConfirmFpxPaymentOptions
+    ): Promise<{paymentIntent?: PaymentIntent; error?: StripeError}>;
+
     /**
      * Use `stripe.confirmIdealPayment` in the [iDEAL Payments with Payment Methods](https://stripe.com/docs/payments/ideal) flow when the customer submits your payment form.
      * When called, it will confirm the `PaymentIntent` with `data` you provide, and it will automatically redirect the customer to the authorize the transaction.