Tokenization

Modified on Wed, 16 Oct, 2024 at 11:34 PM

Step 1: Create a Basic Web Page

Start by creating a simple HTML file (index.html) to serve as the base for your tokenization form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- Your form will go here -->
</body>
</html>

Step 2: Add the Tokenization Form

Next, add the form where sensitive payment information will be collected:

<form>
    <table>
        <tr>
            <td>Card Number</td>
            <td id="demoCcnumber"></td>
        </tr>
        <tr>
            <td>Card Expiration</td>
            <td id="demoCcexp"></td>
        </tr>
        <tr>
            <td>CVV Code</td>
            <td id="demoCvv"></td>
        </tr>
    </table>
    <button id="customPayButton">Confirm Payment</button>
</form>

The IDs (demoCcnumber, demoCcexp, demoCvv) replace standard form inputs for credit card payments.

Step 3: Load the ZeroGateway.js Script

In the <head> section of your page, include the ZeroGateway.js script with your tokenization key:

<script src="https://gateway.paywithzero.net/v1/gateway/ZeroGateway.js" data-tokenization-key="your-token-key"></script>

Replace your-token-key with the tokenization key specific to your merchant, which can be found under Merchant Settings in the Security Keys section. Make sure to use the key that has "Tokenization" as its source.

Step 4: Initialize the JS Object

Once the HTML document is fully loaded, you can customize the tokenization experience. Add the following script to your page:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        CollectJS.configure({
            'paymentSelector': '#customPayButton',
            "fields": {
                "ccnumber": {
                    "selector": "#demoCcnumber",
                    "title": "Card Number",
                    "placeholder": "0000 0000 0000 0000"
                },
                "ccexp": {
                    "selector": "#demoCcexp",
                    "title": "Card Expiration",
                    "placeholder": "MM / YY"
                },
                "cvv": {
                    "display": "show",
                    "selector": "#demoCvv",
                    "title": "CVV Code",
                    "placeholder": "***"
                },
            },
            "price": "1.00",
            "currency": "USD",
            "country": "US",
            "variant": "inline",
            "callback": function (response) {
                var input = document.createElement("input");
                input.name = "payment_token";
                input.value = response.token;
                var form = document.getElementsByTagName("form")[0];
                form.appendChild(input);
            }
        });
   });
</script>

The response.token obtained here represents the card information. Use this token in conjunction with your transaction API to process the payment.

Step 5: Additional Configuration Options

To fully customize your tokenization form, you can add the following configurations to the CollectJS.configure() method:

CollectJS.configure({
    "googleFont": "Montserrat:400",
    "customCss": {
        "color": "#0000FF",
        "background-color": "#D0D0FF"
    },
    "invalidCss": {
        "color": "white",
        "background-color": "red"
    },
    "validCss": {
        "color": "black",
        "background-color": "#D0FFD0"
    },
    "placeholderCss": {
        "color": "green",
        "background-color": "#808080"
    },
    "focusCss": {
        "color": "yellow",
        "background-color": "#202020"
    },
    'validationCallback': function(field, status, message) {
        console.log(field + " is now " + (status ? "Valid" : "Invalid") + ": " + message);
    },
    "fieldsAvailableCallback": function () {
        console.log("ZeroGateway.js loaded the fields onto the form");
    }
});

Important Notes

Token Reusability: Payment tokens are not reusable. Each token is valid for a single transaction. In the case of a declined payment, a new token must be generated.
Security: The tokenization key will be visible in your website's source code. Ensure you use only the designated tokenization key here and avoid exposing any other keys.

By following these steps, you can successfully integrate and customize the ZeroGateway.js tokenization form into your website.