On This Page

Transient Token Time Limit

The sensitive data associated with the transient token is available for use only for 15 minutes or until one successful authorization occurs. Before the transient token expires, its data is still usable in other non-authorization services. 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

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();
        }
    });
});

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 month and year are 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 PAN 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 paramiters	 
        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>