Getting Started Examples

Card

Example: Checkout Payment Form for Accepting Card Information

This simple payment form captures the name, PAN, CVN, month, and year, and a pay button for submitting the information. Back to Client-Side Setup.

<h1>Checkout</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>

Example: Creating the Pay Button with Event Listener for Cards

Back to Transient Token Time Limit.

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) {      // handle error      console.error(err);      errorsOutput.textContent = err.message;    } else {      // At this point you may pass the token back to your server as you wish.      // In this example we append a hidden input to the form and submit it.      console.log(JSON.stringify(token));      flexResponse.value = JSON.stringify(token);      form.submit();    }  });});

Example: Customer-Submitted Form with Card Information

Back to Transient Token Time Limit.

<script>  // Variables from the HTML form  const form = document.querySelector('#my-sample-form');  const payButton = document.querySelector('#pay-button');  const flexResponse = document.querySelector('#flexresponse');  const expMonth = document.querySelector('#expMonth');  const expYear = document.querySelector('#expYear');  const errorsOutput = document.querySelector('#errors-output');  // the capture context that was requested server-side for this transaction  const captureContext = <%- keyInfo %>;  // custom styles that will be applied to each field we create using Microform  const myStyles = {    'input': { 'font-size': '14px', 'font-family': 'helvetica, tahoma, calibri, sans-serif', 'color': '#555' },    ':focus': { 'color': 'blue' },    ':disabled': { 'cursor': 'not-allowed' },    'valid': { 'color': '#3c763d' },    'invalid': { 'color': '#a94442' }  };  // setup Microform  const flex = new Flex(captureContext);  const microform = flex.microform({ styles: myStyles });  const number = microform.createField('number', { placeholder: 'Enter card number' });  const securityCode = microform.createField('securityCode', { placeholder: '•••' });  number.load('#number-container');  securityCode.load('#securityCode-container');  // Configuring a Listener for the Pay button  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) {        // handle error        console.error(err);        errorsOutput.textContent = err.message;      } else {        // At this point you may pass the token back to your server as you wish.        // In this example we append a hidden input to the form and submit it.        console.log(JSON.stringify(token));        flexResponse.value = JSON.stringify(token);        form.submit();      }    });  });</script>

Example: Token Payload with Card Information

Back to Transient Token Response Format.

{  "iss": "Flex/00",  "exp": 1728911080,  "type": "mf-2.0.0",  "iat": 1728910180,  "jti": "1D1S6JK9RL6EK667H1I370689A63I2I8YLFJSPJ1EUSKIPMJJWEL670D16E89AF8",  "content": {    "paymentInformation": {      "card": {        "expirationYear": { "value": "2025" },        "number": {          "detectedCardTypes": [ "001" ],          "maskedValue": "XXXXXXXXXXXX1111",          "bin": "411111"        },        "securityCode": {},        "expirationMonth": { "value": "01" }      }    }  }}

Example: Token Payload with Multiple Card Types

Back to Transient Token Response Format.

{  "iss": "Flex/08",  "exp": 1661350495,  "type": "mf-2.0.0",  "iat": 1661349595,  "jti": "1C174LLWIFFR9OV0V0IJQOY0IB1JQP70ZNF4TBI3V6H3AIOY0W1T6306325F91C0",  "content": {    "paymentInformation": {      "card": {        "expirationYear": { "value": "2023" },        "number": {          "detectedCardTypes": [ "042", "036" ],          "maskedValue": "XXXXXXXXXXXX1800",          "bin": "501767"        },        "securityCode": {},        "expirationMonth": { "value": "01" }      }    }  }}

Example: Authorization with a Transient Token Using the REST API

Back to Using the Transient Token to Process a Payment.

{  "clientReferenceInformation": {    "code": "TC50171_3"  },  "orderInformation": {    "amountDetails": {      "totalAmount": "102.21",      "currency": "USD"    },    "billTo": {      "firstName": "Tanya",      "lastName": "Lee",      "address1": "1234 Main St.",      "locality": "Small Town",      "administrativeArea": "MI",      "postalCode": "98765-4321",      "country": "US",      "district": "MI",      "buildingNumber": "123",      "email": "[email protected]",      "phoneNumber": "987-654-3210"    }  },  "tokenInformation": {    "transientTokenJwt": "eyJraWQiOiIwN0JwSE9abkhJM3c3UVAycmhNZkhuWE9XQlhwa1ZHTiIsImFsZyI6IlJTMjU2In0.eyJkYXRhIjp7ImV4cGlyYXRpb25ZZWFyIjoiMjAyMCIsIm51bWJlciI6IjQxMTExMVhYWFhYWDExMTEiLCJleHBpcmF0aW9uTW9udGgiOiIxMCIsInR5cGUiOiIwMDEifSwiaXNzIjoiRmxleC8wNyIsImV4cCI6MTU5MTc0NjAyNCwidHlwZSI6Im1mLTAuMTEuMCIsImlhdCI6MTU5MTc0NTEyNCwianRpIjoiMUMzWjdUTkpaVjI4OVM5MTdQM0JHSFM1T0ZQNFNBRERCUUtKMFFKMzMzOEhRR0MwWTg0QjVFRTAxREU4NEZDQiJ9.cfwzUMJf115K2T9-wE_A_k2jZptXlovls8-fKY0muO8YzGatE5fu9r6aC4q7n0YOvEU6G7XdH4ASG32mWnYu-kKlqN4IY_cquRJeUvV89ZPZ5WTttyrgVH17LSTE2EvwMawKNYnjh0lJwqYJ51cLnJiVlyqTdEAv3DJ3vInXP1YeQjLX5_vF-OWEuZfJxahHfUdsjeGhGaaOGVMUZJSkzpTu9zDLTvpb1px3WGGPu8FcHoxrcCGGpcKk456AZgYMBSHNjr-pPkRr3Dnd7XgNF6shfzIPbcXeWDYPTpS4PNY8ZsWKx8nFQIeROMWCSxIZOmu3Wt71KN9iK6DfOPro7w"  }}

<h1>Checkout</h1><div id="errors-output" role="alert"></div><form action="/token" id="my-sample-form" method="post">  <div class="form-group">    <label id="routingNumber-label">Routing Number</label>    <div id="routingNumber-container" class="form-control"></div>    <label for="accountNumber-label">Account Number</label>    <div id="accountNumber-container" class="form-control"></div>    <label for="accountNumberConfirm-label">Account Number Confirm</label>    <div id="accountNumberConfirm-container" class="form-control"></div>  </div>  <div class="form-row">    <div class="form-group col-md-6">      <label for="accountType">Account Type</label>      <select id="accountType" name="accountType" class="form-control">        <option value="C">Checking</option>        <option value="S">Savings</option>        <option value="X">Corporate checking</option>      </select>    </div>  </div>  <button type="button" id="pay-button" class="btn btn-primary">Pay</button>  <input type="hidden" id="flexresponse" name="flexresponse"></form>

payButton.addEventListener('click', function () {  // Compiling account type into optional parameters  var options = {    accountType: document.querySelector('#accountType').value,  };  microform.createToken(options, function (err, token) {    if (err) {      // handle error      console.error(err);      errorsOutput.textContent = err.message;    } else {      // At this point you may pass the token back to your server as you wish.      // In this example we append a hidden input to the form and submit it.      console.log(JSON.stringify(token));      flexResponse.value = JSON.stringify(token);      form.submit();    }  });});

<script>  // Variables from the HTML form  const form = document.querySelector('#my-sample-form');  const payButton = document.querySelector('#pay-button');  const flexResponse = document.querySelector('#flexresponse');  const accountType = document.querySelector('#accountType');  const errorsOutput = document.querySelector('#errors-output');  // the capture context that was requested server-side for this transaction  const captureContext = <%- keyInfo %>;  // custom styles that will be applied to each field we create using Microform  const myStyles = {    'input': { 'font-size': '14px', 'font-family': 'helvetica, tahoma, calibri, sans-serif', 'color': '#555' },    ':focus': { 'color': 'blue' },    ':disabled': { 'cursor': 'not-allowed' },    'valid': { 'color': '#3c763d' },    'invalid': { 'color': '#a94442' }  };  // setup Microform  const flex = new Flex(captureContext);  const microform = flex.microform("check", { styles: myStyles });  const routingNumber = microform.createField("routingNumber", { placeholder: "Enter routing number" });  const accountNumber = microform.createField("accountNumber", { placeholder: "Enter account number" });  const accountNumberConfirm = microform.createField("accountNumberConfirm", { placeholder: "accountNumberConfirm" });  routingNumber.load('#routingNumber-container');  accountNumber.load('#accountNumber-container');  accountNumberConfirm.load('#accountNumberConfirm-container');  // Configuring a Listener for the Pay button  payButton.addEventListener('click', function () {    // Compiling account type into optional parameters    const options = {      accountType: document.querySelector('#accountType').value,    };    microform.createToken(options, function (err, token) {      if (err) {        // handle error        console.error(err);        errorsOutput.textContent = err.message;      } else {        // At this point you may pass the token back to your server as you wish.        // In this example we append a hidden input to the form and submit it.        console.log(JSON.stringify(token));        flexResponse.value = JSON.stringify(token);        form.submit();      }    });  });</script>

{  "iss": "Flex/00",  "exp": 1732527524,  "type": "mf-2.1.0",  "iat": 1732526624,  "jti": "1D3HRVI3KM4HFWQAZ2JFI993NEVBAH5NYJFIH82RAMYWDUJ444KT674445A4EAC0",  "content": {    "paymentInformation": {      "bank": {        "routingNumber": {},        "account": {          "number": {},          "type": {}        }      },      "paymentType": {        "name": { "value": "CHECK" }      }    }  }}

Capture Context Public Key

Example: Capture Context Public Key

Back to Validating the Transient Token for Accepting Card Information and Validating the Transient Token for Accepting eCheck Information.

{  "jwk": {    "kty": "RSA",    "e": "AQAB",    "use": "enc",    "n": "3DhDtIHLxsbsSygEAG1hcFqnw64khTIZ6w9W9mZNl83gIyj1FVk-H5GDMa85e8RZFxUwgU_zQ0kHLtONo8SB52Z0hsJVE9wqHNIRoloiNPGPQYVXQZw2S1BSPxBtCEjA5x_-bcG6aeJdsz_cAE7OrIYkJa5Fphg9_pxgYRod6JCFjgdHj0iDSQxtBsmtxagAGHjDhW7UoiIig71SN-f-gggaCpITem4zlb5kkRVvmKMUANe4B36v4XSSSpwdP_H5kv4JDz_cVlp_Vy8T3AfAbCtROyRyH9iH1Z-4Yy6T5hb-9y3IPD8vlc8E3JQ4qt6U46EeiKPH4KtcdokMPjqiuQ",    "kid": "00UaBe20jy9VkwZUQPZwNNoKFPJA4Qhc"  }}