Pago (tarjeta de crédito) generador de formularios con validación de entrada-payform

Vista prévia

Descripción

payform es un plugin de JavaScript para construir y validar un formulario de tarjeta de crédito en su sitio web de comercio electrónico.

La biblioteca formatea y valida automáticamente los números de tarjeta de crédito, fecha de caducidad y CVC (código de verificación de tarjeta).

También tiene la capacidad de devolver el tipo de tarjeta después de introducir los números de la tarjeta de crédito.

El versión de jQuery también está disponible.

Supported credit cards:

• Visa
• Mastercard
• American Express
• Money Club
• Descubrir
• Unionpay
• Jcb
• Visa Electron
• Maestro
• Forbrugsforeningen
• Dankort
• Tarjeta de crédito personalizada

Funcionamiento

Cree los campos de entrada número de tarjeta, expiración y CVC de la siguiente manera:

<label for="ccnum">Card Number</label>
<input placeholder="---- ---- ---- ----" type="text" size="19" name="ccnum" id="ccnum">

<label for="expiry">Expiration</label>
<input placeholder="-- / --" size="7" type="text" name="expiry" id="expiry">

<label for="cvc">CVC</label>
<input placeholder="---"
size="4" type="text" name="cvc" id="cvc">

Inserte el código JavaScript de payform en la parte inferior de la página.

<script src="dist/payform.js"></script>

Inicialice el formulario de pago en las entradas de su tarjeta de crédito.

var ccnum
= document.getElementById('ccnum'),


expiry = document.getElementById('expiry'),


cvc

= document.getElementById('cvc'),

payform.cardNumberInput(ccnum);
payform.expiryInput(expiry);
payform.cvcInput(cvc);

Validate the form inputs.

payform.validateCardNumber(ccnum.value);
payform.validateCardExpiry(expiryObj);
payform.validateCardCVC(cvc.value, type.innerHTML);

Devuelva el tipo de tarjeta y la caducidad.

payform.parseCardType(number)
payform.parseCardExpiry(string)

También se le permite crear reglas de tarjetas de crédito personalizadas como estas:

{

// card type

type: 'custom',


// Regexto identify the card type

pattern: /^5[0-5]/,


// card number lengths.

length: [16],


// valid card CVC lengths.

cvcLength: [3],


// whether a valid card number should satisfy the Luhn check.

luhn: true,


// Regex to format the card number

format: /(\d{1,4})/g
}

Registro de cambios

v1.2.4 (07/19/2018)

• Soluciona el problema de cortar los últimos 2 dígitos de algunas cartas