Services

Initialization

  import { useBasisTheory } from "@basis-theory/basis-theory-react-native";
  ...
  const { bt } = useBasisTheory('<PUBLIC API KEY>');

Methods

Create a Session

To retrieve sensitive data in React Native, you'll need to create a session and use its sessionKey for making requests securely. To accomplish this, construct your createSession request like this:

const { bt } = useBasisTheory('<PUBLIC API KEY>');

const session = await bt?.sessions.create('<PUBLIC API KEY>');;

Parameters

Parameter	Type	Required	Description
apiKey	string	false	The API key to use for this request. Defaults to the globally set API key.

The response returns a session.

Get token by ID

This function wraps the get a token API endpoint to retrieve a single token. The token's data is transformed to an InputBTRef which you can use to set the value of your elements without touching the plaintext value and pulling your application into compliance scope.

const { bt } = useBasisTheory('<PUBLIC API KEY>');

const token = await bt?.tokens.getById(
    '<YOUR TOKEN ID>'
);

Parameters

Parameter	Type	Required	Description
id	string	true	The ID of the token you want to retrieve.
apiKey	string	false	The session API key to use for this request. Defaults to the globally set API key.

The response returns a token. All values in the data object in the response is converted to an InputBTRef. This means that you can traverse through the data object and set the value of your elements without touching the plaintext value. Below is an example of how to do that.

import React, { useRef } from 'react';
import { Button } from 'react-native';
import {
  CardNumberElement,
  BTRef,
} from '@basis-theory/basis-theory-react-native';

const MyForm = () => {
  const { bt } = useBasisTheory('<PUBLIC API KEY>');

  const cardNumberRef = useRef<BTRef>(null);

  const getCardNumber = async () => {
  const token = await bt?.tokens.getById(
      '<YOUR TOKEN ID>'
  );

    cardNumberRef.current.setValue(token.data.number);
  };

  return (
    <>
      <CardNumberElement
        btRef={cardNumberRef}
        placeholder="Card Number"
      />
      <div>
        <Button type="button" onPress={getCardNumber}/>
      </div>
    </>
  );
};

The data attribute in the token returned by the getTokenById method is not the actual data, but a synthetic representation of the sensitive detokenized data.

Token attributes such as metadata are directly accessible from the retrieve response as they are considered non-sensitive.

proxy

Proxy provides a simple way to retrieve data back into an element utilizing our proxy service.

const { bt } = useBasisTheory('<PUBLIC API KEY>');

const proxyResponse = await bt?.proxy({
  headers: {
    'BT-API-KEY': '<SESSION_API_KEY>',
    'BT-PROXY-KEY': '<YOUR API KEY>',
    'Content-Type': 'application/json',
  },
  body: {...},
  method: 'post',
  path: '/my-proxy',
  query: {
      query1: 'value1',
      query2: 'value2',
  },
});

Parameters

Parameter	Type	Required	Description
method	string	true	The HTTP method to invoke for the proxy request ("post", "put", "patch", "get", "delete")
headers	object	false	The headers to pass into the proxy request
body	object	false	The request body to pass into the proxy request
query	object	false	The query params to pass into the proxy request
path	string	false	The path to pass onto the end of the proxy destination URL

The response returns a proxu. All values in the response is converted to an InputBTRef. This means that you can traverse through the proxy response and set the value of your elements without touching the plaintext value. Below is an example of how to do that.

import React, { useRef } from 'react';
import {
  CardNumberElement,
  CardExpirationDateElement,
  CardVerificationCodeElement,
  BasisTheoryElements,
  BTRef,
} from '@basis-theory/basis-theory-react-native';

const MyForm = () => {
  const { bt } = useBasisTheory('<PUBLIC API KEY>');

  const cardNumberRef = useRef<BTRef>(null);
  const cardExpirationDateRef = useRef<BTRef>(null);
  const cardVerificationCodeRef = useRef<BTRef>(null);

  const getCardData = async () => {
    const proxyResponse = await bt?.proxy({
      headers: {
        'BT-API-KEY': '<SESSION_API_KEY>',
        'BT-PROXY-KEY': '<YOUR PROXY KEY>',
      },
      method: 'post',
    });

    cardNumberRef.current?.setValue(proxyResponse.json.cardNumber);
    cardExpirationDateRef.current?.setValue(proxyResponse.json.expDate);
    cardVerificationCodeRef.current?.setValue(proxyResponse.json.cvc);
  };

  return (
    <>
      <CardNumberElement
        btRef={cardNumberRef}
        placeholder="Card Number"
      />
      <CardExpirationDateElement
        btRef={cardExpirationDateRef}
        placeholder="Card Expiration Date"
      />
      <CardVerificationCodeElement
        btRef={cardVerificationCodeRef}
        placeholder="CVC"
      />
      <div>
        <button type="button" onClick={getCardData}>
          "Get Card Data"
        </button>
      </div>
    </>
  );
};