@basis-theory/basis-theory-react
TypeScript icon, indicating that this package has built-in type declarations

1.14.0 • Public • Published

Basis Theory React

Version Downloads Verify

A thin React wrapper for Basis Theory JS SDK.

Installation

Using Node Package Manager

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('key_N88mVGsp3sCXkykyN2EFED'); // 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('key_N88mVGsp3sCXkykyN2EFED', {
    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('key_N88mVGsp3sCXkykyN2EFED', {
    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" />;
};

Development

The provided scripts with the SDK will check for all dependencies, build the solution and run all tests.

Dependencies

Build the SDK and run Tests

Run the following command from the root of the project:

make verify

Keywords

none

Install

DownloadsWeekly Downloads

7,231

Version

1.14.0

License

Apache-2.0

Unpacked Size

54.3 kB

Total Files

33

Last publish

Collaborators

  • kevinperaza-bt
  • justjordant
  • jleon15
  • lcschy
  • briangonzalezatbt
  • dhudec
  • davi.basistheory
  • armsteadj1
  • matthew_basistheory
  • bt-platform