Getting Started

Flex Microform consists of a server-side component and a client-side JavaScript library. The server-side component requests limited-use public keys from the Flex API. The client-side JavaScript library seamlessly replaces the sensitive
field in your input form.

Server-Side Setup

We currently provide server-side Flex SDKs in Java, .Net, and Node.js.
Our server-side SDKs provide two functions:
  • Creating a transaction specific public key whereby the resulting public key is sent to the client side to initiate the Microform.
    When creating the public key for a Flex Microform implementation, you need to specify a targetOrigin. This is the protocol, URL, and if used, port number of the page that will host the Microform. Unless using http://localhost, the protocol must be https://. For example, if serving Microform on, the targetOrigin is ""
  • Verifying the token response, after which Flex Microform creates the token, it is passed back through the cardholder's browser. The response needs to be verified because a malicious user may tamper with the token response as it passes through the cardholder device. This function can be completed using the public key that is generated at the start of the process.
Server-side Flex SDKs are available on GitHub.

Client-Side Setup

Add the Flex Microform .js script to your page by loading directly from CyberSource:
<script src=""></script>


Version Numbering
Flex Microform follows Semantic Versioning. The most recent version is 0.4.4; however, CyberSource recommends referencing 0.4 to receive the latest patch versions automatically.
Upgrade Paths
In adherence with our commitment to Semantic Versioning, all efforts will be made to ensure that upgrade paths for
releases are backwards-compatible and require no code change.
During initial
releases, if this is not possible, we will provide clear upgrade steps describing any changes required.

Basic Integration

Within your HTML checkout, replace the credit card number
tag with a simple
container. This container will be used by Flex Microform to render iframe containing secured credit card input.
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <title>Sample Checkout</title>   </head>   <body>     <form action="/payment/complete" id="my-sample-form" method="post">       <label id="cardNumber-label">Card Number</label>       <div id="cardNumber-container"></div>       <!--         All the other fields comprising the form post to your server       -->       <button type="button" id="pay-button">Pay</button>     </form>     <script src=""></script>     <script>       var jwk = { /* jwk fetched on the server side */ };       var form = document.querySelector('#my-sample-form');       var payButton = document.querySelector('#pay-button');       // SETUP MICROFORM       FLEX.microform(         {           keyId: jwk.kid,           keystore: jwk,           container: '#cardNumber-container',           label: '#cardNumber-label',           placeholder: 'Your custom placeholder text',           styles: {             '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' },           }         },         function (setupError, microformInstance) {           if (setupError) {             // handle error             return;           }           // intercept the form submission and make a tokenize request instead           payButton.addEventListener('click', function () {             // Send in optional parameters from other parts of your payment form             var options = {               // cardExpirationMonth: /* ... */,               // cardExpirationYear:  /* ... */,               // cardType: /* ... */             };             microformInstance.createToken(options, function (err, response) {               if (err) {                 // handle error                 return;               }               console.log('Token generated: ');               console.log(JSON.stringify(response));               // At this point the token may be added to the form               // as hidden fields and the submission continued               form.submit();             });           });         }       );     </script>   </body> </html>
In the example above, when the customer submits the form, Flex Microform securely collects and attempts to tokenize the card details. If tokenization succeeds, your success callback handler receives the token. This token can then be sent to your server and used with any supporting CyberSource services in place of the PAN.

Token Verification

You can send the token to your server where its integrity can be cryptographically verified using the public key to ensure that it has not been tampered with.

Using the Token

Use the token instead of card data in CyberSource services.
Connection Method
Field in Which to Use Token
Simple Order API
Secure Acceptance
“paymentInformation”:{ “customer”:{ “customerId”: “7500BB199B4270EFE05340588D0AFCAD” }
Back to top