@basis-theory/basis-theory-react NPM

Basis Theory React

A thin React wrapper for Basis Theory JS SDK.

Installation

npm install --save @basis-theory/basis-theory-react

Using Yarn

yarn add @basis-theory/basis-theory-react

Documentation

For a complete list of endpoints and examples, please refer to our React docs

Usage

Initialization

Initializing the SDK is done via calling the useBasisTheory hook with parameters:

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

export default function MyWrapper() {
  const { bt, error } = useBasisTheory('<Public API Key>'); // replace with your application key

  // instance stays undefined during initialization
  if (bt) {
    // able to call BasisTheory methods
  }

  if (error) {
    // initialization error
  }
}

Context Provider

You can pass the BasisTheoryReact instance down to your component tree using BasisTheoryProvider, and access it later calling the useBasisTheory hook without any parameters:

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

const App = () => {
  const { bt } = useBasisTheory('<Public API Key>', {
    elements: true,
  });

  return (
    <BasisTheoryProvider bt={bt}>
      <MyComponent />
    </BasisTheoryProvider>
  );
};

const MyComponent = () => {
  // calling this hook with no attributes grabs the instance from Context
  const { bt } = useBasisTheory();

  return <div>My content</div>;
};

Elements

Elements capabilities are available when passing elements: true in initialization options.

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

const App = () => {
  const { bt } = useBasisTheory('<Public API Key>', {
    elements: true,
  });

  return (
    <BasisTheoryProvider bt={bt}>
      <MyComponent />
    </BasisTheoryProvider>
  );
};

const MyComponent = () => {
  // calling this hook with no attributes grabs the instance from Context
  const { bt } = useBasisTheory();

  return <TextElement id="myInput" />;
};