Services

Static Fields

You can set your API key globally for BasisTheoryElements through the static apiKey field.

BasisTheoryElements.apiKey = '<YOUR PUBLIC BT API KEY>'

All service method calls take an optional apiKey should you need to override the globally set apiKey.

Methods

createSession

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 session = await BasisTheoryElements.createSession(
    '<YOUR PUBLIC BT 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.

getTokenById

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 token = await BasisTheoryElements.getTokenById(
    '<YOUR TOKEN ID>',
    '<YOUR SESSION API KEY>',
);

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,
  BasisTheoryElements,
  BTRef,
} from '@basis-theory/basis-theory-react-native';

const MyForm = () => {
  const cardNumberRef = useRef<BTRef>(null);

  const getCardNumber = async () => {
    const token = await BasisTheoryElements.getTokenById('<TOKEN ID FOR CUSTOMER>', '<YOUR SESSION API KEY>');

    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 proxyResponse = await BasisTheoryElements.proxy({
  headers: {
    'BT-API-KEY': '<YOUR 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 cardNumberRef = useRef<BTRef>(null);
  const cardExpirationDateRef = useRef<BTRef>(null);
  const cardVerificationCodeRef = useRef<BTRef>(null);

  const getCardData = async () => {
    const proxyResponse = await BasisTheoryElements.proxy({
      headers: {
        'BT-API-KEY': '<YOUR 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>
    </>
  );
};