Skip to main content

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

ParameterTypeRequiredDescription
apiKeystringfalseThe 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

ParameterTypeRequiredDescription
idstringtrueThe ID of the token you want to retrieve.
apiKeystringfalseThe 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

ParameterTypeRequiredDescription
methodstringtrueThe HTTP method to invoke for the proxy request ("post", "put", "patch", "get", "delete")
headersobjectfalseThe headers to pass into the proxy request
bodyobjectfalseThe request body to pass into the proxy request
queryobjectfalseThe query params to pass into the proxy request
pathstringfalseThe 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>
</>
);
};