Add currency selector element support (#539)

stripe · Nov 1, 2024 · 0d18a2e · 0d18a2e
1 parent c22ae09
commit 0d18a2e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^4.8.0",
+    "@stripe/stripe-js": "^4.9.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

diff --git a/src/components/createElementComponent.tsx b/src/components/createElementComponent.tsx
@@ -139,7 +139,7 @@ const createElementComponent = (
         'paymentRequest',
       ]);
 
-      if (updates) {
+      if (updates && 'update' in elementRef.current) {
         elementRef.current.update(updates);
       }
     }, [options, prevOptions]);

diff --git a/src/index.ts b/src/index.ts
@@ -19,6 +19,7 @@ import {
   AffirmMessageElementComponent,
   AfterpayClearpayMessageElementComponent,
   PaymentMethodMessagingElementComponent,
+  CurrencySelectorElementComponent,
 } from './types';
 import {isServer} from './utils/isServer';
 
@@ -130,6 +131,15 @@ export const ExpressCheckoutElement: ExpressCheckoutElementComponent = createEle
   isServer
 );
 
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ */
+export const CurrencySelectorElement: CurrencySelectorElementComponent = createElementComponent(
+  'currencySelector',
+  isServer
+);
+
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -475,6 +475,36 @@ export type PaymentRequestButtonElementComponent = FunctionComponent<
   PaymentRequestButtonElementProps
 >;
 
+export interface CurrencySelectorElementProps extends ElementProps {
+  /**
+   * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+   * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+   */
+  onReady?: (element: stripeJs.StripeCurrencySelectorElement) => any;
+
+  /**
+   * Triggered when the escape key is pressed within the Element.
+   */
+  onEscape?: () => any;
+
+  /**
+   * Triggered when the Element fails to load.
+   */
+  onLoadError?: (event: {
+    elementType: 'currencySelector';
+    error: StripeError;
+  }) => any;
+
+  /**
+   * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+   */
+  onLoaderStart?: (event: {elementType: 'currencySelector'}) => any;
+}
+
+export type CurrencySelectorElementComponent = FunctionComponent<
+  CurrencySelectorElementProps
+>;
+
 export interface AddressElementProps extends ElementProps {
   /**
    * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_address_element#address_element_create-options).

diff --git a/yarn.lock b/yarn.lock
@@ -2350,10 +2350,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@stripe/stripe-js@^4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.8.0.tgz#ba78f775347cb30e93e13aa408b345de15e3ff80"
-  integrity sha512-+4Cb0bVHlV4BJXxkJ3cCLSLuWxm3pXKtgcRacox146EuugjCzRRII5T5gUMgL4HpzrBLVwVxjKaZqntNWAXawQ==
+"@stripe/stripe-js@^4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.9.0.tgz#95dc000b2f90aeb4db2f2bab82a2fc574f26d1fd"
+  integrity sha512-tMPZQZZXGWyNX7hbgenq+1xEj2oigJ54XddbtSX36VedoKsPBq7dxwRXu4Xd5FdpT3JDyyDtnmvYkaSnH1yHTQ==
 
 "@testing-library/dom@^8.5.0":
   version "8.13.0"