On This Page

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 PAN
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.

NOTE

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 example.com, the targetOrigin is "https://example.com."

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="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"></script>

Versioning

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
minor
and
patch
releases are backwards-compatible and require no code change.
During initial
0.x.x
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

<input>

tag with a simple

<div>

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="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"></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	recurringSubscriptionInfo_subscriptionID
SCMP API	subscription_id
Secure Acceptance	payment_token
RESTPaymentsAPI ( /pts/v2/payments )	“paymentInformation”:{ “customer”:{ “customerId”: “7500BB199B4270EFE05340588D0AFCAD” }