Skip to main content

React Native Elements SDK

React Native SDK

basis-theory-react-native

Basis Theory React Native is an open source package designed to allow you to quickly integrate Element features in your mobile application. Every Element is a thin wrapper around the React Native TextInput component, which makes its interface similar to working directly with a regular TextInput.

Utilizing these Elements is as simple as declaring them as a typical React Native Components and passing the required props.

Before You Begin

This SDK requires the use of an API Key associated with a Public Application, which only allows token:create or token:update permissions to mitigate the risk that these API keys may be publicly exposed within your frontend applications.

To create one, login into our Portal and create a new "Public" Application with the permissions you require.

Considerations

Basis Theory React Native uses conventional camel case for most methods and converts these properties to snake case when sending requests to the API. One notable exception to this is the Tokenize method which uses snake case for the request body.

Installation

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

Using an Element

import React, { useRef } from "react";
import { SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from "react-native";
import { BTRef, CardNumberElement } from "@basis-theory/basis-theory-react-native";

const App = () => {
const ref = useRef<BTRef>(null);

return (
<SafeAreaView>
<StatusBar />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={styles.viewContainer}>
<CardNumberElement btRef={ref} placeholder="Card Number" style={styles.cardNumber} />
</View>
</ScrollView>
</SafeAreaView>
);
};

const styles = StyleSheet.create({
cardNumber: {
backgroundColor: "#eeeeee",
borderColor: "blue",
borderWidth: 2,
color: "purple",
height: 40,
margin: 12,
padding: 10,
},
viewContainer: {
display: "flex",
flexDirection: "column",
marginTop: 32,
},
});

export default App;

Using Refs

Refs are a way to access React component instances. You can pass in a ref into the btRef prop into any Basis Theory Element to store or receive the Element instance, to tokenize their value or call one of its methods. For security reasons, we don't return the underlying TextInput ref, but instead our own instance of ref. The ref that's returned is an instance of BTRef that has the following methods under the current property:

MethodsSignatureDescription
clear() => voidClears the value from the underlying TextInput
focus() => voidFocuses the underlying TextInput
blur() => voidBlurs the underlying TextInput
setValue(inputBTRef: InputBTRef) => voidSets the value of the Element. The function takes in an InputBTRef which is returned from a Basis Theory service call
month() => voidData-parsing method that resolves to the month value of the input date, where "January" = 1.
year() => voidData-parsing method that resolves to the four-digit year value of the input date.
import React, { useRef } from "react";
import { Button, CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement, 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 clear = async () => {
cardNumberRef.current.clear();
cardExpirationDateRef.current.clear();
cardVerificationCodeRef.current.clear();
};

return (
<>
<CardNumberElement btRef={cardNumberRef} placeholder="Card Number" />
<CardExpirationDateElement btRef={cardExpirationDateRef} placeholder="Card Expiration Date" />
<CardVerificationCodeElement btRef={cardVerificationCodeRef} placeholder="CVC" />
<div>
<Button title="Clear" onPress={clear} />
</div>
</>
);
};

InputBTRef and InputBTDateRef

An InputBTRef is an object that contains a reference to a sensitive value returned from a Basis Theory service call. To set the value of an element, pass in an InputBTRef to the setValue method of an Element ref as shown below:

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 { bt } = useBasisTheory("<PUBLIC API KEY>");

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>
</>
);
};