Getting Started Examples {#flex-getting-started-examples-v2}
============================================================

Example: Checkout Payment Form for Accepting Card Information  
This simple payment form captures the name, PAN, CVN, month, and year, and a pay button for submitting the information.  
Back to [Client-Side Setup](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-cs-setup.md "").

```
<h1>Checkout</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>
```

Example: Checkout Payment Form for Accepting `eCheck` Information  
This simple payment form captures the name, PAN, CVN, month, and year, and a pay button for submitting the information.  
Back to [Client-Side Setup](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-bank/micro-getting-started-pay-bank-cs-setup.md "").

```
<h1>Checkout</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> 
```

Example: Creating the Pay Button with Event Listener for Cards  
Back to [Transient Token Time Limit](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/transient-token-time-limit-pay-card.md "").

```
payButton.('click', function () {

    // Compiling MM & YY into optional parameters	 
    const options = {
        expirationMonth: document.querySelector('#expMonth').value,
        expirationYear: document.querySelector('#expYear').value
    };
    //  
    microform.createToken(options, function (err, token) {
        if (err) {
            // handle error
            console.error(err);
            errorsOutput.textContent = err.message;
        } else {
            // At this point you may pass the token back to your server as you wish.
            // In this example we append a hidden input to the form and submit it.      
            console.log(JSON.stringify(token));
            flexResponse.value = JSON.stringify(token);
            form.submit();
        }
    });
});
```

Example: Creating the Pay Button with Event Listener for Checks  
Back to [Transient Token Time Limit](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-bank/micro-getting-started-pay-bank-trans-tkn/transient-token-time-limit-pay-bank.md "").

```
payButton.('click', function () {

  // Compiling account type into optional parameters	 
  var options = {
    accountType: document.querySelector('#accountType').value,
  };
  //  
  microform.createToken(options, function (err, token) {
    if (err) {
      // handle error
      console.error(err);
      errorsOutput.textContent = err.message;
    } else {
      // At this point you may pass the token back to your server as you wish.
      // In this example we append a hidden input to the form and submit it.      
      console.log(JSON.stringify(token));
      flexResponse.value = JSON.stringify(token);
      form.submit();
    }
  });
});
```

Example: Customer-Submitted Form with Card Information  
Back to [Transient Token Time Limit](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/transient-token-time-limit-pay-card.md "").

```
<script>
    // Variables from the HTML form 
    const form = document.querySelector('#my-sample-form');
    const payButton = document.querySelector('#pay-button');
    const flexResponse = document.querySelector('#flexresponse');
    const expMonth = document.querySelector('#expMonth');
    const expYear = document.querySelector('#expYear');
    const errorsOutput = document.querySelector('#errors-output');

    // the capture context that was requested server-side for this transaction
    const captureContext = <% -keyInfo %> ;
    // custom styles that will be applied to each field we create using Microform
    const myStyles = {
        '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' }
    };
    // setup Microform
    const flex = new Flex(captureContext);
    const microform = flex.microform({ styles: myStyles });
    const number = microform.createField('number', { placeholder: 'Enter card number' });
    const securityCode = microform.createField('securityCode', { placeholder: '•••' });
    number.load('#number-container');
    securityCode.load('#securityCode-container');


    // Configuring a Listener for the Pay button	
    payButton.addEventListener('click', function () {

        // Compiling MM & YY into optional parameters	 
        const options = {
            expirationMonth: document.querySelector('#expMonth').value,
            expirationYear: document.querySelector('#expYear').value
        };
        //  
        microform.createToken(options, function (err, token) {
            if (err) {
                // handle error
                console.error(err);
                errorsOutput.textContent = err.message;
            } else {
                // At this point you may pass the token back to your server as you wish.
                // In this example we append a hidden input to the form and submit it.      
                console.log(JSON.stringify(token));
                flexResponse.value = JSON.stringify(token);
                form.submit();
            }
        });
    }); 
</script>
```

Example: Customer-Submitted Form with `eCheck` Information  
Back to [Transient Token Time Limit](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-bank/micro-getting-started-pay-bank-trans-tkn/transient-token-time-limit-pay-bank.md "").

```
<script>
    // Variables from the HTML form 
    const form = document.querySelector('#my-sample-form');
    const payButton = document.querySelector('#pay-button');
    const flexResponse = document.querySelector('#flexresponse');
    const accountType = document.querySelector('#accountType')
    const errorsOutput = document.querySelector('#errors-output');

    // the capture context that was requested server-side for this transaction
    const captureContext = <% -keyInfo %> ;
    // custom styles that will be applied to each field we create using Microform
    const myStyles = {
        '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' }
    };
    // setup Microform
    const flex = new Flex(captureContext);
    const microform = flex.microform("check", { styles: myStyles });
    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')
    

    // Configuring a Listener for the Pay button	
    payButton.addEventListener('click', function () {

        // Compiling MM & YY into optional parameters	 
        const options = {
            accountType: document.querySelector('#accountType').value,
        };
        //  
        microform.createToken(options, function (err, token) {
            if (err) {
                // handle error
                console.error(err);
                errorsOutput.textContent = err.message;
            } else {
                // At this point you may pass the token back to your server as you wish.
                // In this example we append a hidden input to the form and submit it.      
                console.log(JSON.stringify(token));
                flexResponse.value = JSON.stringify(token);
                form.submit();
            }
        });
    });
</script> 
```

Example: Token Payload with Card Information  
Back to [Transient Token Response Format](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/transient-token-response-format-pay-card.md "").

```
{
  "iss": "Flex/00",
  "exp": 1728911080,
  "type": "mf-2.0.0",
  "iat": 1728910180,
  "jti": "1D1S6JK9RL6EK667H1I370689A63I2I8YLFJSPJ1EUSKIPMJJWEL670D16E89AF8",
  "content": {
    "paymentInformation": {
      "card": {
        "expirationYear": {
          "value": "2025"
        },
        "number": {
          "detectedCardTypes": [
            "001"
          ],
          "maskedValue": "XXXXXXXXXXXX1111",
          "bin": "411111"
        },
        "securityCode": {},
        "expirationMonth": {
          "value": "01"
        }
      }
    }
  }
} 
      
```

Example: Token Payload with `eCheck` Information  
Back to [Transient Token Response Format](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-bank/micro-getting-started-pay-bank-trans-tkn/transient-token-response-format-pay-bank.md "").

```
{
  "iss" : "Flex/00",
  "exp" : 1732527524,
  "type" : "mf-2.1.0",
  "iat" : 1732526624,
  "jti" : "1D3HRVI3KM4HFWQAZ2JFI993NEVBAH5NYJFIH82RAMYWDUJ444KT674445A4EAC0",
  "content" : {
    "paymentInformation" : {
      "bank" : {
        "routingNumber" : { },
        "account" : {
          "number" : { },
          "type" : { }
        }
      },
      "paymentType" : {
        "name" : {
          "value" : "CHECK"
        }
      }
    }
  }
}
```

Example: Token Payload with Multiple Card Types  
Back to [Transient Token Response Format](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/transient-token-response-format-pay-card.md "").

```
{
  "iss": "Flex/08",
  "exp": 1661350495,
  "type": "mf-2.0.0",
  "iat": 1661349595,
  "jti": "1C174LLWIFFR9OV0V0IJQOY0IB1JQP70ZNF4TBI3V6H3AIOY0W1T6306325F91C0",
  "content": {
    "paymentInformation": {
      "card": {
        "expirationYear": {
          "value": "2023"
        },
        "number": {
          "detectedCardTypes": [
            "042",
            "036"
          ],
          "maskedValue": "XXXXXXXXXXXX1800",
          "bin": "501767"
        },
        "securityCode": {},
        "expirationMonth": {
          "value": "01"
        }
      }
    }
  }
}  
```

Example: Capture Context Public Key  
Back to [Validating the Transient Token for Accepting Card Information](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/validating-the-transient-token-pay-card.md "") and [Validating the Transient Token for Accepting `eCheck` Information](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-bank/micro-getting-started-pay-bank-trans-tkn/validating-the-transient-token-pay-bank.md "").

```
"jwk": {
                "kty": "RSA",
                "e": "AQAB",
                "use": "enc",
                "n": "3DhDtIHLxsbsSygEAG1hcFqnw64khTIZ6w9W9mZNl83gIyj1FVk-H5GDMa85e8RZFxUwgU_zQ0kHLtONo8SB52Z0hsJVE9wqHNIRoloiNPGPQYVXQZw2S1BSPxBtCEjA5x_-bcG6aeJdsz_cAE7OrIYkJa5Fphg9_pxgYRod6JCFjgdHj0iDSQxtBsmtxagAGHjDhW7UoiIig71SN-f-gggaCpITem4zlb5kkRVvmKMUANe4B36v4XSSSpwdP_H5kv4JDz_cVlp_Vy8T3AfAbCtROyRyH9iH1Z-4Yy6T5hb-9y3IPD8vlc8E3JQ4qt6U46EeiKPH4KtcdokMPjqiuQ",
                "kid": "00UaBe20jy9VkwZUQPZwNNoKFPJA4Qhc"    }
```

Example: Authorization with a Transient Token Using the REST API  
Back to [Using the Transient Token to Process a Payment](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-getting-started-pay-card/micro-getting-started-pay-card-trans-tkn/using-transient-token-pay-card.md "").

```
{
    "clientReferenceInformation": {
        "code": "TC50171_3"
    },
    "orderInformation": {
        "amountDetails": {
            "totalAmount": "102.21",
            "currency": "USD"
        },
        "billTo": {
            "firstName": "Tanya",
            "lastName": "Lee",
            "address1": "1234 Main St.",
            "locality": "Small Town",
            "administrativeArea": "MI",
            "postalCode": "98765-4321",
            "country": "US",
            "district": "MI",
            "buildingNumber": "123",
            "email": "tanyalee@example.com",
            "phoneNumber": "987-654-3210"
        }
    },
    "tokenInformation": {
        "transientTokenJwt": "eyJraWQiOiIwN0JwSE9abkhJM3c3UVAycmhNZkhuWE9XQlhwa1ZHTiIsImFsZyI6IlJTMjU2In0.eyJkYXRhIjp7ImV4cGlyYXRpb25ZZWFyIjoiMjAyMCIsIm51bWJlciI6IjQxMTExMVhYWFhYWDExMTEiLCJleHBpcmF0aW9uTW9udGgiOiIxMCIsInR5cGUiOiIwMDEifSwiaXNzIjoiRmxleC8wNyIsImV4cCI6MTU5MTc0NjAyNCwidHlwZSI6Im1mLTAuMTEuMCIsImlhdCI6MTU5MTc0NTEyNCwianRpIjoiMUMzWjdUTkpaVjI4OVM5MTdQM0JHSFM1T0ZQNFNBRERCUUtKMFFKMzMzOEhRR0MwWTg0QjVFRTAxREU4NEZDQiJ9.cfwzUMJf115K2T9-wE_A_k2jZptXlovls8-fKY0muO8YzGatE5fu9r6aC4q7n0YOvEU6G7XdH4ASG32mWnYu-kKlqN4IY_cquRJeUvV89ZPZ5WTttyrgVH17LSTE2EvwMawKNYnjh0lJwqYJ51cLnJiVlyqTdEAv3DJ3vInXP1YeQjLX5_vF-OWEuZfJxahHfUdsjeGhGaaOGVMUZJSkzpTu9zDLTvpb1px3WGGPu8FcHoxrcCGGpcKk456AZgYMBSHNjr-pPkRr3Dnd7XgNF6shfzIPbcXeWDYPTpS4PNY8ZsWKx8nFQIeROMWCSxIZOmu3Wt71KN9iK6DfOPro7w"
    }
}        
```