Link Search Menu Expand Document

Collect Credit Cards with React

Once you’ve completed this guide, you will have learned how your React application can use our Elements to collect and store credit card information on the Basis Theory platform. This simple task enables you to retain control of your card data and enables the use of credit card data with any third party as if you had the data stored in your own database.

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 new Elements Application with the token:pci: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 CheckoutForm component and add it inside the BasisTheoryProvider in your App content.

Declare a CardElement inside it and call the tokenization method tokens.create passing the token’s type (card) and the underlying card element instance:

import { CardElement, useBasisTheory } from '@basis-theory/basis-theory-react';

export const CheckoutForm = () => {
  const { bt } = useBasisTheory();

  const submit = async () => {
    try {
      const token = await bt.tokens.create({
        type: 'card',
        data: bt?.getElement('myCard'),
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
        <CardElement id="myCard" />
        <button
          id="submit_button"
          type="button"
          onClick={submit}
        >
          Submit
        </button>
    </>
  );
};

Success! 🎉 Your React application is now collecting and storing credit cards in Basis Theory platform.

Next steps

The Token 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:

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:

  • Disable the “Submit” <button> while the CardElement information is not complete, by listening to the onChange event;
  • Disable the CardElement and “Submit” button during the tokenization request inside the submit function;
  • Display the full token 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.