Skip to main content

Collect Data from Web

This guide will show you how to collect data from a web browser without touching the data.

Key concepts in this guide:

Getting Started​

To get started, you will need a Basis Theory account.

Next you will need a Public Application in order to initialize JavaScript Elements for your web page.

Click here to create a Public Application or login to your Basis Theory account and create a new application with the following settings:

  • Name - Collect Data from Web Guide
  • Application Type - Public
  • Permissions - token:create
Save the API Key from the created Public Application as it will be used later in this guide to initialize the form.

Setup the Project​

We need to create a new directory and add a few files to get started.

Run the following in your terminal:

mkdir collect-guide
cd collect-guide
touch index.html
touch index.js
npm init

Accept all of the default npm options when prompted.

This will create a new directory called collect-guide, create two new files (index.html, index.js), and setup npm packages.

Open the contents of the directory in a text editor or IDE of your choice.

Install the JavaScript Elements SDK​

We will need to install Basis Theory's JavaScript Elements SDK, which will render a secure iFrame for capturing the data.

To install the SDK you can choose either our ES module or CDN hosted bundle through a script tag. In this guide, we will utilize our ES Module:

npm install --save @basis-theory/basis-theory-js
If you are building a React application, be sure to check out our Collect Data with React guide.

Initialize the Web SDK​

Now we need to initialize Basis Theory JavaScript Elements. To do this, we will create an instance of BasisTheory with elements: true to dynamically loads Elements module in index.js:

import { BasisTheory } from '@basis-theory/basis-theory-js';

let bt;

(async () => {
  bt = await new BasisTheory().init('<API_KEY>', { elements: true });
})();
Be sure to replace <API_KEY> with the Public API Key you created in the Getting Started step.

Next we need to import our JavaScript file as a module within index.html:

<html>
  <body>
    <script type="module" src="index.js"></script>
  </body>
</html>

Add Your Form Components​

This step will add a Text Element component to our page.

First let's add a div to be the placeholder for where the Basis Theory Element will be injected:

<html>
  <body>
    <div id="exampleTextElement">

    <script type="module" src="index.js"></script>
  </body>
</html>

Next, we need to create a new Text Element and mount it to our div:

import { BasisTheory } from '@basis-theory/basis-theory-js';

let bt;
let textElement;

(async () => {
  bt = await new BasisTheory().init('<API_KEY>', { elements: true });

  textElement = bt.createElement('text', {
    targetId: 'exampleTextElement',
    placeholder: 'Input text'
  });

  textElement.mount('#exampleTextElement');
})();

This will create a new instance of a Text Element and when mounted to your <div>, it will inject an iFrame that is rendered by Basis Theory. The Basis Theory SDK will hold a reference to the Text Element which enables interactions with the underlying data without direct access to the value.

Let's verify our form now loads. We can leverage a tool like Parcel which will compile and launch our application:

npx parcel index.html

Open http://localhost:1234/ in your browser.

Tokenize the Text Value​

We want to be able to tokenize the value within the Text Element without exposing it to our web application. We will add a submit button for submitting the form and a <pre> element to hold the resulting token:

<html>
  <body>
    <div id="exampleTextElement">

    <button type="button" onclick="submit()">
      Submit
    </button>

    <pre id="result"></pre>

    <script type="module" src="index.js"></script>
  </body>
</html>

Within our JavaScript code, let's add a new submit function to tokenize the value of our Text Element.

import { BasisTheory } from '@basis-theory/basis-theory-js';

let bt;
let textElement;

(async () => {
  bt = await new BasisTheory().init('<API_KEY>', { elements: true });

  textElement = bt.createElement('text', {
    targetId: 'exampleTextElement',
    placeholder: 'Input text'
  });

  textElement.mount('#exampleTextElement');
})();

window.submit = async function submit() {
  try {
    const token = await bt.tokens.create({
      type: 'token',
      data: textElement
    });

    const result = document.querySelector('#result');

    result.innerHTML = JSON.stringify(token, null, 4);
  } catch (error) {
    console.error(error);
  }
}

When our form is submitted, Basis Theory's SDK will pass the value for the element reference. This will be securely submitted directly to the Create Token Endpoint. The resulting token is then surfaced to the client device.

Running the Example​

Following this guide, your resulting application should look like the following:

<html>
  <body>
    <div id="exampleTextElement">

    <button type="button" onclick="submit()">
      Submit
    </button>

    <pre id="result"></pre>

    <script type="module" src="index.js"></script>
  </body>
</html>

We will now run the application again with Parcel:

npx parcel index.html

Open http://localhost:1234/ in your browser to use the application.

Conclusion​

You can now capture any data without your application accessing the underlying value drastically reducing compliance and regulatory scope.

Try typing a value and clicking the submit button will securely send the data directly to Basis Theory and return you a token. The resulting token is displayed directly on the page.

Learn More​