react-native-payment-inputs

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.

🚀 Installing

Using Yarn:

yarn add react-native-svg react-native-payment-inputs

✍️ Usage

The 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,
        })}
      />
    </>
  );
}

✌️ License

MIT