Merge pull request #114 from weareseeed/fix/Ach

seeed-jgomez · web-flow · commit 61ff22961b69 · 2025-03-27T08:54:00.000-05:00
ACH fix.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-square-web-payments-sdk",
-  "version": "3.2.3",
+  "version": "3.2.4-beta.1",
   "homepage": "https://weareseeed.github.io/react-square-web-payments-sdk/",
   "bugs": {
     "url": "https://github.com/weareseeed/react-square-web-payments-sdk/issues"
@@ -59,7 +59,7 @@
     "size:why": "size-limit --why"
   },
   "dependencies": {
-    "@square/web-sdk": "^2.0.1",
+    "@square/web-sdk": "^2.1.0",
     "@stitches/react": "^1.2.8"
   },
   "devDependencies": {
diff --git a/src/components/ach/ach.tsx b/src/components/ach/ach.tsx
@@ -7,7 +7,7 @@ import { useForm } from '~/contexts/form';
 import { useEventListener } from '~/hooks/use-event-listener';
 import { PayButton, SvgIcon } from './ach.styles';
 import { transformPlaidEventName } from './ach.utils';
-import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps, PlaidLinkOnEventMetadata } from './ach.types';
+import type { AchProps, } from './ach.types';
 
 /**
  * Renders a ACH button to use in the Square Web Payment SDK, pre-styled to meet
@@ -27,8 +27,6 @@ import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps, PlaidLink
  * }
  * ```
  */
