{{gatewayName}} Hosted Tokenization library

The {{gatewayName}} Hosted Tokenization library allows your app to process credit card transactions, while still minimizing scope for PCI.

You can use the library to create iframes containing card fields, generate a nonce token from the card data, and then use that nonce token to process transactions. Since the iframes and card fields are hosted completely on the gateway's servers, your app never deals with the raw card data, and the scope for PCI is minimized.

Setup

Before starting, create a tokenization source key in the gateway. This type of source key can only be used for tokenization using this library, and can be used in the frontend of a website.
To create a source key in the gateway, navigate to Control Panel > Sources > Create Key, and choose "Tokenization" from the Source Key Type dropdown.

Card Form

Add the hosted tokenization library to the page (for production, use the production base domain):

                      <script src="https://tokenization.{{gatewayDomain}}/tokenization/{{version}}"></script>

If you need to support IE, add the polyfill script before the library script:

                      <script src="https://tokenization.{{gatewayDomain}}/tokenization/{{version}}/polyfills" nomodule></script>
                      <script src="https://tokenization.{{gatewayDomain}}/tokenization/{{version}}"></script>

Initialize the library using a tokenization source key:

                      const tokenizationSourceKey = 'pk_abc123';
                      const hostedTokenization = new window.HostedTokenization(tokenizationSourceKey);

Create the element:

                      const cardForm = hostedTokenization.create('card-form');

Mount the element into the DOM:

                      cardForm.mount('#my-div');

When the user is ready to submit the transaction (e.g. they click a Process button), request the data from the fields, including a nonce token:
```
                      const result = await cardForm.getNonceToken();
                    
```
The nonce token must be used within 15 minutes after being generated.

On the backend, make an API request using the above data:

                      const { amount, name, result } = req.body;

                      const data = {
                        source: `nonce-${result.nonce}`;,
                        amount,
                        name,
                        expiry_month: result.expiry_month,
                        expiry_year: result.expiry_year,
                        avs_zip: result.avs_zip,
                      };

                     const res = await axios.post('{{sandboxBaseUrl}}/v2/charge', data)

Additional options

Listening for events

To listen for events fired by the iframed fields, use the .on() method.

This can be useful for showing the masked card data on a card widget as it's entered.

                        cardForm.on('input', onEvent);

Styling the iframe and fields

To style the iframe fields, use the .setStyles() method.

The strings passed as the values will be set as the style attribute for each element.

                        cardForm.setStyles({
                          card: 'border: 1px solid black',
                        });

Sample Code

                        {{sampleCode}}

Swipe

To use the swipe modal, replace steps 3-5 above with the following steps: