📃
Developer Docs
  • Overview
  • Integration Options
  • Webhooks
    • Build a webhook endpoint
    • Check signature
  • Getting Started
    • 1. Creating User Accounts
    • 2. User Account Types & Permissions
    • 3. Generate Access Tokens
    • 4. Choose Integration Options
    • 5. Securing Embedded UIs
      • 5a. Securing Embedded UIs Using HMAC (deprecated)
    • 6. Loading the frontend library
      • 6a. Preloading PayEngine Web-Component in SPA
    • 7. Custom styling the Web-Components
    • 8. Handling Callbacks from Web-Components
    • 9. Available Web-Components
    • 10. Available Webhooks
  • Merchant Onboarding
    • Overview
    • Integration Options
    • Onboarding/Payments Application Workflow
    • Embedded Onboarding UI
    • Merchant onboarding APIs
    • Partner's Onboarding UI
    • Merchant Lifecycle
    • Onboarding to Partner Relationships
  • Processing Payments
    • Introduction
      • Transaction Flow and Status
    • SecureFields JS
      • SecureFields Bank Account
      • Using tokens
    • Credit Card Form
    • Connect with Plaid
    • Connect Mailgun
    • 3D Secure
    • Payments API
    • Searching Transactions
    • Registering a cloud connected device
    • Apple Pay
      • Apple Pay in your native app
    • Google Payâ„¢
    • Level 2 and Level 3 Data
    • Fraud Prevention
    • Reporting
    • PCI Compliance
    • Address Verification Service (AVS) Check
    • Hosted Payments
    • Tap to Pay
  • Card Account Updater
  • ORCHESTRATION SYSTEM
    • Orchestration Overview
    • Onboarding Orchestration
    • Transactions Orchestration
    • Omnicommerce Orchestration
    • Merchant Servicing
    • Universal Reporting
  • TOKENIZATION
    • Automatic Network Tokenization
    • Token Migration Process
  • DISPUTE MANAGEMENT
    • Retrieval Requests & Chargebacks
  • Certification
    • Partner Certification
  • Data Sharing
    • Secure Data Sharing with PayEngine
  • eCommerce Integration
    • PayEngine Payment Gateway for WooCommerce
Powered by GitBook
On this page
  • Adding HTML markup for SecureFields
  • Initializing JS SDK
  1. Processing Payments
  2. SecureFields JS

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>&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));
    }
  });
});

PreviousSecureFields JSNextUsing tokens

Last updated 7 months ago