Invalid parameter format for ACH tokenize

[mhelke]

Describe the bug

This package has worked well with my Square sandbox account. After I switched to the production environment, I am unable to make ACH payments.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-bsyrq3?file=src%2FApp.jsx

Steps to Reproduce the Bug or Issue

1. Click the ACH payment button.
2. Notice the error in the console.

Expected behavior

I expect the ACH payment button to open the payment modal when clicked. Instead what I'm seeing is the following error:

square.js:3  InvalidOptionError: option: 'Invalid parameter format for ACH tokenize'
    at square.js:3:222416
    at Generator.next (<anonymous>)
    at Lc (square.js:3:220506)
    at s (square.js:3:220710)
    at square.js:3:220771
    at new Promise (<anonymous>)
    at square.js:3:220650
    at kc.tokenize (square.js:3:224254)
    at Object.handlePayment (ach.tsx:64:1)
    at HTMLButtonElement.<anonymous> (use-event-listener.ts:31:1)
    at HTMLButtonElement.n (square.js:3:99306)
(anonymous) @ square.js:3
overrideMethod @ console.js:288
handlePayment @ ach.tsx:82
await in handlePayment
(anonymous) @ use-event-listener.ts:31
n @ square.js:3

Screenshots or Videos

Platform

• OS: Windows
• Browser: Chrome
• Version: 3.2.1

Additional context

The same code works fine when I replace the application ID and the locationId with the sandbox values.

[djfdev]

We are seeing this same error in both our production and development environments, any updates?

[dakotawalker]

It looks like the issue is happening in the tokenize method on ach.tsx:64 const result = await ach.tokenize({accountHolderName,});

 try {
      const result = await ach.tokenize({
        accountHolderName,
      });

      if (result.status === 'OK') {
        const tokenizedResult = await cardTokenizeResponseReceived(result);
        return tokenizedResult;
      }

      let message = `Tokenization failed with status: ${result.status}`;
      if (result?.errors) {
        message += ` and errors: ${JSON.stringify(result?.errors)}`;

        throw new Error(message);
      }

      console.warn(message);
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }

[abbyhowell]

From the square docs:

Square is required to capture authorization for any one-time or recurring ACH payments. This authorization must appear as part of the payment flow for an application. Buyers accept authorizations by interacting with a user interface element of the payment form, such as a “Pay” or “Submit” button. All existing applications that process one-time ACH payments must migrate to using the Web Payments SDK's ACH authorization flow by January 29, 2025.

To configure the ACH authorization flow, add two new parameters to ach.tokenize() before January 29, 2025 to continue processing ACH payments as documented in 2. Get the payment token from the ACH payment method
Learn how to take ACH bank transfer payments in a web client with the Web Payments SDK.
Guide
. Failure to complete this step will result in ACH payments being blocked.

The parameters to add include:

Intent - You must specify your intention to charge the buyer.
Total - You must specify the amount and currency for the charge.

example from the square docs:

try {
  await ach.tokenize({
    accountHolderName: 'John Smith',
    intent: 'CHARGE',
    total: {
      amount: 500,
      currencyCode: 'USD',
    }
  });
} catch (e) {
  console.error(e);
}

Seems like this previously-optional prop of the PaymentForm component of this library is now required:

export default MyApp() {
  return (
    <PaymentForm
      createVerificationDetails={() => ({
        // You can avoid amount and currency if the intent is `STORE`
        amount: '1.00',
        currencyCode: 'GBP',
        // `CHARGE` or `STORE`
        intent: 'CHARGE',
        billingContact: {
          addressLines: ['123 Main Street', 'Apartment 1'],
          familyName: 'Doe',
          givenName: 'John',
          email: 'jondoe@gmail.com',
          country: 'GB',
          phone: '3214563987',
          region: 'LND',
          city: 'London',
        },
      })}
    >
      {/* ... */}
    </PaymentForm>
  )
}

And this library should take the amount, currency code, and intent vals from this prop and pass them to ACH.tokenize

[ntheile]

@mhelke @kaid-resonite @maxbeatty has anyone got this working? i tried a few of forks out there and was able to get the new ACH screen to popup within Plaid (see below) that adds the "One time charge" intent info (i assume it will show recurring or store if you add that intent). The problem is, I never receive a callback with the token after clicking confirm. Any ideas?

[johnbona]

Hey @ntheile, I used @mhelke's branch and even though the library doesn't use it, you have to provide a non-empty string for redirectURI and transactionId. Successfully received a bank token through the cardTokenizeResponseReceived callback.