Collect Verified Bank Accounts

In this guide, we will set up PublicSquare Elements SDKs to capture instantly verified bank accounts in a frontend application, securely authorize them, and store the bank account data while avoiding PCI requirements.

Getting Started

To get started, you will need a PublicSquare Account.

Sign Up

Sign In

Get your Publishable Key

Next you will need your Publishable Key. Go to your Developers section and click Reveal for your Publishable Key and copy the value.

Save the Publishable Key as it will be used in the next steps of this guide.

Request Account Setting Access

First, you will need to request access to the payment-methods:bank-accounts:verification account setting type.

To do this, go to the merchant portal and click on the Request this feature button next to the Bank Account Verification setting. Alternatively, you can request access via the API.

This is required to enable instant bank account verification for your account.

Configuring PublicSquare Elements

PublicSquare Elements are available for the following technologies. Click below for detailed instructions on how to install and configure them.

Javascript

React

Adding Bank Account Verification Elements

PublicSquare has partnered with Flinks to provide a secure way to collect bank accounts. Once installed and configured, add the Bank Account Verification Elements to your application.

JavaScript

index.html

<div id="bank-account-verification-element">
  <button
    onclick={onConnectBankAccountWithVerification}
  >
    Connect Bank Account
  </button>
</div>

index.js

import { PublicSquare } from '@publicsquare/elements-js';

let publicsquare;
let result;

async function init() {
  publicsquare = await new PublicSquare().init('<PUBLISHABLE_API_KEY>');

  async function onConnectBankAccountWithVerification() {
    result = await publicsquare?.bankAccounts.openVerification(
      `#${'bank-account-verification-element'}`
    )
  }
}

await init();

React

App.jsx

import React, { useRef } from 'react';
import {
  PublicSquareProvider,
  BankAccountVerificationElement,
  usePublicSquare,
} from '@publicsquare/elements-react';

export default function App() {
  const { publicsquare } = usePublicSquare();
  // Refs to get access to the Elements instance
  const bankAccountVerificationElementRef = useRef(null);

  return (
    <PublicSquareProvider apiKey={apiKey}>
        <BankAccountVerificationElement
          id="bankAccountVerificationElement"
          ref={bankAccountVerificationElementRef}
          onVerificationComplete={(result) => {
            console.log('Bank account verification completed:', result.bank_account_verification_id);
          }}
        />
    </PublicSquareProvider>
  );
}

Storing Bank Accounts

Now that your customer has verified their bank account information, we need to create a bank account payment method from the results.

To do this, we will call the create bank account method from the SDK passing the bank_account_verification_id, returned from the bank account verification result.

Add a submit function along with a button to trigger it:

JavaScript

index.html

<div id="bank-account-verification-element">
  <button
    onclick={onConnectBankAccountWithVerification}
  >
    Connect Bank Account
  </button>
</div>

<button id="submit">Submit</button>

import { PublicSquare } from '@publicsquare/elements-js';

let publicsquare;
let result;

async function init () {
  publicsquare = await new PublicSquare().init('<PUBLISHABLE_API_KEY>');

  async function onConnectBankAccountWithVerification() {
    result = await publicsquare?.bankAccounts.openVerification(
      `#${'bank-account-verification-element'}`
    )
  }
  
  document.getElementById("submit").addEventListener("click", submit);
}

async function submit (e: FormEvent<HTMLFormElement>,) {
  try {
    const bankAccount = await publicsquare?.bankAccounts.create({
      bank_account_verification_id: result?.bank_account_verification_id
    });
    console.log(bankAccount); // e.g { id: 'ba_1234567890', ... }
  } catch (error) {
    console.error(error);
  }
}

await init();

React

import React, { useRef } from 'react';
import {
  PublicSquareProvider,
  BankAccountVerificationElement,
  usePublicSquare,
} from '@publicsquare/elements-react';

export default function App() {
  const { publicsquare } = usePublicSquare();
  // Refs to get access to the Elements instance
  const bankAccountVerificationElementRef = useRef(null);

  const submit = async () => {
    try {
      const bankAccount = await publicsquare.bankAccounts.create({
        bank_account_verification_id: bankAccountVerificationElementRef.current.bank_account_verification_id
      });
      console.log(bankAccount); // e.g { id: 'ba_1234567890', ... }
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <PublicSquareProvider apiKey={apiKey}>
      <BankAccountVerificationElement
        id="bankAccountVerificationElement"
        ref={bankAccountVerificationElementRef}
        onVerificationComplete={(result) => {
          console.log('Bank account verification completed:', result.bank_account_verification_id);
        }}
      />
      <button onClick={submit}>Submit</button>
    </PublicSquareProvider>
  );
}

The created bank account object contains the non-sensitive information about the bank account:

{
  "id": "ba_7Ay5mcUXAxwrN6wQEQUVEHBCJ",
  "account_id": "acc_B518niGwGYKzig6vtrRVZGGGV",
  "environment": "production",
  "customer_id": "cus_7Ay5mcUXAxwrN6wQEQUVEHBCJ",
  "billing_details": {
    "address_line_1": "111 Colorado Ave.",
    "address_line_2": "Apt 403",
    "city": "Des Moines",
    "state": "IA",
    "postal_code": "51111",
    "country": "US"
  },
  "created_at": "2024-06-30T01:02:29.212Z",
  "modified_at": "2024-06-30T01:02:29.212Z",
  "account_holder_name": "John Doe",
  "account_holder_type": "individual",
  "account_type": "checking",
  "routing_number": "110000000",
  "account_number_last4": "1011"
}

If PublicSquare has not yet received a response back from Flinks, we will return bank account verification result is still in progress. validation message.

You can safely store the bank account's id value in your database to link it with the appropriate payment or customer association.

You can optionally pass in a customer_id to associate with an existing Created Customer and billing_details to remove the requirement to pass them when Creating a Payment.

Conclusion

Following this guide, you have successfully verified a customer's bank account. To use this bank account, proceed with the Process ACH Payments guide.