Payment-formatter NPM

payment-formatter

A flexible, lightweight (1.5kB), non-dependant library to format payment card input fields.

Install

$ npm install payment-formatter

Usage

import paymentFormatter from 'payment-formatter';

paymentFormatter({
  selector: 'input#card-number',
  inputType: 'cardNumber'
});
paymentFormatter({
  inputType: 'expiry',
  selector: 'input#card-expiry'
})
paymentFormatter({
  cardType: 'mastercard',
  inputType: 'cvc',
  selector: 'input#card-cvc'
})

or with pure HTML (useful for payment fields within an iframe):

<html>
  <body>
    <input id="card-number" auto-complete="cc-number" pattern="[0-9]*" placeholder="Card number" type="text">
    <input id="card-expiry" auto-complete="cc-expiry" pattern="[0-9]*" placeholder="Card expiry" type="text">
    <input id="card-cvc" auto-complete="cc-cvc" pattern="[0-9]*" placeholder="Card cvc" type="text">
    <script src="https://unpkg.com/payment-formatter@latest/umd/index.js"></script>
    <script>
      paymentFormatter({
        inputType: 'cardNumber',
        selector: 'input#card-number'
      })
      paymentFormatter({
        inputType: 'expiry',
        selector: 'input#card-expiry'
      })
      paymentFormatter({
        cardType: 'mastercard',
        inputType: 'cvc',
        selector: 'input#card-cvc'
      })
    </script>
  </body>
</html>