Add setters for fetch ephemeral key function (#59)

* feat: add new function * fix: set type * fix: lint * style: ordering
stripe · Dec 8, 2023 · 8ee2caf · 8ee2caf
1 parent efce81b
commit 8ee2caf
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@babel/preset-flow": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@rollup/plugin-replace": "^2.3.1",
-    "@stripe/connect-js": "3.1.0-beta.1",
+    "@stripe/connect-js": "3.2.2-beta-1",
     "@types/jest": "^24.0.25",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
@@ -83,7 +83,7 @@
     "zx": "^4.2.0"
   },
   "peerDependencies": {
-    "@stripe/connect-js": ">=3.1.0-beta.1",
+    "@stripe/connect-js": ">=3.2.2-beta-1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   }

diff --git a/src/Components.tsx b/src/Components.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {useCreateComponent} from './useCreateComponent';
 import {useAttachAttribute} from './utils/useAttachAttribute';
 import {useUpdateWithSetter} from './utils/useUpdateWithSetter';
+import {FetchEphemeralKeyFunction} from './types';
 
 export const ConnectPayments = (): JSX.Element => {
   const {wrapper} = useCreateComponent('payments');
@@ -95,10 +96,12 @@ export const ConnectIssuingCard = ({
   defaultCard,
   cardArtFileLink,
   cardSwitching,
+  fetchEphemeralKey,
 }: {
   defaultCard?: string;
   cardArtFileLink?: string;
   cardSwitching?: boolean;
+  fetchEphemeralKey?: FetchEphemeralKeyFunction;
 }): JSX.Element => {
   const {wrapper, component: issuingCard} = useCreateComponent('issuing-card');
 
@@ -111,6 +114,9 @@ export const ConnectIssuingCard = ({
   useUpdateWithSetter(issuingCard, cardSwitching, (comp, val) =>
     comp.setCardSwitching(val)
   );
+  useUpdateWithSetter(issuingCard, fetchEphemeralKey, (comp, val) =>
+    comp.setFetchEphemeralKey(val)
+  );
 
   return wrapper;
 };

diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1,8 @@
+export type FetchEphemeralKeyFunction = (fetchParams: {
+  issuingCard: string;
+  nonce: string;
+}) => Promise<{
+  issuingCard: string;
+  nonce: string;
+  ephemeralKeySecret: string;
+}>;
diff --git a/src/utils/useUpdateWithSetter.ts b/src/utils/useUpdateWithSetter.ts
@@ -1,8 +1,14 @@
 import React from 'react';
+import {FetchEphemeralKeyFunction} from '../types';
 
 export const useUpdateWithSetter = <
   T extends HTMLElement,
-  V extends string | boolean | (() => void) | undefined
+  V extends
+    | string
+    | boolean
+    | (() => void)
+    | FetchEphemeralKeyFunction
+    | undefined
 >(
   component: T | null,
   value: V,

diff --git a/yarn.lock b/yarn.lock
@@ -1430,10 +1430,10 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@stripe/connect-js@3.1.0-beta.1":
-  version "3.1.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.1.0-beta.1.tgz#1a25bad08d0939e2083615996eecdd18da35fc60"
-  integrity sha512-zJnJdG1O/PTv0k70a2o53WRtNxbW2/mh+/uOGm7zY6Oy5AJ1+521Ud1cgNZsxn///uUDSkHyVHGnH/tENpV75g==
+"@stripe/connect-js@3.2.2-beta-1":
+  version "3.2.2-beta-1"
+  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.2.2-beta-1.tgz#40b1998910071d0787b03846bfe7016df0f4ff98"
+  integrity sha512-yWhBszahubsEahHJcz6k5d2A+7ta11cIcEzCwCcX7qKvPswCSWZX1HVJ4vT+oHWBFuS3gYqkSGJdQe57DTBTkg==
   dependencies:
     "@rollup/plugin-json" "^6.0.0"