Client-Side Setup {#micro-getting-started-pay-card-cs-setup}
============================================================

You can integrate `Microform Integration` with your native payment acceptance web page or mobile application.

Web Page {#setting-up-client-side-v2-web-card-task1}
----------------------------------------------------

Initiate and embed `Microform Integration` into your payment acceptance web page.

1. Decode the JWT from the `/microform/v2/sessions` response to get the capture context.

2. Use the clientLibrary and clientLibraryIntegrity values that are returned in the JWT from `/microform/v2/sessions` response to obtain the `Microform Integration` JavaScript library URL and integrity value that you use to create your script tags.

   > IMPORTANT You must use these values for every transaction. These values can be unique for each transaction.
   > IMPORTANT
   > Do not hard code these values, because doing so can result in client-side ` Microform Integration ` errors. If you do not hard code these values for all transactions, you can load a JavaScript library that is incompatible with the version you requested in the ` /sessions ` request.  
   > **Example `/sessions` Response:**

   ```
   "data":{ "clientLibrary":"[EXTRACT clientLibrary VALUE from here]", "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]" }
   ```

   **Example Script Tags**

   ```
   <script src="[INSERT clientLibrary VALUE HERE]" integrity=”[INSERT clientLibraryIntegrity VALUE HERE]” crossorigin=”anonymous”> </script> 
   ```

   **Example Code for Loading the Script Dynamically Following JWT Extraction Tags**

   ```
   // values read from capture context
   const clientLibrary = " ";
   const clientLibraryIntegrity = " ";
   // create script tag
   const script = document.createElement("script");
   script.src = clientLibrary;
   script.type = "text/javascript";
   script.async = true;
   script.integrity = clientLibraryIntegrity;
   script.crossOrigin = "anonymous";
   // run setup code after script has loaded successfully
   script.onload = function () {
     // SETUP
   };
   // insert to document
   document.head.appendChild(script);
   ```
3. Create the HTML placeholder objects to attach to the microforms.  
   `Microform Integration` attaches the microform fields to containers within your HTML. Within your HTML checkout, replace the payment card and CVN tag with a simple container. `Microform Integration` uses the container to render an iframe for secured credit card input. This example contains simple `div` tags to define where to place the PAN and CVN fields within the payment acceptance page: `<div id="number-container" class="form-control"></div>`.  
   **Example: Accept Card Information Checkout Form**

   ```
   <h1>Checkout Page</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>
   ```
4. Invoke the Flex SDK by passing the capture context that was generated in the previous step to the microform object.  
   `const flex = new Flex(captureContext);`

5. Initiate the microform object with styling to match your web page.  
   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:  
   `const microform = flex.microform("card", { styles: myStyles });`

6. Create and attach the microform fields to the HTML objects through the Microform Integration JavaScript library.

   ```
   const number = microform.createField('number', { placeholder: 'Enter card number' });
   const securityCode = microform.createField('securityCode', { placeholder: '•••' });
               number.load('#number-container');
               securityCode.load('#securityCode-container');
   ```
7. Create a function for the customer to submit their payment information, and invoke the tokenization request to `Microform Integration` for the transient token.
   {#setting-up-client-side-v2-web-card-task1_setting-up-client-side-v2-steps}

Mobile Application {#setting-up-client-side-v2-web-mobile-task2}
----------------------------------------------------------------

To initiate and embed `Microform Integration` into a native payment acceptance mobile application, follow the steps for web page set up, and ensure that these additional requirements are met:

* The card information acceptance fields of PAN and CVV must be hosted on a web page.
* The `eCheck` information acceptance fields of routing number, account number, and confirmed account number must be hosted on a web page.
* The native application must load the hosted card entry form web page in a web view.