Getting Started Examples

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.
<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: Checkout Payment Form for Accepting Check Information
This simple payment form captures the name, PAN, CVN, month, and year, and a pay button for submitting the information.
<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>
Example: Creating the Pay Button with Event Listener for Cards
payButton.('click', function () { // Compiling MM & 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: Creating the Pay Button with Event Listener for Checks
payButton.('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(); } }); });
Example: Customer-Submitted Form with Card Information
<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 & YY into optional paramiters 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: Customer-Submitted Form with Check Information
<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 MM & YY into optional paramiters 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>
Example: Token Payload with Card Information
{ "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 Check Information
{ "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" } } } } }
Example: Token Payload with Multiple Card Types
{ "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: Capture Context Public Key
"jwk": { "kty": "RSA", "e": "AQAB", "use": "enc", "n": "3DhDtIHLxsbsSygEAG1hcFqnw64khTIZ6w9W9mZNl83gIyj1FVk-H5GDMa85e8RZFxUwgU_zQ0kHLtONo8SB52Z0hsJVE9wqHNIRoloiNPGPQYVXQZw2S1BSPxBtCEjA5x_-bcG6aeJdsz_cAE7OrIYkJa5Fphg9_pxgYRod6JCFjgdHj0iDSQxtBsmtxagAGHjDhW7UoiIig71SN-f-gggaCpITem4zlb5kkRVvmKMUANe4B36v4XSSSpwdP_H5kv4JDz_cVlp_Vy8T3AfAbCtROyRyH9iH1Z-4Yy6T5hb-9y3IPD8vlc8E3JQ4qt6U46EeiKPH4KtcdokMPjqiuQ", "kid": "00UaBe20jy9VkwZUQPZwNNoKFPJA4Qhc" }
Example: Validating the Transient Token
This example shows how to extract the signature key from the capture context and use the key to validate the transient token object returned from a successful microform interaction.
console.log('Response TransientToken: ' + req.body.transientToken); console.log('Response CaptureContext: ' + req.body.captureContext); // Validating Token JWT Against Signature in Capture Context const capturecontext = req.body.captureContext; const transientToken = req.body.transientToken; // Extracting JWK in Body of Capture Context const ccBody = capturecontext.split('.')[1]; console.log('Body: ' + ccBody); const atob = require('atob'); const ccDecodedValue = JSON.parse( atob(ccBody)); const jwk = ccDecodedValue.flx.jwk; console.log('CaptureContext JWK: ' + JSON.stringify(jwk)); // Converting JWK to PEM const jwkToPem = require('jwk-to-pem'), jwt = require('jsonwebtoken'); const pem = jwkToPem(jwk); // Validating JWT const validJWT = jwt.verify(transientToken, pem); console.log('Validated Resposonse: ' + JSON.stringify(validJWT));
Example: Authorization with a Transient Token Using the REST API
{ "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": "tanyalee@example.com", "phoneNumber": "987-654-3210" } }, "tokenInformation": { "transientTokenJwt": "eyJraWQiOiIwN0JwSE9abkhJM3c3UVAycmhNZkhuWE9XQlhwa1ZHTiIsImFsZyI6IlJTMjU2In0.eyJkYXRhIjp7ImV4cGlyYXRpb25ZZWFyIjoiMjAyMCIsIm51bWJlciI6IjQxMTExMVhYWFhYWDExMTEiLCJleHBpcmF0aW9uTW9udGgiOiIxMCIsInR5cGUiOiIwMDEifSwiaXNzIjoiRmxleC8wNyIsImV4cCI6MTU5MTc0NjAyNCwidHlwZSI6Im1mLTAuMTEuMCIsImlhdCI6MTU5MTc0NTEyNCwianRpIjoiMUMzWjdUTkpaVjI4OVM5MTdQM0JHSFM1T0ZQNFNBRERCUUtKMFFKMzMzOEhRR0MwWTg0QjVFRTAxREU4NEZDQiJ9.cfwzUMJf115K2T9-wE_A_k2jZptXlovls8-fKY0muO8YzGatE5fu9r6aC4q7n0YOvEU6G7XdH4ASG32mWnYu-kKlqN4IY_cquRJeUvV89ZPZ5WTttyrgVH17LSTE2EvwMawKNYnjh0lJwqYJ51cLnJiVlyqTdEAv3DJ3vInXP1YeQjLX5_vF-OWEuZfJxahHfUdsjeGhGaaOGVMUZJSkzpTu9zDLTvpb1px3WGGPu8FcHoxrcCGGpcKk456AZgYMBSHNjr-pPkRr3Dnd7XgNF6shfzIPbcXeWDYPTpS4PNY8ZsWKx8nFQIeROMWCSxIZOmu3Wt71KN9iK6DfOPro7w" } }