A React Hook to help with payment card input fields.
npm install react-native-payment-inputsReact 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:
``bash`
yarn add react-native-svg react-native-payment-inputs
`javascript
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 (
<>
{...getCardImageProps()}
/>
onChangeText: setCardNumber,
value: cardNumber,
/ ...extras go here /
})}
/>
onChangeText: setExpiry,
value: expiry,
})}
/>
onChangeText: setCvc,
value: cvc,
})}
/>
);
}
``