ACH Direct Debit Iframe – Setting it up

This guide explains how to integrate the ACH Direct Debit payment form using the SoftPoint iframe integration.

The iframe loads the ACH bank account form and allows the user to securely add a bank account. The integration retrieves an access token for a location, loads the iframe script, initializes the payment form, and submits the ACH account information.

HTML Container

The ACH form is rendered inside a container element in the page. The iframe script will inject the payment form into the container with the id iframeContent.

<div id="containerIframe" class="d-flex justify-content-center align-items-center p-4">

  <div style="width: 468px;">

    <span>Payment Method</span>

    <div class="card">

      <div class="accordion" id="accordionExample">

        <div class="card">

          <div class="card-header p-0">

            <h2 class="mb-0">

              <button style="width: 100%" class="btn btn-light btn-block text-left p-3 rounded-0"
                      data-toggle="collapse"
                      data-target="#collapseOne"
                      aria-expanded="true"
                      aria-controls="collapseOne">

                <div class="d-flex align-items-center justify-content-between">

                  <span>ACH Direct Debit</span>

                </div>

              </button>

            </h2>

          </div>

          <div id="collapseOne" class="collapse show">

            <form>

              <div id="iframeContent"></div>

              <div style="padding:1rem">

                <button type="submit" class="btn btn-block free-button">
                  Add Bank Account
                </button>

              </div>

              <p id="response"></p>

            </form>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

Generate Access Token

Before loading the iframe, an access token must be generated using the location endpoint.

async function fetchAccessToken() {

  const url = 'https://devapi-gtw.tabpoint.us/api/locations/' + locationId + '/access_token';

  const api_key = "API_KEY";

  const params = {
    api_key,
    client: 'CLIENT'
  };

  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  };

  const res = fetch(url, requestOptions)
    .then(response => response.json())
    .then(data => {
      const accessToken = data.accessToken;
      return accessToken;
    })
    .catch(error => console.error('Error:', error));

  return res;
}

The returned accessToken will be used to initialize the iframe.

Load the Iframe Script

After retrieving the access token, the SoftPoint iframe script can be loaded.

const scriptElement = document.createElement("script");

scriptElement.src =
`https://iframe-gtw.tabpoint.us/api/softpoint-pay?location_id=${locationId}&session_key=${encodeURIComponent(accessToken)}`;

document.head.appendChild(scriptElement);

Once the script is loaded, the payment form can be initialized.

Initialize Payment Form

The iframe form is initialized using initPaymentForm.

const conf = {
  "location_id": locationId,
  "access_token": accessToken,
  "store-card": 1,
  "country_iso": "US",
  "currency_iso": "USD",
  "process_type": "authorize",
  "payment_methods": ["bank_account"],
  "user_id": "5497",
  "account-type": 1,
  "account-classification": 1
}

initPaymentForm('iframeContent', conf);

Parameters

Parameter	Type	Description
location_id	integer	Identifier of the location used for the transaction
access_token	string	Access token generated for the location
store-card	integer	Indicates whether the payment method should be stored
country_iso	string	ISO country code
currency_iso	string	ISO currency code
process_type	string	Processing type used for the payment form
payment_methods	array	Payment methods enabled in the iframe
user_id	string	Identifier associated with the user
account-type	integer	Defines the type of bank account
account-classification	integer	Defines the classification of the bank account

Submit ACH Account

When the form is submitted, the ACH account is created using addACHDirectDebitAccount.

const paymentDetails = {

  "session_id": sessionID,
  "location_id": locationId,
  "access_token": accessToken,
  "customer_first_name": "Eduardo",
  "customer_last_name": "Perez Lopez",
  "user_id": "5497",
  "country_iso": "US"

}

addACHDirectDebitAccount(paymentDetails);

Callbacks

onApprovedCallback

function onApprovedCallback(e) {

  console.log('onApprovedCallback called', e);

  const response = document.querySelector('#response');

  response.innerHTML = JSON.stringify(e);

  response.style.color = 'green';

}

onDeclinedCallback

function onDeclinedCallback(e) {

  console.log('onDeclinedCallback called', e);

  const response = document.querySelector('#response');

  response.innerHTML = JSON.stringify(e);

  response.style.color = 'red';

}

onErrorCallback

function onErrorCallback(e) {

  console.log('onErrorCallback called', e);

}