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
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
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 });
})();
<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:
- index.html
- index.js
<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>
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);
}
}
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.