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:
Download Details:
Author: medipass
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/medipass/react-payment-inputs
License: MIT