Added validations for credit card inputs. Made credit card holder's name default value empty in the model.
This commit is contained in:
PCoder
parent
b64198c2c0
commit
ba72527f2f
3 changed files with 116 additions and 46 deletions
|
|
@ -1,5 +1,5 @@
|
|||
var cardBrandToPfClass = {
|
||||
'visa': 'pf-visa',
|
||||
'visa': 'pf-visa',
|
||||
'mastercard': 'pf-mastercard',
|
||||
'amex': 'pf-american-express',
|
||||
'discover': 'pf-discover',
|
||||
|
|
@ -24,10 +24,6 @@ function setBrandIcon(brand) {
|
|||
|
||||
|
||||
$( document ).ready(function() {
|
||||
|
||||
|
||||
|
||||
|
||||
$.ajaxSetup({
|
||||
beforeSend: function(xhr, settings) {
|
||||
function getCookie(name) {
|
||||
|
|
@ -57,8 +53,8 @@ $( document ).ready(function() {
|
|||
if (!hasCreditcard){
|
||||
var stripe = Stripe(window.stripeKey);
|
||||
var elements = stripe.elements({locale: window.current_lan});
|
||||
//var card = elements.create('card', options={hidePostalCode: true});
|
||||
//card.mount('#card-element');
|
||||
/*var card = elements.create('card', options={hidePostalCode: true});
|
||||
card.mount('#card-element');*/
|
||||
/* new card */
|
||||
var server_url = "https://datacenterlight.ch";
|
||||
var element_style = {
|
||||
|
|
@ -100,6 +96,18 @@ var credit_card_text_style = {
|
|||
color: '#777',
|
||||
},
|
||||
},
|
||||
invalid: {
|
||||
iconColor: '#eb4d5c',
|
||||
color: '#eb4d5c',
|
||||
lineHeight: '40px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-regular', sans-serif",
|
||||
fontSize: '14px',
|
||||
'::placeholder': {
|
||||
color: '#eb4d5c',
|
||||
fontWeight: 400,
|
||||
}
|
||||
}
|
||||
};
|
||||
var credit_card_cvv_style = {
|
||||
base: {
|
||||
|
|
@ -113,6 +121,18 @@ var credit_card_cvv_style = {
|
|||
color: '#555',
|
||||
},
|
||||
},
|
||||
invalid: {
|
||||
iconColor: '#eb4d5c',
|
||||
color: '#eb4d5c',
|
||||
lineHeight: '40px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-regular', sans-serif",
|
||||
fontSize: '14px',
|
||||
'::placeholder': {
|
||||
color: '#eb4d5c',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var cardNumberElement = elements.create('cardNumber', {
|
||||
|
|
@ -135,12 +155,12 @@ var credit_card_cvv_style = {
|
|||
if (event.brand) {
|
||||
setBrandIcon(event.brand);
|
||||
}
|
||||
setOutcome(event);
|
||||
//setOutcome(event);
|
||||
});
|
||||
$('#payment-form').submit(function(e) {
|
||||
/*$('#payment-form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
stripe.createToken(cardNumberElement).then(setOutcome);
|
||||
});
|
||||
});*/
|
||||
/* new card end */
|
||||
}
|
||||
console.log("has creditcard", hasCreditcard);
|
||||
|
|
@ -162,7 +182,9 @@ var credit_card_cvv_style = {
|
|||
|
||||
|
||||
//var $form = $('#payment-form');
|
||||
var $form_new = $('#payment-form-new');
|
||||
//$form.submit(payWithStripe);
|
||||
$form_new.submit(payWithStripe_new);
|
||||
|
||||
/* If you're using Stripe for payments */
|
||||
function payWithStripe(e) {
|
||||
|
|
@ -173,7 +195,6 @@ var credit_card_cvv_style = {
|
|||
var form = document.getElementById('payment-form');
|
||||
var hiddenInput = document.createElement('input');
|
||||
$('#id_token').val(token.id);
|
||||
|
||||
$('#billing-form').submit();
|
||||
}
|
||||
|
||||
|
|
@ -218,7 +239,30 @@ var credit_card_cvv_style = {
|
|||
// }
|
||||
// });
|
||||
}
|
||||
function payWithStripe_new(e) {
|
||||
e.preventDefault();
|
||||
|
||||
function stripeTokenHandler(token) {
|
||||
// Insert the token ID into the form so it gets submitted to the server
|
||||
var form = document.getElementById('payment-form-new');
|
||||
var hiddenInput = document.createElement('input');
|
||||
$('#id_token').val(token.id);
|
||||
$('#billing-form').submit();
|
||||
}
|
||||
|
||||
|
||||
stripe.createToken(cardNumberElement).then(function(result) {
|
||||
if (result.error) {
|
||||
// Inform the user if there was an error
|
||||
var errorElement = document.getElementById('card-errors');
|
||||
errorElement.textContent = result.error.message;
|
||||
} else {
|
||||
$form_new.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
|
||||
// Send the token to your server
|
||||
stripeTokenHandler(result.token);
|
||||
}
|
||||
});
|
||||
}
|
||||
/* Form validation */
|
||||
$.validator.addMethod("month", function(value, element) {
|
||||
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
|
||||
|
|
@ -228,7 +272,7 @@ var credit_card_cvv_style = {
|
|||
return this.optional(element) || /^[0-9]{2}$/.test(value);
|
||||
}, "Please specify a valid 2-digit year.");
|
||||
|
||||
/*validator = $form.validate({
|
||||
validator = $form_new.validate({
|
||||
rules: {
|
||||
cardNumber: {
|
||||
required: true,
|
||||
|
|
@ -257,13 +301,13 @@ var credit_card_cvv_style = {
|
|||
errorPlacement: function(error, element) {
|
||||
$(element).closest('.form-group').append(error);
|
||||
}
|
||||
});*/
|
||||
});
|
||||
|
||||
paymentFormReady = function() {
|
||||
if ($form.find('[name=cardNumber]').hasClass("success") &&
|
||||
$form.find('[name=expMonth]').hasClass("success") &&
|
||||
$form.find('[name=expYear]').hasClass("success") &&
|
||||
$form.find('[name=cvCode]').val().length > 1) {
|
||||
if ($form_new.find('[name=cardNumber]').hasClass("success") &&
|
||||
$form_new.find('[name=expMonth]').hasClass("success") &&
|
||||
$form_new.find('[name=expYear]').hasClass("success") &&
|
||||
$form_new.find('[name=cvCode]').val().length > 1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,6 @@
|
|||
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
|
||||
<input type="hidden" name="credit_card_needed" value="false"/>
|
||||
</form>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p>
|
||||
|
|
@ -104,40 +103,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
|
||||
|
||||
<form role="form" id="payment-form" novalidate>
|
||||
<!--form role="form" id="payment-form" novalidate>
|
||||
<div class="row">
|
||||
<div class="form-group col-xs-12">
|
||||
<div id="card-element">
|
||||
<!-- a Stripe Element will be inserted here. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-xs-12">
|
||||
<div id="new-card-element">
|
||||
<!-- a Stripe Element will be inserted here. -->
|
||||
<form action="" method="POST">
|
||||
<input type="hidden" name="token" />
|
||||
<div class="group">
|
||||
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
|
||||
<div class="card-number-element">
|
||||
<div id="card-number-element" class="field"></div>
|
||||
</div>
|
||||
<div class="card-expiry-element">
|
||||
<div id="card-expiry-element" class="field"></div>
|
||||
</div>
|
||||
<div class="card-cvc-element">
|
||||
<div id="card-cvc-element" class="field"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outcome">
|
||||
<div class="error"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
|
|
@ -171,9 +150,56 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
>
|
||||
</form-->
|
||||
<form action="" id="payment-form-new" method="POST">
|
||||
<input type="hidden" name="token" />
|
||||
<div class="group">
|
||||
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
|
||||
<div class="card-number-element">
|
||||
<div id="card-number-element" class="field"></div>
|
||||
</div>
|
||||
<div class="card-expiry-element">
|
||||
<div id="card-expiry-element" class="field"></div>
|
||||
</div>
|
||||
<div class="card-cvc-element">
|
||||
<div id="card-cvc-element" class="field"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p class="card-warning-content">
|
||||
{% blocktrans %}
|
||||
You are not making any payment yet. After submitting your card
|
||||
information, you will be taken to the Confirm Order Page.
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="col-xs-6 pull-right">
|
||||
<button class="btn btn-success stripe-payment-btn" type="submit">{% trans "Submit" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display:none;">
|
||||
<div class="col-xs-12">
|
||||
<p class="payment-errors"></p>
|
||||
</div>
|
||||
</div>
|
||||
{% if paymentError %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p>
|
||||
{% bootstrap_alert paymentError alert_type='danger' %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ from .fields import CountryField
|
|||
# Create your models here.
|
||||
|
||||
class BaseBillingAddress(models.Model):
|
||||
cardholder_name = models.CharField(max_length=100)
|
||||
cardholder_name = models.CharField(max_length=100, default="")
|
||||
street_address = models.CharField(max_length=100)
|
||||
city = models.CharField(max_length=50)
|
||||
postal_code = models.CharField(max_length=50)
|
||||
|
|
|
|||
Loading…
Reference in a new issue