Collect Customer Data (PII) with React
Basis Theory is built to handle any payload of data you can serialize. Once you’ve completed this guide, you’ll know how to use our React package to of how to collect and secure your customer’s PII (Personally Identifiable Information) data in 3 simple steps with our Elements, keeping it safe and secure.
If you’d like to follow along with this guide from scratch, we suggest creating a new React sandbox using codesandbox.io and getting started from there! Want to jump right into our sample app? Find it here!
Let’s code
To start, you’ll need a Elements
Application with the token:pii:create
permission. Click here to create one.
Install our dedicated React package:
npm install --save @basis-theory/basis-theory-react
Initialize the Basis Theory SDK passing the API Key to the useBasisTheory
hook and wrap your App
contents with a BasisTheoryProvider
:
import {
useBasisTheory,
BasisTheoryProvider,
} from '@basis-theory/basis-theory-react';
function App() {
const { bt } = useBasisTheory(ELEMENTS_API_KEY, {
elements: true,
});
return (
<BasisTheoryProvider bt={bt}>
<!-- rest of app code goes here -->
</BasisTheoryProvider>
);
}
export default App;
Create a RegistrationForm
component and add it somewhere in your App
content.
Declare two TextElement
tags inside it, one for the “Full Name”, and the other for the “Social Security Number”; then call the tokenize
method passing the underlying elements instances:
import { TextElement, useBasisTheory } from '@basis-theory/basis-theory-react';
export const RegistrationForm = () => {
const { bt } = useBasisTheory();
const submit = async () => {
try {
const response = await bt.tokenize({
fullName: bt.getElement('fullName'),
ssn: {
type: 'social_security_number',
data: bt.getElement('ssn'),
},
});
} catch (error) {
console.error(error);
}
};
return (
<>
<TextElement id="fullName" />
<TextElement id="ssn" />
<button
id="submit_button"
type="button"
onClick={submit}
>
Submit
</button>
</>
);
};
Success! 🎉 Your application is now collecting and storing PII in Basis Theory platform.
Next steps
You can further customize the TextElement
props to best suit your needs.
The Tokens you’ve created from your frontend application can be used in a variety of ways from within your system, check out a few of those below:
- Fetched later in your servers, using a Server-to-Server Application Key (click here to create one) to call Get a Token API;
- Used to call on of our Reactors to process that data. Some use cases are:
- Integrating with third party KYC platforms, such as Alloy;
- Pull credit reports for your customers without touching their data;
- Send e-mails or instant messages to communication channels;
- Pull background checks;
- Make a third party API request with the raw data through our Proxy.
See it in action
The example below uses a few of the Element’s user experience features to ensure the best experience to your customers:
- Pass a
mask
to thessn
field, restricting user input to digits only and formatting the output; - Use a
transform
option in thessn
field to strip out dash ‘-‘ characters from the tokenized data; - Disable the “Submit”
<button>
while thefullName
field is empty or thessn
field is notcomplete
, by listening to theironChange
event; - Disable both inputs and the “Submit”
button
during the tokenization request inside thesubmit
function; - Display the full stringified
tokens
response; - Log any tokenization errors to the
console
;
See it running and the code that drives it below. Want to experience the sandbox yourself? Check it out here.