Validación y formateo de entradas de tarjeta de crédito con Payment. js

Vista prévia

Descripción

Payment. js es una biblioteca independiente de JavaScript para comercio electrónico o sitios web de negocios que le ayudan a validar y formatear los elementos de formulario de tarjeta de crédito.

Actualmente es compatible con Visa, MasterCard, American Express, Discover, JCB, Diners Club, maestro, laser y UnionPay.

Características

• Formato de número de tarjeta
• Formato de caducidad
• Formato CVC
• Restringir numérico
• Validate inputs while submitting.

Funcionamiento

Cargue el Payment. js en el documento HTML.

<script src="lib/payment.js"></script>

Cree un formulario de tarjeta de crédito.

<form novalidate autocomplete="on">

<h2>Formato de número de tarjeta</h2>

<input type="text" class="cc-number" pattern="\d*" x-autocompletetype="cc-number" placeholder="Card number" required>

<h2>Formato de caducidad</h2>

<input type="text" class="cc-exp" pattern="\d*" x-autocompletetype="cc-exp" placeholder="Expires MM/YY" required maxlength="9">

<h2>Formato CVC</h2>

<input type="text" class="cc-cvc" pattern="\d*" x-autocompletetype="cc-csc" placeholder="Security code" required
autocomplete="off">

<h2>Restringir numérico</h2>

<input type="text" data-numeric>

<h2 class="validation"></h2>

<button type="submit">Submit</button>
</form>

El JavaScript para habilitar la validación.

var J = Payment.J,

numeric = document.querySelector('[data-numeric]'),

number = document.querySelector('.cc-number'),

exp = document.querySelector('.cc-exp'),

cvc = document.querySelector('.cc-cvc'),

validation = document.querySelector('.validation');

Payment.restrictNumeric(numeric);
Payment.formatCardNumber(number);
Payment.formatCardExpiry(exp);
Payment.formatCardCVC(cvc);

document.querySelector('form').onsubmit = function(e) {

e.preventDefault();

J.toggleClass(document.querySelectorAll('input'), 'invalid');

J.removeClass(validation, 'passed failed');


var cardType = Payment.fns.cardType(J.val(number));


J.toggleClass(number, 'invalid', !Payment.fns.validateCardNumber(J.val(number)));

J.toggleClass(exp, 'invalid', !Payment.fns.validateCardExpiry(Payment.cardExpiryVal(exp)));


J.toggleClass(cvc, 'invalid', !Payment.fns.validateCardCVC(J.val(cvc), cardType));


if (document.querySelectorAll('.invalid').length) {


J.addClass(validation, 'failed');

} else {


J.addClass(validation, 'passed');

}
}

Registro de cambios

v2.3.0 (06/14/2018)

• actualizar