React Elements SDK

ReactNative SDK

basis-theory-react-native

Loading Stars

Loading Contributors

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

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

yarn

yarn add @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:

Methods	Signature	Description
clear	() => void	Clears the value from the underlying TextInput
focus	() => void	Focuses the underlying TextInput
blur	() => void	Blurs the underlying TextInput
setValue	(inputBTRef: InputBTRef) => void	Sets 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 { 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>
    </>
  );
};