Link Search Menu Expand Document

Collect Customer Data (PII) with JavaScript

Basis Theory is built to handle any payload of data you can serialize. The following guide shows how to collect and secure Personal Identifiable Information data in 3 simple steps, keeping it safe and secure.

Using React? Check out the Collect Customer Data (PII) with React Guide.

Table of contents

  1. Tokenize your PII data in the browser
    1. Collect data on your frontend application
    2. Tokenize the data with our SDK.
  2. Retrieve your Token on your server

Tokenize your PII data in the browser

To start, you’ll need a Public Application with the token:pii:create permission. Click here to create one.

To get started, you’ll need to first start creating tokens out of your customer data. You are able to use our basistheory-js SDK to take values from your frontend and begin tokenizing the data. (You’re also able to create these tokens from your server-side by using the same tokenization code.)

Collect data on your frontend application

<div id="customer_form">
  <div class="row">
    <label for="name">Name</label>
    <input id="name" placeholder="Jane Doe" />
  </div>
  <div class="row">
    <label for="phone">Phone</label>
    <input id="phone" placeholder="+55 (55) 55555-5555" />
  </div>
  <div class="row">
    <label for="ssn">"Gov't Id"</label>
    <input id="ssn" placeholder="555-55-5555" />
  </div>
  <button id="submit_button" type="button" onclick="submit()">
    Submit
  </button>
</div>

Tokenize the data with our SDK.

async function submit() {
  const name = document.getElementById("name").value;
  const ssn = document.getElementById("ssn").value;
  const masked_ssn = ssn.substring(ssn.length - 4)
  const phone = document.getElementById("phone").value;

  const bt = await BasisTheory.init('your_api_key');
  const token = await bt.tokens.create({
    type: 'token',
    data: {
      name,
      ssn,
      phone
    },
    privacy: {
      classification: 'pii'
    }
  });
}

In the previous example, we are overriding the token’s privacy settings to specify a classification of pii, which is the type of data we are tokenizing. If we omit this, the default classification general would be used.

Retrieve your Token on your server

You’ll need a private application created with the token:pii:read:high permission for this step. Click here to create one.

We suggest only reading Token data via your server-side code, this will ensure your private application keys are never visible in the browser and your sensitive customer data is only revealed to your servers.

const bt = new BasisTheory();
await bt.init(SERVER_KEY);

const token = await bt.tokens.retrieve(customerTokenId);

return token;

See it in action

See a sample and the code that drives it below. Want to experience the sandbox yourself? Check it out here.