Client-Side Setup {#micro-getting-started-pay-bank-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-bank-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 do this for every transaction as these values can be unique for each transaction. Do not hard code these values, as this can result in client-side ` Microform Integration ` errors. If you do not do this for every transaction, you may 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.  
   Within your HTML checkout, replace the routing number, account number, and confirm account number 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 routing number, account number, and confirm account number fields within the payment acceptance page: `<div id="number-container" class="form-control"></div>`.  
   **Example: Accept `eCheck` 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 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>
   ```
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("check", { styles: myStyles });`

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

   ```
   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');
   ```
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-bank-task1_setting-up-client-side-v2-steps}

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

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

* The card information acceptance fields of routing number, account number, and confirm account number 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 `eCheck` entry form web page in a web view.