Link Search Menu Expand Document

Tokenize customer data in browser

Basis Theory is built to handle any payload of data you can serialize. The following guide will show you how you can easily tokenize your customer’s PII (Personally Identifiable Information) data to keep it safe and secure.

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 decrypted Token on your server

Tokenize your PII data in the browser

You’ll need a Client-side Application created with the token:create permission for this step.

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({
    data: {
      name,
      ssn,
      phone
    }
  });
}

Retrieve your decrypted Token on your server

You’ll need a server-to-server api application created with the token:decrypt permission for this step.

We suggest only decrypting Token data via your server-side code, this will ensure your server-to-server 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.retrieveDecrypted(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.