Add bindings for CurrencySelectorElement (#669)

Co-authored-by: Polo Li <65737086+pololi-stripe@users.noreply.github.com>

tests/types/src/invalid.ts

@@ -6,6 +6,7 @@ import {
   StripePaymentElement,
   StripeExpressCheckoutElement,
   StripeElementsOptions,
+  StripeCurrencySelectorElement,
 } from '../../../types';
 import {ApplePayUpdateOption} from '../../../types/stripe-js/elements/apple-pay';
 
@@ -15,6 +16,7 @@ declare const cardNumberElement: StripeCardNumberElement;
 declare const ibanElement: StripeIbanElement;
 declare const paymentElement: StripePaymentElement;
 declare const expressCheckoutElement: StripeExpressCheckoutElement;
+declare const currencySelectorElement: StripeCurrencySelectorElement;
 
 const options: StripeElementsOptions = {
   clientSecret: '',
@@ -224,6 +226,13 @@ expressCheckoutElement.on('click', ({resolve}) => {
   });
 });
 
+// @ts-expect-error: CurrencySelector cannot be created from Elements
+elements.create('currencySelector');
+// @ts-expect-error: CurrencySelector cannot be retrieved from Elements
+elements.getElement('currencySelector');
+// @ts-expect-error: CurrencySelector cannot be updated
+currencySelectorElement.update({});
+
 // @ts-expect-error: AddressElement requires a mode
 elements.create('address');
 

tests/types/src/valid.ts

@@ -54,6 +54,7 @@ import {
   StripeElementsOptions,
   CardBrand,
   CardFunding,
+  StripeCurrencySelectorElement,
 } from '../../../types';
 
 const stripePromise: Promise<Stripe | null> = loadStripe('');
