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!

This guide is for collecting cards using the single CardElement. In case you prefer to have the card number, expiration date and cvc each in separate elements, check the docs on how to use them here or check out our sample app here.

Let’s code

To start, you’ll need a new Public 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.

Create a ref that will be used to store the underlying elements instance.

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 { useRef } from 'react';
import { CardElement, useBasisTheory } from '@basis-theory/basis-theory-react';

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

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

  return (
    <>
        <CardElement id="myCard" ref={cardRef}/>
        <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.