React Native's spiritual successor to react-payment-inputs. But only in spirit; the invocation signatures are fairly different.
react-native-payment-inputs are a set of UI agnostic hooks to easily implement the functionality of formatting and validating debit and credit card input fields.
Using Yarn:
yarn add react-native-svg react-native-payment-inputsThe usePaymentInputs hook is likely all you'll need to enable your app to start accepting card payments:
import React, {useState} from "react";
import {TextInput} from "react-native";
import Svg from "react-native-svg";
import {usePaymentInputs} from "react-native-payment-inputs";
export default function App() {
const [cardNumber, setCardNumber] = useState("4444");
const [expiry, setExpiry] = useState("");
const [cvc, setCvc] = useState("");
const {
getCardNumberProps,
getCardImageProps,
getExpiryProps,
getCvcProps,
meta: {
cardType,
erroredInputs,
touchedInputs,
},
} = usePaymentInputs();
return (
<>
<Svg
style={{width: 50, height: 30}}
{...getCardImageProps()}
/>
<TextInput
{...getCardNumberProps({
onChangeText: setCardNumber,
value: cardNumber,
/* ...extras go here */
})}
/>
<TextInput
{...getExpiryProps({
onChangeText: setExpiry,
value: expiry,
})}
/>
<TextInput
{...getCvcProps({
onChangeText: setCvc,
value: cvc,
})}
/>
</>
);
}