-export function Ach(props: AchWithChildrenProps): React.ReactElement;
-export function Ach(props: AchWithoutChildrenProps): React.ReactElement;
 export function Ach({
   accountHolderName,
   redirectURI,
@@ -40,7 +38,7 @@ export function Ach({
 }: AchProps) {
   const [ach, setAch] = React.useState<Square.ACH | undefined>(() => undefined);
   const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
-  const { cardTokenizeResponseReceived, payments } = useForm();
+  const { cardTokenizeResponseReceived, createPaymentRequest, payments } = useForm();
   const buttonRef = React.useRef<HTMLButtonElement>(null);
 
   /**
@@ -54,26 +52,29 @@ export function Ach({
 
     if (!ach) {
       console.warn('ACH button was clicked, but no ACH instance was found.');
-
       return;
     }
 
+    if (!createPaymentRequest) throw new Error('`createPaymentRequest()` is required when using ACH payments');
+
     setIsSubmitting(true);
 
     try {
       const result = await ach.tokenize({
         accountHolderName,
+        intent: 'CHARGE',
+        amount: createPaymentRequest.total.amount,
+        currency: createPaymentRequest.currencyCode,
       });
 
-      if (result.status === 'OK') {
+      if (result?.status === 'OK') {
         const tokenizedResult = await cardTokenizeResponseReceived(result);
         return tokenizedResult;
       }
 
-      let message = `Tokenization failed with status: ${result.status}`;
+      let message = `Tokenization failed with status: ${result?.status ?? ''}`;
       if (result?.errors) {
         message += ` and errors: ${JSON.stringify(result?.errors)}`;
-
         throw new Error(message);
       }
 
@@ -96,17 +97,26 @@ export function Ach({
           transactionId,
         })
         .then((res) => {
-          if (signal?.aborted) {
-            return;
-          }
-
+          if (signal?.aborted) return;
           setAch(res);
-
           return res;
         });
 
       if (signal.aborted) {
+        ach?.removeEventListener('ontokenization' as Square.PlaidEventName, () => { })
         await ach?.destroy();
+      } else {
+        ach?.addEventListener(
+          'ontokenization' as Square.PlaidEventName,
+          async (result: Square.SqEvent<Square.TokenizationEvent>) => {
+            const { tokenResult, error } = result.detail;
+            if (error) {
+              // add code here to handle error
+            } else if (tokenResult?.status == 'OK') {
+              await cardTokenizeResponseReceived(tokenResult);
+            }
+          }
+        )
       }
     };
 
@@ -115,17 +125,18 @@ export function Ach({
     return () => {
       abortController.abort();
     };
-  }, [payments]);
+  }, [createPaymentRequest, payments]);
 
   if (callbacks) {
     for (const callback of Object.keys(callbacks)) {
       ach?.addEventListener(
         transformPlaidEventName(callback),
-        (callbacks as Record<string, (event: Square.SqEvent<PlaidLinkOnEventMetadata>) => void>)[callback]
+        (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
       );
     }
   }
 
+
   useEventListener({
     listener: handlePayment,
     type: 'click',
diff --git a/src/components/ach/ach.types.ts b/src/components/ach/ach.types.ts
@@ -75,7 +75,7 @@ export type SvgProps = React.ComponentPropsWithRef<'svg'> & {
   css?: Stitches.ComponentProps<typeof SvgIcon>['css'];
 };
 
-export interface AchBase extends Square.AchOptions, Square.AchTokenOptions {
+export interface AchBase extends Square.AchOptions, Square.AchOptions {
   callbacks?: {
     /** The user has completed the Assets and Bank Income Insights flow. */
     bankIncomeInsightsCompleted?(event: Square.SqEvent<PlaidLinkOnEventMetadata>): void;
@@ -189,4 +189,6 @@ export interface AchProps extends AchBase {
   buttonProps?: AchPayButtonProps;
   /** Props to be passed to the `<svg>` element. */
   svgProps?: SvgProps;
+  /** Props to be passed to the ach.tokenize method */
+  accountHolderName: string;
 }
diff --git a/src/components/ach/ach.utils.ts b/src/components/ach/ach.utils.ts
@@ -1,3 +1,5 @@
+import { PlaidEventName } from "@square/web-sdk";
+
 export function transformPlaidEventName(name: string) {
-  return name.replace(/([A-Z])/g, '_$1').toUpperCase();
+  return name.replace(/([A-Z])/g, '_$1').toUpperCase() as PlaidEventName;
 }
diff --git a/src/components/cash-app-pay/cash-app-pay.tsx b/src/components/cash-app-pay/cash-app-pay.tsx
@@ -91,7 +91,7 @@ function CashAppPay({
     for (const callback of Object.keys(callbacks)) {
       cashApp?.addEventListener(
         callback.toLowerCase() as 'ontokenization',
-        (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
+        (callbacks as Record<string, (event: Square.SqEvent<Square.CashAppPayEventData>) => void>)[callback]
       );
     }
   }
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
diff --git a/yarn.lock b/yarn.lock
@@ -620,21 +620,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@square/web-payments-sdk-types@npm:^1.1.1":
-  version: 1.33.0
-  resolution: "@square/web-payments-sdk-types@npm:1.33.0"
+"@square/web-payments-sdk-types@npm:^1.68.1":
+  version: 1.70.0
+  resolution: "@square/web-payments-sdk-types@npm:1.70.0"
   dependencies:
-    typescript: "npm:^4.1.0"
-  checksum: 10c0/55eb90ceffdd2837582db4759f4e5963fd761943c1e6a34153216c708e2903891c492d00c8c297224803b143703e1de35cc55edacdaca2efc83e341151eb9fc1
+    typescript: "npm:^4.9.5"
+  checksum: 10c0/5dbf975b968ece3660ebcd21b4882a94ace31880d41204d68e79819b1eee891b583bd1450254ba8d8c3f9f076835b609d625b44f3d948d793e487c6ae1b13178
   languageName: node
   linkType: hard
 
-"@square/web-sdk@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@square/web-sdk@npm:2.0.1"
+"@square/web-sdk@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@square/web-sdk@npm:2.1.0"
   dependencies:
-    "@square/web-payments-sdk-types": "npm:^1.1.1"
-  checksum: 10c0/8b1015de7ab23da1c84198d1dab7f3050dec239ce6f656fa7261015326733d3d4e0f840ee3a024e6839fd97c66def80f2ac3ce5e96c106cb7a039bbbe6b724ac
+    "@square/web-payments-sdk-types": "npm:^1.68.1"
+  checksum: 10c0/5b292f28f2f47e5228ef03b7f419c1627019cdc4ffa46407be085668f1514ebd64ed91ca56e481e38205b5ed4287c572112230e5402a52ecbd922c4d9158143e
   languageName: node
   linkType: hard
 
@@ -5294,7 +5294,7 @@ __metadata:
   dependencies:
     "@size-limit/preset-big-lib": "npm:^8.0.0"
     "@size-limit/webpack-why": "npm:^8.0.0"
-    "@square/web-sdk": "npm:^2.0.1"
+    "@square/web-sdk": "npm:^2.1.0"
     "@stitches/react": "npm:^1.2.8"
     "@testing-library/jest-dom": "npm:^5.16.4"
     "@testing-library/react": "npm:^13.3.0"
@@ -6303,7 +6303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.1.0, typescript@npm:^4.7.4":
+"typescript@npm:^4.7.4":
   version: 4.7.4
   resolution: "typescript@npm:4.7.4"
   bin:
@@ -6313,7 +6313,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^4.1.0#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^4.7.4#optional!builtin<compat/typescript>":
+"typescript@npm:^4.9.5":
+  version: 4.9.5
+  resolution: "typescript@npm:4.9.5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/5f6cad2e728a8a063521328e612d7876e12f0d8a8390d3b3aaa452a6a65e24e9ac8ea22beb72a924fd96ea0a49ea63bb4e251fb922b12eedfb7f7a26475e5c56
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^4.7.4#optional!builtin<compat/typescript>":
   version: 4.7.4
   resolution: "typescript@patch:typescript@npm%3A4.7.4#optional!builtin<compat/typescript>::version=4.7.4&hash=65a307"
   bin:
@@ -6323,6 +6333,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^4.9.5#optional!builtin<compat/typescript>":
+  version: 4.9.5
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>::version=4.9.5&hash=289587"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/e3333f887c6829dfe0ab6c1dbe0dd1e3e2aeb56c66460cb85c5440c566f900c833d370ca34eb47558c0c69e78ced4bfe09b8f4f98b6de7afed9b84b8d1dd06a1
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { PlaidEventName } from "@square/web-sdk";`
	`2`	`+`
`1`	`3`	`export function transformPlaidEventName(name: string) {`
`2`		`- return name.replace(/([A-Z])/g, '_$1').toUpperCase();`
	`4`	`+ return name.replace(/([A-Z])/g, '_$1').toUpperCase() as PlaidEventName;`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ function CashAppPay({`
`91`	`91`	`for (const callback of Object.keys(callbacks)) {`
`92`	`92`	`cashApp?.addEventListener(`
`93`	`93`	`callback.toLowerCase() as 'ontokenization',`
`94`		`- (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]`
	`94`	`+ (callbacks as Record<string, (event: Square.SqEvent<Square.CashAppPayEventData>) => void>)[callback]`
`95`	`95`	`);`
`96`	`96`	`}`
`97`	`97`	`}`