A React Hook & Container to help with payment credit card input fields.
# Yarn
$ yarn add react-payment-inputs
# NPM
$ npm i react-payment-inputs --saveimport React from 'react';
import { usePaymentInputs } from 'react-payment-inputs';
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>
);
}
Author: medipass
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/medipass/react-payment-inputs
License: MIT