Client-Side Setup

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

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.