Skip to main content

Client-Side Setup


The client-side setup loads the Flex Microform v2 JavaScript library, creates the eCheck input fields, and handles form submission to produce a transient token.

Before You Begin

Complete Server-Side Setup and have the capture context JWT available on the client.

Steps

Follow these steps to set up the client side for accepting eCheck information:

Load the Flex Microform JavaScript library

Extract the clientLibrary URL and clientLibraryIntegrity value from the decoded capture context JWT payload, then add them as a <script> tag:

<script  src="[INSERT clientLibrary VALUE FROM CAPTURE CONTEXT]"  integrity="[INSERT clientLibraryIntegrity VALUE FROM CAPTURE CONTEXT]"  crossorigin="anonymous"></script>

Initialize the Flex object

Pass the capture context JWT to the Flex constructor:

const flex = new Flex(captureContext);// captureContext is the JWT string from POST /microform/v2/sessions on your server

Initialize Microform for eCheck

Call flex.microform() specifying the "check" type and any custom styles:

const myStyles = {  'input': { 'font-size': '14px', 'color': '#555' },  ':focus': { 'color': 'blue' }};const microform = flex.microform("check", { styles: myStyles });

Create the eCheck input fields

Create the three required eCheck fields using microform.createField():

const routingNumber = microform.createField('routingNumber', {  placeholder: 'Enter routing number'});const accountNumber = microform.createField('accountNumber', {  placeholder: 'Enter account number'});const accountNumberConfirm = microform.createField('accountNumberConfirm', {  placeholder: 'Confirm account number'});

Add matching container elements in your HTML:

<div id="routingNumber-container"></div><div id="accountNumber-container"></div><div id="accountNumberConfirm-container"></div>

Load fields into their containers

Call .load() on each field to mount it in the corresponding HTML element:

routingNumber.load('#routingNumber-container');accountNumber.load('#accountNumber-container');accountNumberConfirm.load('#accountNumberConfirm-container');

Handle form submission and receive the transient token

Configure a listener on your pay button to call microform.createToken() when the customer submits the form:

payButton.addEventListener('click', function () {  const options = {    accountType: document.querySelector('#accountType').value  };  microform.createToken(options, function (err, token) {    if (err) {      console.error(err);      errorsOutput.textContent = err.message;      return;    }    // Send the token to your server    flexResponse.value = JSON.stringify(token);    form.submit();  });});

Next steps

After receiving the transient token, proceed to Transient Tokens for Accepting eCheck Information for information on token expiry and how to use it in a payment request.

Last published: September 29, 2026