SecureFields Bank Account

Before you can create an ACH charge, you must first collect and verify your customer’s bank account and routing number. In order to properly identify the bank account, you also need to collect the name of the person or business who owns the account. When a user enters a bank account, the information is converted to a token. The token can be used to send a payment request later, instead of using the actual bank account.

Adding HTML markup for SecureFields

<form id="ach-form">
  <div class="form-group">
    <label>Routing Number</label>
    <div id="routing-number"></div>
  </div>
  <div class="form-group">
    <label>Account Number</label>
    <div id="account-number"></div>
  </div>
  <div class="form-group">
    <label>First name</label>
    <div id="first-name"></div>
  </div>
  <div class="form-group">
    <label>Last name</label>
    <div id="last-name"></div>
  </div>
  <div class="form-group">
    <label>Business name</label>
    <div id="business-name"></div>
  </div>
  <div class="form-group">
    <label>Email</label>
    <div id="email"></div>
  </div>
  <div class="form-group">
    <label>&nbsp;</label>
    <div class="d-flex">
      <button type="submit" id="btn-create-card" class="btn btn-success mr-3">Create Bank Account</button>
    </div>
  </div>
</form>

Initializing JS SDK

PayEngine.SecureFields.create().then((form) => {
  const cardName = form.field("#routing-number", {
    type: "number",
    name: "routing_number",
    placeholder: "Routing Number",
    validations: ["required"],
    css,
  });
  form.field("#account-number", {
    type: "number",
    name: "account_number",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Account Number",
    validations: ["required"],
    css,
  });
  form.field("#first-name", {
    type: "text",
    name: "first_name",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "First Name",
    validations: ["required"],
    css,
  });
  form.field("#last-name", {
    type: "text",
    name: "last_name",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Last Name",
    validations: ["required"],
    css,
  });
  //if business name needs to be captured, then
  form.field("#business-name", {
    type: "text",
    name: "account_name",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Business Name",
    validations: ["required"],
    css,
  });
  //if email needs to be captured, then
  form.field("#email", {
    type: "email",
    name: "email",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "email",
    validations: ["required"],
    css,
  });
  document.getElementById('ach-form').addEventListener("submit", async (e) => {
    e.preventDefault();
    try {
      const cardObj = await form.createBankAccount();
      console.log({ cardObj });
    } catch (e) {
      console.log(JSON.stringify(e));
    }
  });
});