E-Check with Web Components

Introducing Web Component Tokenization (eCheck / Bank Account)

This approach encapsulates all tokenization logic for bank account / eCheck inside a reusable, framework-agnostic <echeck-form> component. Merchants embed a JavaScript bundle and use a single HTML tag to securely handle the flow.

🛠️ Step-by-Step Guide

1️⃣ Add Jupico's JavaScript Library

The Jupico web component logic, including security, rendering, and tokenization, is inside the Jupico JavaScript library. Include the following script in the <head> of your HTML:

<head>
  <meta charset="UTF-8" />
  <!-- 👇🏻 Add Jupico hosted script  -->
  <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js"></script>
  <!-- If bank account is delivered in a separate bundle in your environment, use: -->
  <!-- <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/echeck-form.umd.js"></script> -->
</head>

2️⃣ Include the Web Component

Use the <echeck-form> tag and provide the required properties: Note: If you're using a JavaScript framework with dynamic data binding (e.g., React, Vue, Angular), follow the HTML example. If not, use the vanilla JavaScript example to programmatically create the tag and bind the data.

<echeck-form
  id="bank-account-form-ref"
  :isrequired="true"
  :sessions="{YOUR_SESSIONS_OBJECT}"
  :submitSuccess="handleBankAccountInputEvent"
  :validationError="handleValidationErrorEvent"
></echeck-form>

// Vanilla JavaScript
document.addEventListener("DOMContentLoaded", function () {
  fetch("https://your-appserver.com/browser-session-authorize", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ publicKey: "YOUR_PUBLIC_KEY", bankAccountTokenization: {
        "enabled": true
    } }),
  })
    .then(response => response.json())
    .then(response => {
      const echeckForm = document.createElement("echeck-form");
      echeckForm.sessions = response.data.sessions;
      echeckForm.isRequired = true;
      echeckForm.submitSuccess = handleBankAccountInputEvent;
      echeckForm.validationError = handleValidationErrorEvent;
      echeckForm.id = "echeck-form-id";

      document.getElementById("echeck-container").appendChild(echeckForm);
    })
    .catch(error => console.error("Error:", error));
});

🔹 Required Properties:

sessions: contains all the authorization sessions required for the web component. Do not alter/modify this object or build logic with it—it may change frequently.
submit-success: Callback function to handle the generated oneTimeToken.
validation-error: Callback to handle validation errors.

🔹 Optional Properties:

isrequired (boolean, default true)

3️⃣ Trigger Tokenization with a Button

To execute tokenization, get the reference of the form and call its method:

<button id="process-echeck-button">Process Bank Account Tokenization</button>
<script>
  const processEcheckTokenization = async () => {
    var echeckFormElement = document.getElementById("bank-account-form-ref");
    echeckFormElement.validateForm();
  };

  document
    .getElementById("process-echeck-button")
    .addEventListener("click", processEcheckTokenization);
</script>

4️⃣ Handle Success & Error Callbacks

// Handle successful tokenization (returns a short-lived one-time token)
function handleBankAccountInputEvent(event) {
  console.log("🚀 Success! One-Time Token:", event.oneTimeToken);
  // Send event.oneTimeToken to your backend to perform the ACH/eCheck transaction
}

// Handle validation errors (field-level or form-level)
function handleValidationErrorEvent(event) {
  console.error("❌ Validation Error:", event.error);
}

🔹 Full Integration Code

Here’s the complete implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>eCheck / Bank Account Tokenization</title>
  <!-- Jupico hosted script -->
  <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js" charset="utf-8"></script>
  <!-- If delivered separately in your environment, also include:
  <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/echeck-form.umd.js" charset="utf-8"></script>
  -->
</head>
<body>
  <div id="echeck-container"></div>
  <button id="process-echeck-button">Process Bank Account Tokenization</button>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // 1) Fetch sessions from your backend (your server does the B2B authorize call)
      fetch("https://your-appserver.com/browser-session-authorize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ publicKey: "YOUR_PUBLIC_KEY",
  			  bankAccountTokenization: {
        		enabled: true
    			}
      })
      .then(response => response.json())
      .then(response => {
        // 2) Create and configure the echeck form
        const echeckForm = document.createElement("echeck-form");
        echeckForm.sessions = response.data.sessions;      // required passthrough of the entiere So
        echeckForm.isRequired = true;                      // optional (default true)
        echeckForm.submitSuccess = handleBankAccountInputEvent;
        echeckForm.validationError = handleValidationErrorEvent;
        echeckForm.id = "bank-account-form-ref";

        document.getElementById("echeck-container").appendChild(echeckForm);
      })
      .catch(error => console.error("Error:", error));

      // 3) Callbacks
      function handleBankAccountInputEvent(event) {
        console.log("handleBankAccountInputEvent", event.oneTimeToken);
        // Forward the oneTimeToken to your backend to perform the ACH/eCheck transaction
      }

      function handleValidationErrorEvent(event) {
        console.log("handleValidationErrorEvent", event.error);
      }

      // 4) Trigger tokenization on button click
      const processEcheckTokenization = async () => {
        var el = document.getElementById("bank-account-form-ref");
        if (el) {
          el.validateForm();
        }
      };

      document.getElementById("process-echeck-button")
        .addEventListener("click", processEcheckTokenization);
    });
  </script>
</body>
</html>

Vue example (matches your snippet)

<echeck-form
  ref="bankAccountFormRef"
  :isrequired="true"
  :sessions="props.sessionsObject"
  :submitSuccess="handleBankAccountInputEvent"
  :validationError="handleValidationErrorEvent"
/>

<script setup>
const handleBankAccountInputEvent = (event) => {
  console.log("✅ oneTimeToken", event.oneTimeToken);
  // send to backend
};

const handleValidationErrorEvent = (event) => {
  console.error("❌", event.error);
};


function processEcheck() {
  const el = bankAccountFormRef?.value;
  el?.validateForm();
}
</script>

If you want, I can also add a tiny backend stub showing how to receive oneTimeToken and call the eCheck /sale or /authorization endpoint next.