Client-Side Setup
You can integrate Microform Integration with your native payment acceptance web page or mobile application.
Before You Begin
Complete Server-Side Setup and have the capture context JWT available on the client.
Decode the capture context
Decode the JWT from the /microform/v2/sessions response to get the capture context.
Load the Flex Microform JavaScript library
Use the clientLibrary and clientLibraryIntegrity values returned in the JWT from the /microform/v2/sessions response to obtain the Microform Integration JavaScript library URL and integrity value for your script tags.
Example /sessions response:
{ "data": { "clientLibrary": "[EXTRACT clientLibrary VALUE from here]", "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]" }}Example script tags:
<script src="[INSERT clientLibrary VALUE HERE]" integrity="[INSERT clientLibraryIntegrity VALUE HERE]" crossorigin="anonymous"></script>Example: loading the script dynamically after JWT extraction:
// values read from capture contextconst clientLibrary = " ";const clientLibraryIntegrity = " ";// create script tagconst script = document.createElement("script");script.src = clientLibrary;script.type = "text/javascript";script.async = true;script.integrity = clientLibraryIntegrity;script.crossOrigin = "anonymous";// run setup code after the script loads successfullyscript.onload = function () { // SETUP};// insert into the documentdocument.head.appendChild(script);Create the HTML placeholder containers
Microform Integration attaches its fields to containers within your HTML. Replace the payment card and CVN fields in your checkout with simple container elements — Microform Integration renders a secured iframe inside each one. For example: <div id="number-container" class="form-control"></div>.
Example: accept card information checkout form
<h1>Checkout Page</h1><div id="errors-output" role="alert"></div><form action="/token" id="my-sample-form" method="post"> <div class="form-group"> <label for="cardholderName">Name</label> <input id="cardholderName" class="form-control" name="cardholderName" placeholder="Name on the card"> <label id="cardNumber-label">Card Number</label> <div id="number-container" class="form-control"></div> <label for="securityCode-container">Security Code</label> <div id="securityCode-container" class="form-control"></div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="expMonth">Expiry month</label> <select id="expMonth" class="form-control"> <option>01</option><option>02</option><option>03</option><option>04</option> <option>05</option><option>06</option><option>07</option><option>08</option> <option>09</option><option>10</option><option>11</option><option>12</option> </select> </div> <div class="form-group col-md-6"> <label for="expYear">Expiry year</label> <select id="expYear" class="form-control"> <option>2021</option><option>2022</option><option>2023</option> </select> </div> </div> <button type="button" id="pay-button" class="btn btn-primary">Pay</button> <input type="hidden" id="flexresponse" name="flexresponse"></form>Initialize the Flex object
Pass the capture context to the Flex constructor:
const flex = new Flex(captureContext);Initialize Microform for card
Create the Microform object with styling that matches your payment page:
const microform = flex.microform("card", { styles: myStyles });Create and load the card input fields
Create the card number and security code fields, then load them into their HTML containers:
const number = microform.createField('number', { placeholder: 'Enter card number' });const securityCode = microform.createField('securityCode', { placeholder: '•••' });number.load('#number-container');securityCode.load('#securityCode-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 () { // Compiling MM and YY into optional parameters const options = { expirationMonth: document.querySelector('#expMonth').value, expirationYear: document.querySelector('#expYear').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(); });});To initiate and embed Microform Integration into a native payment acceptance mobile application, host the payment page on a web server and load it inside a web view within your native application:
Decode the capture context
Decode the JWT from the /microform/v2/sessions response to get the capture context.
Load the Flex Microform JavaScript library
Use the clientLibrary and clientLibraryIntegrity values returned in the JWT from the /microform/v2/sessions response to obtain the Microform Integration JavaScript library URL and integrity value for your script tags.
Example /sessions response:
{ "data": { "clientLibrary": "[EXTRACT clientLibrary VALUE from here]", "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]" }}Example script tags:
<script src="[INSERT clientLibrary VALUE HERE]" integrity="[INSERT clientLibraryIntegrity VALUE HERE]" crossorigin="anonymous"></script>Example: loading the script dynamically after JWT extraction:
// values read from capture contextconst clientLibrary = " ";const clientLibraryIntegrity = " ";// create script tagconst script = document.createElement("script");script.src = clientLibrary;script.type = "text/javascript";script.async = true;script.integrity = clientLibraryIntegrity;script.crossOrigin = "anonymous";// run setup code after the script loads successfullyscript.onload = function () { // SETUP};// insert into the documentdocument.head.appendChild(script);Create the HTML placeholder containers on the hosted page
Microform Integration attaches its fields to containers within your HTML. Replace the payment card and CVN fields on the hosted page with simple container elements — Microform Integration renders a secured iframe inside each one. For example: <div id="number-container" class="form-control"></div>. If your application also accepts eCheck information, host the routing number, account number, and confirmed account number containers on this same page.
Example: accept card information checkout form
<h1>Checkout Page</h1><div id="errors-output" role="alert"></div><form action="/token" id="my-sample-form" method="post"> <div class="form-group"> <label for="cardholderName">Name</label> <input id="cardholderName" class="form-control" name="cardholderName" placeholder="Name on the card"> <label id="cardNumber-label">Card Number</label> <div id="number-container" class="form-control"></div> <label for="securityCode-container">Security Code</label> <div id="securityCode-container" class="form-control"></div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="expMonth">Expiry month</label> <select id="expMonth" class="form-control"> <option>01</option><option>02</option><option>03</option><option>04</option> <option>05</option><option>06</option><option>07</option><option>08</option> <option>09</option><option>10</option><option>11</option><option>12</option> </select> </div> <div class="form-group col-md-6"> <label for="expYear">Expiry year</label> <select id="expYear" class="form-control"> <option>2021</option><option>2022</option><option>2023</option> </select> </div> </div> <button type="button" id="pay-button" class="btn btn-primary">Pay</button> <input type="hidden" id="flexresponse" name="flexresponse"></form>Initialize the Flex object
Pass the capture context to the Flex constructor:
const flex = new Flex(captureContext);Initialize Microform for card
Create the Microform object with styling that matches your payment page:
const microform = flex.microform("card", { styles: myStyles });Create and load the card input fields
Create the card number and security code fields, then load them into their HTML containers:
const number = microform.createField('number', { placeholder: 'Enter card number' });const securityCode = microform.createField('securityCode', { placeholder: '•••' });number.load('#number-container');securityCode.load('#securityCode-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 () { // Compiling MM and YY into optional parameters const options = { expirationMonth: document.querySelector('#expMonth').value, expirationYear: document.querySelector('#expYear').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(); });});Load the hosted page in a web view
In your native application, load the hosted payment page inside a web view component so the customer can enter payment information without leaving the app. After the hosted page produces the transient token, retrieve it from the web view and pass it back to your native application code so it can be sent to your server.
Thanks for your feedback!
Last published: October 28, 2026