Developer Guide Menu

Setting Up the Client Side

Initiate and embed Flex Microform into your payment acceptance web page.
  1. Add the Flex Microform JavaScript library to your page by loading it directly from Cybersource. See Version Numbering . Example:
  2. Create the HTML placeholder objects to attach to the microforms.

    ADDITIONAL INFORMATION

    Flex Microform attaches the microform fields to containers within your HTML. Within your HTML checkout, replace the payment card and CVN tag with a simple container. Flex Microform uses the container to render an iframe for secured credit card input. The following example contains simple
    div
    tags to define where to place the PAN and CVN fields within the payment acceptance page:
    . See Example: Checkout Payment Form .
  3. Invoke the Flex SDK by passing the capture context that was generated in the previous step to the microform object.

    ADDITIONAL INFORMATION

    var flex = new Flex(captureContext);
  4. Initiate the microform object with styling to match your web page.

    ADDITIONAL INFORMATION

    After you create a new Flex object, you can begin creating your Microform. You will pass your baseline styles and ensure that the button matches your merchant page.
    var microform = flex.microform({ styles: myStyles });
  5. Create and attach the microform fields to the HTML objects through the Flex Microform JavaScript library.

    ADDITIONAL INFORMATION

                     
    var number = microform.createField('number', { placeholder: 'Enter card number' }); var securityCode = microform.createField('securityCode', { placeholder: '•••' }); number.load('#number-container'); securityCode.load('#securityCode-container');
  6. Create a function for the customer to submit their payment information, and invoke the tokenization request to Flex Microform for the transient token.
Top