Biblioteca JS pequeña para crear forma de pago interactiva-DatPayment

Vista prévia

Descripción

DatPayment es una biblioteca de JS ligera que se utiliza para crear un formulario de pago interactivo que permite al usuario escribir información de la tarjeta de crédito de una manera conveniente. Requiere la conocida biblioteca < a href = "https://github.com/stripe" > stripe. js .

Características

• Auto intercambia la imagen de la tarjeta de crédito basada en su entrada.
• Formatea los números de tarjetas de crédito.
• Validates the credit card numbers and expiration dates.

Funcionamiento

Coloque la hoja de estilo principal DatPayment. CSS en la sección Head de la página HTML.

<link rel="stylesheet" href="DatPayment.css">

<form action="/" method="POST" id="payment-form" class="datpayment-form">

<div class="dpf-title">



Payment by credit card



<div class="accepted-cards-logo"></div>

</div>

<div class="dpf-card-placeholder"></div>

<div class="dpf-input-container">



<div class="dpf-input-row">





<label class="dpf-input-label">Credit Card Number</label>





<div class="dpf-input-container with-icon">







<span class="dpf-input-icon"><i class="fa fa-credit-card" aria-hidden="true"></i></span>







<input type="text" class="dpf-input" size="20" data-type="number">





</div>



</div>




<div class="dpf-input-row">





<div class="dpf-input-column">







<input type="hidden" size="2" data-type="exp_month" placeholder="MM">







<input type="hidden" size="2" data-type="exp_year" placeholder="YY">








<label class="dpf-input-label">Expiration Date</label>







<div class="dpf-input-container">









<input type="text" class="dpf-input" data-type="expiry">







</div>





</div>





<div class="dpf-input-column">







<label class="dpf-input-label">Code</label>







<div class="dpf-input-container">









<input type="text" class="dpf-input" size="4" data-type="cvc">







</div>





</div>



</div>




<div class="dpf-input-row">





<label class="dpf-input-label">Full Name</label>





<div class="dpf-input-container">







<input type="text" size="4" class="dpf-input" data-type="name">





</div>



</div>




<button type="submit" class="dpf-submit">







<span class="btn-active-state">









Submit







</span>







<span class="btn-loading-state">









<i class="fa fa-refresh "></i>







</span>



</button>

</div>
</form>

Cargue el necesario < a href = "https://stripe.com/docs/stripe.js?" > stripe. js en la página HTML.

<script src="https://js.stripe.com/v2/"></script>

Cargue el DatPayment. js en la parte inferior de la página.

<script src="DatPayment.js"></script>

Activa el formulario de pago.

var payment_form = new DatPayment({

form_selector: '#payment-form',

card_container_selector: '.dpf-card-placeholder',


number_selector: '.dpf-input[data-type="number"]',

date_selector: '.dpf-input[data-type="expiry"]',

cvc_selector: '.dpf-input[data-type="cvc"]',

name_selector: '.dpf-input[data-type="name"]',


submit_button_selector: '.dpf-submit',


placeholders: {



number: '•••• •••• •••• ••••',



expiry: '••/••',



cvc: '•••',



name: 'DUPONT'

},


validators: {



number: function(number){





return Stripe.card.validateCardNumber(number);



},



expiry: function(expiry){





var expiry = expiry.split(' / ');





return Stripe.card.validateExpiry(expiry[0]||0,expiry[1]||0);



},



cvc: function(cvc){





return Stripe.card.validateCVC(cvc);



},



name: function(value){





return value.length > 0;



}

}
});

var demo_log_div = document.getElementById("demo-log");

payment_form.form.addEventListener('payment_form:submit',function(e){

var form_data = e.detail;

payment_form.unlockForm();

demo_log_div.innerHTML += "<br>"+JSON.stringify(form_data);
});

payment_form.form.addEventListener('payment_form:field_validation_success',function(e){

var input = e.detail;


demo_log_div.innerHTML += "<br>field_validation_success:"+input.getAttribute("data-type");

});

payment_form.form.addEventListener('payment_form:field_validation_failed',function(e){

var input = e.detail;


demo_log_div.innerHTML += "<br>field_validation_failed:"+input.getAttribute("data-type");
});

Todas las opciones predeterminadas.

formatting: true,
formSelectors: {

numberInput: 'input[name="number"]',

expiryInput: 'input[name="expiry"]',

cvcInput: 'input[name="cvc"]',

nameInput: 'input[name="name"]'
},
cardSelectors: {

cardContainer: '.jp-card-container',

card: '.jp-card',

numberDisplay: '.jp-card-number',

expiryDisplay: '.jp-card-expiry',

cvcDisplay: '.jp-card-cvc',

nameDisplay: '.jp-card-name'
},
messages: {

validDate: 'valid\nthru',

monthYear: 'month/year'
},
placeholders: {

number: '•••• •••• •••• ••••',

cvc: '•••',

expiry: '••/••',

name: 'Full Name'
},
classes: {

valid: 'jp-card-valid',

invalid: 'jp-card-invalid'
},
debug: false

Registro de cambios

09/17/2018

• arreglo: fecha de caducidad no válida cuando no se utiliza el autocompletado de marcador de posición (navegadores no compatibles)