Secure Fields Overview

SecureFields JS Overview

SecureFields JS is a hosted field (payment, PII) solution that helps developers provide additional security to a merchant’s website. They are plug-in fields in your platform's "end-user" interface that provide an easy way to securely implement data collection without needing to pass through your systems. SecureFields JS fields are customizable, secure, input elements. When a user enters secure data in these fields, the data is converted into a token/s. The token/s can be used to send the sensitive data to the specified destination.

If you are looking for specific commands or options, please see the reference to the developer API specs provided from within your partner portal

Advantages of using SecureFields JS

Instantly create customized forms that adhere to PCI and other PII requirements. Our servers intercept the sensitive data before it hits your servers and replaces it with aliased version, while securing the original data in our vault.

The following example shows a rendered payments form using the SecureFields JS to serve the card holder name, card number, expiration date and CVV fields.

Before you begin

You will need your public and private keys from your partner console account. You can also use OAuth credentials if you are a registered partner with Platform.

Implementing SecureField JS

1. Add SecureFields JS to your checkout page

There are two ways to load SecureFields JS

Option #1 - To add SecureFields JS to your checkout page, include our JavaScript library in your host page:

<head>
  <script src="https://<payengine-partner-server>/js/wc/js/payengine.min.js?key=<your-public-api-key>"></script>
</head>

Note: Replace <payengine-partner-server> in the script with the following values based on the environment

a. Sandbox environment - https://console.payengine.dev

b. Production environment - https://console.payengine.co

Option #2 - Alternatively, to load only the SecureField JS library without the web components, include the following JavaScript library in your host page:

<head>
  <script src="https://<payengine-partner-server>/js/1.0.0/securefields.min.js?key=<your-public-api-key>"></script>
</head>

Then copy the following checkout form into the checkout page:

<form id="cc-form">
  <div>
    <label>Card Name</label>
    <div id="card-name"></div>
  </div>
  <div>
    <label>Card Number</label>
    <div id="card-number"></div>
  </div>
  <div>
    <label>Expire Date</label>
    <div id="card-expiry"></div>
  </div>
  <div>
    <label>CVC</label>
    <div id="card-cvc"></div>
  </div>
  <div>
    <label>Address Line 1</label>
    <div id="address-line1"></div>
  </div>
  <div>
    <label>Address Line 2</label>
    <div id="address-line2"></div>
  </div>
  <div>
    <label>City</label>
    <div id="address-city"></div>
  </div>
  <div>
    <label>State</label>
    <div id="address-state"></div>
  </div>
   <div>
    <label>Country</label>
    <div id="address-country"></div>
  </div>
  <div>
    <label>Zip</label>
    <div id="cc-zip"></div>
  </div>
  <div>
    <label>Email</label>
    <div id="cc-email"></div>
  </div>
  <div>
    <label>Country Code</label>
    <div id="cc-phonecountrycode"></div>
  </div>
  <div>
    <label>Phone</label>
    <div id="cc-phonenumber"></div>
  </div>
  <div>
    <button id="btn-create-card">Create Card</button>
  </div>
  <pre id="result">Submit to see result.</pre>
</form>

This will create a very simple (and unstyled) payment form. However, the payment form will not yet contain the fields nor will it be functional. It must first be configured before it can successfully tokenize your payment methods.

Important:

For credit card form, the field ids must match exactly the pre-defined field ids by our system in order for us to tokenize the appropriate data. card-name, card-number, card-expiry, card-cvcFor general PII data any IDs can be utilized.
Cardholder's address fields - address_line1 , address_line2 , address_state, address_country , address_zip if you are planning to capture address fields as part of secure fields. But these fields can be captured outside of secure fields too and in that case, these fields should not be included in the above form. Refer to this section on more details

2. Initialization

Once the host form is on the page, the fields are initialized with the SecureFields JS module.

Place the below snippet in a new script tag on the bottom of your checkout page, swapping out the example environment key with your own.

Note

If the merchant enters the credit card information, set the parameter manuallyEntered to true. And on the other hand, if you enter the credit card information, set the parameter manuallyEntered to false
To link the created card to a specific merchant, pass the corresponding Platform merchant_id in the merchant_id parameter. The card will then be restricted to that merchant's use only.

Capturing cardholder's billing address fields

There are two ways to capture address fields and send to Platform

Capture address fields within the secure fields (refer here for sample)
Capture address fields outside of the secure fields, in your own form and pass these address fields via createCard (refer here for sample)

2a. Capture address fields within the secure fields

Platform.SecureFields.create().then((form) => {

  // define styles for the fields
  const css = {
    '@font-face': {
      'font-family': 'PT Mono',
      'font-style': 'normal',
      'font-weight': '400',
      'font-display': 'swap',
      'src': 'local("PT Mono"), local("PTMono-Regular") url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")',
      'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
    },
    'font-family': '"PT Mono", monospace',
    boxSizing: "border-box",
    lineHeight: "1.5em",
    border: "#CCC 1px solid",
    color: "#31325F",
    width: "100%",
    height: "36px",
    padding: "0 10px",
    "&::placeholder": {
      color: "#CFD7E0",
    },
  };

  // initialize the iframe fields
  form.field("#card-name", {
    type: "text",
    fontSize: "14px",
    fontWeight: "200",
    name: "card_holder",
    placeholder: "Card holder",
    validations: ["required"],
    css,
  });
  form.field("#card-number", {
    type: "card-number",
    name: "card_number",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Card number",
    showCardIcon: true,
    validations: ["required", "validCardNumber"],
    css,
  });
  form.field("#card-cvc", {
    type: "card-security-code",
    name: "card_cvc",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "CVC",
    maxLength: 3,
    validations: ["required", "validCardSecurityCode"],
    css,
  });
  form.field("#card-expiry", {
    type: "card-expiration-date",
    name: "card_exp",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "MM / YY",
    validations: ["required", "validCardExpirationDate"],
    css,
  });
 form.field("#address-line1", {
    type: "text",
    name: "address_line1",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Address Line1",
    validations: ["required"],
    css,
  });
  form.field("#address-line2", {
    type: "text",
    name: "address_line2",
    placeholder: "Address Line2",
    css,
  });
  form.field("#address-city", {
    type: "text",
    name: "address_city",
    placeholder: "City",
    validations: ["required"],
    css,
  });
  form.field("#address-state", {
    type: "text",
    name: "address_state",
    placeholder: "State",
    validations: ["required"],
    css,
  });
  form.field("#address-country", {
    type: "text",
    name: "address_country",
    placeholder: "Country",
    validations: ["required"],
    css,
  });
  form.field("#cc-zip", {
    type: "zip-code",
    name: "address_zip",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Zip Code",
    validations: ["postal_code/us,ca"],
    css,
  });
  
  // Email or Phone number is required only for Visa 3DS
 
  // Cardholder Email
  form.field("#cc-email", {
    type: "email",
    name: "email",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Email",
    css,
  });
  // Country Code for Phone Number
  form.field("#cc-phonecountrycode", {
    type: "phone-number-cc",
    name: "phone_number.cc",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "CC",
    css,
  });
  // Phone Number
  form.field("#cc-phonenumber", {
    type: "phone-number-subscriber",
    name: "phone_number.subscriber",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Subscriber",
    css,
  });

  // attach a listener to the action button
  document.getElementById('btn-create-card').addEventListener("click", async (e) => {
    e.preventDefault();
    try {
      const cardObj = await form.createCard({
        manuallyEntered: true
      });
      console.log("data", cardObj);
      // for general purpose tokenization call await form.secureFields();
      document.getElementById("result").innerHTML = JSON.stringify(cardObj, null, 4);
    } catch (e) {
      console.log("error", e);
      document.getElementById("result").innerHTML = JSON.stringify(e);
    }
  });
  
});

2b. Capture address fields outside of secure fields, in your own form and you can pass the address info via createCard

In this scenario, you will capture the address fields in your own form and provide those values in the form.createCard function as shown below

Platform.SecureFields.create().then((form) => {

  // define styles for the fields
  const css = {
    '@font-face': {
      'font-family': 'PT Mono',
      'font-style': 'normal',
      'font-weight': '400',
      'font-display': 'swap',
      'src': 'local("PT Mono"), local("PTMono-Regular") url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")',
      'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
    },
    'font-family': '"PT Mono", monospace',
    boxSizing: "border-box",
    lineHeight: "1.5em",
    border: "#CCC 1px solid",
    color: "#31325F",
    width: "100%",
    height: "36px",
    padding: "0 10px",
    "&::placeholder": {
      color: "#CFD7E0",
    },
  };

  // initialize the iframe fields
  form.field("#card-name", {
    type: "text",
    fontSize: "14px",
    fontWeight: "200",
    name: "card_holder",
    placeholder: "Card holder",
    validations: ["required"],
    css,
  });
  form.field("#card-number", {
    type: "card-number",
    name: "card_number",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Card number",
    showCardIcon: true,
    validations: ["required", "validCardNumber"],
    css,
  });
  form.field("#card-cvc", {
    type: "card-security-code",
    name: "card_cvc",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "CVC",
    maxLength: 3,
    validations: ["required", "validCardSecurityCode"],
    css,
  });
  form.field("#card-expiry", {
    type: "card-expiration-date",
    name: "card_exp",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "MM / YY",
    validations: ["required", "validCardExpirationDate"],
    css,
  });
  
  // Email or Phone number is required only for Visa 3DS
  // Cardholder Email
  form.field("#cc-email", {
    type: "email",
    name: "email",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Email",
    css,
  });
  // Country Code for Phone Number
  form.field("#cc-phonecountrycode", {
    type: "phone-number-cc",
    name: "phone_number.cc",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "CC",
    css,
  });
  // Phone Number
  form.field("#cc-phonenumber", {
    type: "phone-number-subscriber",
    name: "phone_number.subscriber",
    successColor: "#4F8A10",
    errorColor: "#D8000C",
    placeholder: "Subscriber",
    css,
  });

  // attach a listener to the action button
  document.getElementById('btn-create-card').addEventListener("click", async (e) => {
    e.preventDefault();
    try {
      const cardObj = await form.createCard({
        manuallyEntered: true,
        address_line1: "line1",
        address_line2: "line2",
        address_city: "city",
        address_state: "CA",
        address_zip: "91205",
        address_country: "US"
      });
      console.log("data", cardObj);
      // for general purpose tokenization call await form.secureFields();
      document.getElementById("result").innerHTML = JSON.stringify(cardObj, null, 4);
    } catch (e) {
      console.log("error", e);
      document.getElementById("result").innerHTML = JSON.stringify(e);
    }
  });
  
});

Following sections are only applicable if you're tokenizing card data for payments. For general PII information, please refer to Using tokens .

Visa 3D Secure Update: Action Required

Partners must collect cardholder's mobile number OR email address during payment processing by January 20, 2025. Update existing tokens with this information before use (refer step 3 below for tokenizing payment details)

See Visa Secure Program Guide Updates for details. Contact Platform support with any questions you have.

3. Tokenize payment details

Depending on your account configuration, your tokenized card info can be made available as global or merchant specific.

Note from the example code above that SecureFields JS doesn’t automatically hook into any form events. Instead, you must explicitly tell it when you want to send the collected card data for tokenization.

As shown in the example above, the most straightforward approach is to create a form onSubmit handler or an element eventListener that serves as a trigger to delegate to SecureFields JS createCard() method. This method will in turn return the tokenized card object that you can safely store within your system.

When automatic Network Tokenization is activated on your account, any PAN data associated with it will automatically use a token provided by the card brand network.

4. Executing an auth transaction

After the SecureFields JS tokenizes your payment method, it is up to you to execute the actual transaction from your backend server environment. This is necessary because the browser is not a secure environment and should never contain your access secret (which is required to invoke the transactional portion of our API).

When the checkout form is submitted, extract the token parameter and use it to execute an auth and capture using the direct APIs:

curl https://<payengine-partner-server>/api/payment/auth \
  -H 'Authorization: Basic <partner_private_token>' \
  -H 'Content-Type: application/json' \
  -d '{
      "merchant_id": "YOUR_MERCHANT_ID",
      "data": {
              "transactionAmount": "109",
              "cardToken": "token_sanbox_2ljk534jh5v3h456klj245",
              "currency_code": "USD"
              }
      }'

The above call will authorize a payment method to be charged a specific amount and return an authorization id. No funds are taken with an auth – a follow-up capture transaction is required to actually move the funds.

5. Executing a capture transaction

To capture the amount, you must next call the capture API endpoint

curl https://<payengine-partner-server>/api/payment/capture \
  -H 'Authorization: Basic <partner_private_token>' \
  -H 'Content-Type: application/json' \
  -d '{
      "id": "<authorization_id>",
      "data": {
              "transactionAmount": "109",
              "tip": "1"
              }
      }'

the amount and currency_code are optional fields within the capture call if a partial capture is desired.

At this point, you should be able to see the posted transactions via the merchant's transactions page available via your partner portal.

6. Refund the transaction

To refund the amount, void or reverse the transaction you must make next call

curl https://<payengine-partner-server>/api/payment/return\
  -H 'Authorization: Basic <partner_private_token>' \
  -H 'Content-Type: application/json' \
  -d '{
      "id": "<authorization_id>",
      "data": {
              "transactionAmount": "109",
              "tip": "1"
              }
      }'

Implementing CSS for secure fields

To customize the appearance of secure fields in your payment form, you can add CSS to style them according to your needs. Here's a sample CSS snippet:

<html>

<head>
    <script
        src="https://console.payengine.co/js/1.0.0/securefields.min.js?key=pk_test_6tMrSVLiijTsqCQm3Xv6vZB91mbzQEGy"></script>
    <style>
        #cc-form .field {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 2.25rem;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        #cc-form .field iframe {
            border: 0 none transparent;
            height: 100%;
            vertical-align: middle;
            width: 100%;
        }
    </style>
</head>

<body>
    <form id="cc-form">
        <div>
            <label>Card Name</label>
            <div id="card-name" class="field"></div>
        </div>
        <div>
            <label>Card Number</label>
            <div id="card-number" class="field"></div>
        </div>
        <div>
            <label>Expire Date</label>
            <div id="card-expiry" class="field"></div>
        </div>
        <div>
            <label>CVC</label>
            <div id="card-cvc" class="field"></div>
        </div>
        <div>
            <label>ZIP</label>
            <div id="cc-zip" class="field"></div>
        </div>
        <div>
            <label>Email</label>
            <div id="cc-email" class="field"></div>
        </div>
        <div>
            <label>Country Code</label>
            <div id="cc-phonecountrycode" class="field"></div>
        </div>
        <div>
            <label>Phone</label>
            <div id="cc-phonenumber" class="field"></div>
        </div>
        <div>
            <button id="btn-create-card">Create Card</button>
        </div>
        <pre id="result">Submit to see result.</pre>
    </form>
    <script>
        Platform.SecureFields.create().then((form) => {

            // define styles for the fields
            const css = {
                '@font-face': {
                    'font-family': 'PT Mono',
                    'font-style': 'normal',
                    'font-weight': '400',
                    'font-display': 'swap',
                    'src': 'local("PT Mono"), local("PTMono-Regular") url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")',
                    'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
                },
                'font-family': '"PT Mono", monospace',
                boxSizing: "border-box",
                color: "#31325F",
                "&::placeholder": {
                    color: "#CFD7E0",
                },
            };

            // initialize the iframe fields
            form.field("#card-name", {
                type: "text",
                fontSize: "14px",
                fontWeight: "200",
                name: "card_holder",
                placeholder: "Card holder",
                validations: ["required"],
                css,
            });
            form.field("#card-number", {
                type: "card-number",
                name: "card_number",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "Card number",
                showCardIcon: true,
                validations: ["required", "validCardNumber"],
                css,
            });
            form.field("#card-cvc", {
                type: "card-security-code",
                name: "card_cvc",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "CVC",
                maxLength: 3,
                validations: ["required", "validCardSecurityCode"],
                css,
            });
            form.field("#card-expiry", {
                type: "card-expiration-date",
                name: "card_exp",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "MM / YY",
                validations: ["required", "validCardExpirationDate"],
                css,
            });
            form.field("#cc-zip", {
                type: "zip-code",
                name: "address_zip",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "Zip Code",
                validations: ["postal_code/us,ca"],
                css,
            });
            
          // Email or Phone number is required only for Visa 3DS
             
          // Cardholder Email
            form.field("#cc-email", {
                type: "email",
                name: "email",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "Email",
                css,
            });
          // Country Code for Phone Number
            form.field("#cc-phonecountrycode", {
                type: "phone-number-cc",
                name: "phone_number.cc",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "CC",
                css,
             });
          // Phone Number
              form.field("#cc-phonenumber", {
                type: "phone-number-subscriber",
                name: "phone_number.subscriber",
                successColor: "#4F8A10",
                errorColor: "#D8000C",
                placeholder: "Subscriber",
                css,
              });

         
     // attach a listener to the action button
            document.getElementById('btn-create-card').addEventListener("click", async (e) => {
                e.preventDefault();
                try {
                    console.log("form.createCard",form)
                    console.log("form.createCard",form.createCard)
                    const cardObj = await form.createCard({
                        manuallyEntered: true
                    });
                    console.log("data", cardObj);
                    // for general purpose tokenization call await form.secureFields();
                    document.getElementById("result").innerHTML = JSON.stringify(cardObj, null, 4);
                } catch (e) {
                    console.log("error", e);
                    document.getElementById("result").innerHTML = JSON.stringify(e);
                }
            });

        });
    </script>
</body>

</html>

SecureField JS with OAuth token

Before proceeding with this guide, ensure that you have already integrated with Platform OAuth 2.0. This setup requires obtaining a Merchant Session Token using an OAuth access token and providing a function (fetchAccessToken) when initializing the Platform library.

Load Platform library

We recommend using npm to install Platform, as shown in the following example. However, it is also possible to integrate Platform without npm.

Install payengine library from npm public registry:

npm install --save payengine

To use SecureField JS with an OAuth token, you must implement an endpoint on your server that retrieves a Merchant Session Token. This token allows SecureField JS to process payments securely.

Create a function that calls your server’s new endpoint (/session/token) to retrieve the Merchant Session Token:

import { loadPlatform } from "payengine";
import axios from "axios";

const fetchAccessToken = async () => {
    const { data } = await axios.get("/session/token", {
      withCredentials: true,
    });
    return data;
};

const payengineInstance = await loadPlatform({
  fetchAccessToken: fetchAccessToken
});

// Initialize SecureField JS here

If you are not using npm, you need to manually load the SecureField script in your HTML head and define the fetchAccessToken function globally.

Modify your HTML <head> tag to include the SecureField JS script. Instead of providing a public key, define an onload function that initializes SecureField.

<head>
  <script src="https://<payengine-partner-server>/js/1.0.0/securefields.min.js?onload=scriptLoaded"></script>
  
  <script>
    function scriptLoaded() {
      const fetchAccessToken = async () => {
          const { data } = await axios.get("/session/token", {
            withCredentials: true,
          });
          return data;
      };
      Platform.fetchAccessToken = fetchAccessToken;
      
      // initialize SecureField JS here
    }
  </script>
</head>

Once the payengine library is loaded and configured with fetchAccessToken, you can initialize the SecureField JS

Creating a Merchant Session Token

To interact with SecureField JS, you must obtain a short-lived Merchant Session Token. This requires calling the Platform API with your OAuth access token.

1. Implement a server-side endpoint

Your server should expose an endpoint (/session/token) that requests a Merchant Session Token from Platform using an OAuth access token:

app.get('/session/token', async function(req, res) {
    // Authenticate the user and retrieve the OAuth access token
    const accessToken = req.user.accessToken; // Example: retrieve from session
    const merchantId = req.user.merchantId; // Example: retrieve from session
    
    try {
        const { data } = await axios.post(
            `https://<payengine-partner-server>/api/merchant/${merchantId}/sessions`,
            {},
            {
                headers: {
                    Authorization: `Bearer ${accessToken}`
                }
            }
        );
        
        res.json(data);
    } catch (error) {
        console.error("Error fetching merchant session token:", error);
        res.status(500).json({ error: "Failed to fetch session token" });
    }
});

PreviousTransaction Detail NextSecureFields Bank Account

Last updated 4 months ago