@@ -1137,11 +1138,28 @@ expressCheckoutElement.on(
 
 const retrievedExpressCheckoutElement = elements.getElement('expressCheckout');
 
+declare const currencySelectorElement: StripeCurrencySelectorElement;
+
+currencySelectorElement
+  .on('ready', (e: {elementType: 'currencySelector'}) => {})
+  .on('focus', (e: {elementType: 'currencySelector'}) => {})
+  .on('blur', (e: {elementType: 'currencySelector'}) => {})
+  .on(
+    'loaderror',
+    (e: {
+      elementType: 'currencySelector';
+      error: {
+        type: string;
+      };
+    }) => {}
+  );
+
 auBankAccountElement.destroy();
 cardElement.destroy();
 cardNumberElement.destroy();
 cardCvcElement.destroy();
 cardExpiryElement.destroy();
+currencySelectorElement.destroy();
 fpxBankElement.destroy();
 ibanElement.destroy();
 idealBankElement.destroy();

types/api/confirmation-tokens.d.ts

@@ -84,9 +84,6 @@ export interface ConfirmationTokenCreateParams {
     billing_details?: PaymentMethodCreateParams.BillingDetails;
 
     /**
-     * Requires beta access:
-     * Contact [Stripe support](https://support.stripe.com/) for more information.
-     *
      * Specifies if the PaymentMethod should be redisplayed when using the Saved Payment Method feature
      */
     allow_redisplay?: 'always' | 'limited' | 'unspecified';

types/stripe-js/custom-checkout.d.ts

@@ -12,6 +12,7 @@ import {
 import {Appearance, CssFontSource, CustomFontSource} from './elements-group';
 import {StripeError} from './stripe';
 import {
+  StripeCurrencySelectorElement,
   FieldsOption,
   StripeElementBase,
   StripeExpressCheckoutElement,
@@ -204,13 +205,20 @@ export type StripeCustomCheckoutTrial = {
   trialPeriodDays: number;
 };
 
+export type StripeCustomCheckoutCurrencyOption = {
+  unitAmount: number;
+  currency: string;
+  currencyConversion?: {fxRate: number; sourceCurrency: string};
+};
+
 /* Custom Checkout session */
 export interface StripeCustomCheckoutSession {
   billingAddress: StripeCustomCheckoutContact | null;
   businessName: string | null;
   canConfirm: boolean;
   confirmationRequirements: StripeCustomCheckoutConfirmationRequirement[];
   currency: string;
+  currencyOptions: Array<StripeCustomCheckoutCurrencyOption> | null;
   discountAmounts: Array<StripeCustomCheckoutDiscountAmount> | null;
   email: string | null;
   id: string;
@@ -427,6 +435,10 @@ export interface StripeCustomCheckout {
   getElement(
     elementType: 'expressCheckout'
   ): StripeCustomCheckoutExpressCheckoutElement | null;
+  /* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
+  getElement(
+    elementType: 'currencySelector'
+  ): StripeCurrencySelectorElement | null;
   createElement(
     elementType: 'payment',
     options?: StripeCustomCheckoutPaymentElementOptions
@@ -439,4 +451,6 @@ export interface StripeCustomCheckout {
     elementType: 'expressCheckout',
     options: StripeCustomCheckoutExpressCheckoutElementOptions
   ): StripeCustomCheckoutExpressCheckoutElement;
+  /* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
+  createElement(elementType: 'currencySelector'): StripeCurrencySelectorElement;
 }

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

@@ -1,6 +1,7 @@
 import {
   StripeAddressElement,
   StripeAddressElementOptions,
+  StripeCurrencySelectorElement,
   StripeShippingAddressElement,
   StripeShippingAddressElementOptions,
   StripePaymentRequestButtonElement,
@@ -332,9 +333,6 @@ export interface StripeElements {
   /////////////////////////////
 
   /**
-   * Requires beta access:
-   * Contact [Stripe support](https://support.stripe.com/) for more information.
-   *
    * Creates a `LinkAuthenticationElement`.
    */
   create(
@@ -343,9 +341,6 @@ export interface StripeElements {
   ): StripeLinkAuthenticationElement;
 
   /**
-   * Requires beta access:
-   * Contact [Stripe support](https://support.stripe.com/) for more information.
-   *
    * Looks up a previously created `Element` by its type.
    */
   getElement(
@@ -500,6 +495,7 @@ export type StripeElementType =
   | 'cardNumber'
   | 'cardExpiry'
   | 'cardCvc'
+  | 'currencySelector'
   | 'epsBank'
   | 'expressCheckout'
   | 'fpxBank'
@@ -531,6 +527,7 @@ export type StripeElement =
   | StripeIbanElement
   | StripeIdealBankElement
   | StripeP24BankElement
+  | StripeCurrencySelectorElement
   | StripeExpressCheckoutElement
   | StripePaymentElement
   | StripePaymentMethodMessagingElement

types/stripe-js/elements/currency-selector.d.ts

@@ -0,0 +1,93 @@
+import {StripeElementBase} from './base';
+import {StripeError} from '../stripe';
+
+export type StripeCurrencySelectorElement = StripeElementBase & {
+  /**
+   * Triggered when the element is fully rendered and can accept `element.focus` calls.
+   */
+  on(
+    eventType: 'ready',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  once(
+    eventType: 'ready',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  off(
+    eventType: 'ready',
+    handler?: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+
+  /**
+   * Triggered when the element gains focus.
+   */
+  on(
+    eventType: 'focus',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  once(
+    eventType: 'focus',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  off(
+    eventType: 'focus',
+    handler?: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+
+  /**
+   * Triggered when the element loses focus.
+   */
+  on(
+    eventType: 'blur',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  once(
+    eventType: 'blur',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  off(
+    eventType: 'blur',
+    handler?: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+
+  /**
+   * Triggered when the escape key is pressed within the element.
+   */
+  on(
+    eventType: 'escape',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  once(
+    eventType: 'escape',
+    handler: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+  off(
+    eventType: 'escape',
+    handler?: (event: {elementType: 'currencySelector'}) => any
+  ): StripeCurrencySelectorElement;
+
+  /**
+   * Triggered when the element fails to load.
+   */
+  on(
+    eventType: 'loaderror',
+    handler: (event: {
+      elementType: 'currencySelector';
+      error: StripeError;
+    }) => any
+  ): StripeCurrencySelectorElement;
+  once(
+    eventType: 'loaderror',
+    handler: (event: {
+      elementType: 'currencySelector';
+      error: StripeError;
+    }) => any
+  ): StripeCurrencySelectorElement;
+  off(
+    eventType: 'loaderror',
+    handler?: (event: {
+      elementType: 'currencySelector';
+      error: StripeError;
+    }) => any
+  ): StripeCurrencySelectorElement;
+};

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

@@ -8,6 +8,7 @@ export * from './card-cvc';
 export * from './card-expiry';
 export * from './card-number';
 export * from './card';
+export * from './currency-selector';
 export * from './eps-bank';
 export * from './express-checkout';
 export * from './fpx-bank';

types/stripe-js/payment-intents.d.ts

@@ -1539,9 +1539,6 @@ export interface ConfirmPaymentData extends PaymentIntentConfirmParams {
     billing_details?: PaymentMethodCreateParams.BillingDetails;
 
     /**
-     * Requires beta access:
-     * Contact [Stripe support](https://support.stripe.com/) for more information.
-     *
      * Specifies if the PaymentMethod should be redisplayed when using the Saved Payment Method feature
      */
     allow_redisplay?: 'always' | 'limited' | 'unspecified';

types/stripe-js/setup-intents.d.ts

@@ -42,9 +42,6 @@ export interface ConfirmSetupData extends SetupIntentConfirmParams {
     billing_details?: PaymentMethodCreateParams.BillingDetails;
 
     /**
-     * Requires beta access:
-     * Contact [Stripe support](https://support.stripe.com/) for more information.
-     *
      * Specifies if the PaymentMethod should be redisplayed when using the Saved Payment Method feature
      */
     allow_redisplay?: 'always' | 'limited' | 'unspecified';