Skip to main content

React Elements SDK

ReactNative 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.

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

An InputBTRef is an object that contains a reference to a sensitive value returned from a Basis Theory service call. Pass in an inputBTRef to the setValue method of an Element ref to set the value of that Element. 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>
</>
);
};