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 serverInitialize 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.
Thanks for your feedback!
Last published: September 29, 2026