Collect Bank Accounts

In this guide, we will set up PublicSquare Elements SDKs to capture bank accounts in a frontend application and securely authorize 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.

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 Elements

Once installed and configured, add the Bank Account Elements to your application.

JavaScript

<form>
  <input type="text" id="accountHolderName" placeholder="Account holder name" />
  <div id="bankAccount" style="width: 100%;"></div>
</form>

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

let publicsquare;
let bankAccountElement;

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

  // Creates an Bank Account instance that includes the routing number and account number
  bankAccountElement = publicsquare.createBankAccountElement();
  bankAccountElement.mount('#bankAccount');
}

init();

React

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

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

  // See below for handleSubmit function

  return (
    <PublicSquareProvider apiKey={apiKey}>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="accountHolderName"
          placeholder="Account holder name"
        />

        <BankAccountElement
          id="bankAccount"
          ref={bankAccountRef}
        />
      </form>
    </PublicSquareProvider>
  );
}

Storing Bank Accounts

Now that you are capturing bank account data in your web application, it is time to store the bank account in your account.

To do this, we will call the create bank account method from the SDK, passing the Bank Account Elements as data points in the payload.

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

JavaScript

async function submit (e: FormEvent<HTMLFormElement>,) {
  try {
    const formData = new FormData(e.currentTarget)
    const account_holder_name = formData.get('accountHolderName');
    const routing_number = bankAccountElement.routingNumber.el.value
    const account_number = bankAccountElement.accountNumber.el.value
    const bankAccount = await publicsquare.bankAccounts.create({
      account_holder_name,
      routing_number,
      account_number,
    });
    console.log(bankAccount); // e.g { id: 'ba_1234567890', ... }
  } catch (error) {
    console.error(error);
  }
}

React

async function handleSubmit(e) {
  e.preventDefault();
  const account_holder_name = e.target.accountHolderName.value;
  const routing_number = bankeAccountRef.current.routingNumber.el.value
  const account_number = bankeAccountRef.current.accountNumber.el.value
  const bankAccount = await publicsquare.bankAccounts.create({
    account_holder_name,
    routing_number,
    account_number,
  });
  console.log(bankAccount); // e.g { id: 'ba_1234567890', ... }
}

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"
}

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 collected a customer's bank account. To use this bank account, proceed with the Process ACH Payments guide.