Transient Token Time Limit {#transient-token-time-limit-pay-card_time-limit}
============================================================================

The sensitive data associated with the transient token is available for use in API requests for a 15-minute duration. The transient token can be used multiple times within the 15-minute period. After 15 minutes, you must prompt the customer to restart the checkout flow.  
**Example: Creating the Pay Button with Event Listener for Accepting Card Information**

```
const button = document.querySelector("#myButton");

button.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) {
    // handle err
    if (err) {
      console.error(err);
      errorsOutput.textContent = err.message;
      return;
    }
  
    // 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();
  });
});
```

When the customer submits the form, `Microform Integration` securely collects and tokenizes the data in the loaded fields as well as the options supplied to the `createToken()` function. The Account Type is included in the request. If tokenization succeeds, your callback receives the token as its second parameter. Send the token to your server, and use it in place of the card information when you use supported payment services.  
**Example: Customer-Submitted Form for Accepting Card Information**

```
<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> 
```