Payment Credit Card Input For React

A React Hook & Container to help with payment credit card input fields.

Install & Import:

# Yarn
$ yarn add react-payment-inputs

# NPM
$ npm i react-payment-inputs --save

import React from 'react';
import { usePaymentInputs } from 'react-payment-inputs';

Basic Usage:

export default function PaymentInputs() {
  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps } = usePaymentInputs();
  return (
    <div>
      <input {...getCardNumberProps({ onChange: handleChangeCardNumber })} value={cardNumber} />
      <input {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />
      <input {...getCVCProps({ onChange: handleChangeCVC })} value={cvc} />
      {meta.isTouched && meta.error && <span>Error: {meta.error}</span>}
    </div>
  );
}

Preview: