Elements Components

CardNumberElement

The CardNumberElement component features a card number input, by wrapping the React Native TextInput component, which makes its interface similar to working directly with a regular TextInput.

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;

Properties

Property	Required	Type	Description
btRef	false	object/function	Callback ref function to store/receive the Element instance. Review the using refs section for more information
style	false	object	ReactNative styles used to customize the Element appearance
editable	false	boolean	Boolean used to set the editable attribute of the Element
placeholder	false	string	String used to customize the placeholder attribute of the Element

Methods

The methods available to CardNumberElement can be accessed through the refs. Review the using refs section for more information.

Masking

Element masks enable user input to be restricted and formatted to meet a pre-defined format. The CardNumberElement automatically sets a mask based on the card brand.

Card Brands

The first several digits of the card number are analyzed as the user is typing to determine the card brand. The brand is used to automatically set a mask to a brand-specific format.

Supported card brands are defined in the table below:

Brand	Identifier	Card Number Digits	CVC Digits
American Express	americanExpress	15	4
Diners Club	dinersClub	14, 16, 19	3
Discover	discover	16, 19	3
Elo	elo	16	3
Hiper	hiper	16	3
HiperCard	hipercard	16	3
JCB	jcb	16-19	3
Maestro	maestro	12-19	3
Mastercard	mastercard	16	3
MIR	mir	16-19	3
UnionPay	unionPay	14-19	3
Visa	visa	16, 18, 19	3

Some card brands have issued card numbers with multiple lengths. The Card Number Digits column documents all acceptable card number lengths for the brand (in number of digits, excluding formatting characters).

CardExpirationDateElement

The CardExpirationDateElement component features a card number input, by wrapping the React Native TextInput component, which makes its interface similar to working directly with a regular TextInput.

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

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

  return (
    <SafeAreaView>
      <StatusBar />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.viewContainer}>
          <CardExpirationDateElement
            btRef={ref}
            placeholder="Card Expiration Date"
            style={styles.cardExpiration}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

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

export default App;

Properties

Property	Required	Type	Description
btRef	false	object/function	Callback ref function to store/receive the Element instance. Review the using refs section for more information
style	false	object	ReactNative styles used to customize the Element appearance
editable	false	boolean	Boolean used to set the editable attribute of the Element
placeholder	false	string	String used to customize the placeholder attribute of the Element

Methods

The methods available to CardExpirationDateElement can be accessed through the refs. Review the using refs section for more information.

Masking

Element masks enable user input to be restricted and formatted to meet a pre-defined format. The CardExpirationDateElement automatically sets a mask of MM/YY.

CardVerificationCodeElement

The CardVerificationCodeElement component features a card number input, by wrapping the React Native TextInput component, which makes its interface similar to working directly with a regular TextInput.

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

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

  return (
    <SafeAreaView>
      <StatusBar />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.viewContainer}>
          <CardVerificationCodeElement
            btRef={ref}
            placeholder="CVC"
            style={styles.cvc}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

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

export default App;

Properties

Property	Required	Type	Description
btRef	false	object/function	Callback ref function to store/receive the Element instance. Review the using refs section for more information
style	false	object	ReactNative styles used to customize the Element appearance
editable	false	boolean	Boolean used to set the editable attribute of the Element
placeholder	false	string	String used to customize the placeholder attribute of the Element

Methods

The methods available to CardVerificationCodeElement can be accessed through the refs. Review the using refs section for more information.

Masking

Element masks enable user input to be restricted and formatted to meet a pre-defined format. The CardVerificationCodeElement automatically sets a mask of 4 digits.