moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added validations for credit card inputs. Made credit card holder's name default value empty in the model.

Browse source
This commit is contained in:
PCoder 2017-07-16 15:23:18 +05:30
parent b64198c2c0
commit ba72527f2f
3 changed files with 116 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
hosting/static/hosting/js/payment.js
View file

@ -1,5 +1,5 @@
var cardBrandToPfClass = { var cardBrandToPfClass = {
'visa': 'pf-visa', 'visa': 'pf-visa',
'mastercard': 'pf-mastercard', 'mastercard': 'pf-mastercard',
'amex': 'pf-american-express', 'amex': 'pf-american-express',
'discover': 'pf-discover', 'discover': 'pf-discover',
@ -24,10 +24,6 @@ function setBrandIcon(brand) {
$( document ).ready(function() { $( document ).ready(function() {
$.ajaxSetup({ $.ajaxSetup({
beforeSend: function(xhr, settings) { beforeSend: function(xhr, settings) {
function getCookie(name) { function getCookie(name) {
@ -57,8 +53,8 @@ $( document ).ready(function() {
if (!hasCreditcard){ if (!hasCreditcard){
var stripe = Stripe(window.stripeKey); var stripe = Stripe(window.stripeKey);
var elements = stripe.elements({locale: window.current_lan}); var elements = stripe.elements({locale: window.current_lan});
//var card = elements.create('card', options={hidePostalCode: true}); /*var card = elements.create('card', options={hidePostalCode: true});
//card.mount('#card-element'); card.mount('#card-element');*/
/* new card */ /* new card */
var server_url = "https://datacenterlight.ch"; var server_url = "https://datacenterlight.ch";
var element_style = { var element_style = {
@ -100,7 +96,19 @@ var credit_card_text_style = {
color: '#777', 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 = { var credit_card_cvv_style = {
base: { base: {
iconColor: '#666EE8', iconColor: '#666EE8',
@ -113,7 +121,19 @@ var credit_card_cvv_style = {
color: '#555', 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', { var cardNumberElement = elements.create('cardNumber', {
style: credit_card_text_style, style: credit_card_text_style,
@ -135,12 +155,12 @@ var credit_card_cvv_style = {
if (event.brand) { if (event.brand) {
setBrandIcon(event.brand); setBrandIcon(event.brand);
} }
setOutcome(event); //setOutcome(event);
}); });
$('#payment-form').submit(function(e) { /*$('#payment-form').submit(function(e) {
e.preventDefault(); e.preventDefault();
stripe.createToken(cardNumberElement).then(setOutcome); stripe.createToken(cardNumberElement).then(setOutcome);
}); });*/
/* new card end */ /* new card end */
} }
console.log("has creditcard", hasCreditcard); console.log("has creditcard", hasCreditcard);
@ -162,7 +182,9 @@ var credit_card_cvv_style = {
//var $form = $('#payment-form'); //var $form = $('#payment-form');
var $form_new = $('#payment-form-new');
//$form.submit(payWithStripe); //$form.submit(payWithStripe);
$form_new.submit(payWithStripe_new);
/* If you're using Stripe for payments */ /* If you're using Stripe for payments */
function payWithStripe(e) { function payWithStripe(e) {
@ -173,7 +195,6 @@ var credit_card_cvv_style = {
var form = document.getElementById('payment-form'); var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input'); var hiddenInput = document.createElement('input');
$('#id_token').val(token.id); $('#id_token').val(token.id);
$('#billing-form').submit(); $('#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 */ /* Form validation */
$.validator.addMethod("month", function(value, element) { $.validator.addMethod("month", function(value, element) {
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value); 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); return this.optional(element) || /^[0-9]{2}$/.test(value);
}, "Please specify a valid 2-digit year."); }, "Please specify a valid 2-digit year.");
/*validator = $form.validate({ validator = $form_new.validate({
rules: { rules: {
cardNumber: { cardNumber: {
required: true, required: true,
@ -257,13 +301,13 @@ var credit_card_cvv_style = {
errorPlacement: function(error, element) { errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error); $(element).closest('.form-group').append(error);
} }
});*/ });
paymentFormReady = function() { paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") && if ($form_new.find('[name=cardNumber]').hasClass("success") &&
$form.find('[name=expMonth]').hasClass("success") && $form_new.find('[name=expMonth]').hasClass("success") &&
$form.find('[name=expYear]').hasClass("success") && $form_new.find('[name=expYear]').hasClass("success") &&
$form.find('[name=cvCode]').val().length > 1) { $form_new.find('[name=cvCode]').val().length > 1) {
return true; return true;
} else { } else {
return false; return false;

78
hosting/templates/hosting/payment.html
View file

@ -84,7 +84,6 @@
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5> <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
<input type="hidden" name="credit_card_needed" value="false"/> <input type="hidden" name="credit_card_needed" value="false"/>
</form> </form>
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<p> <p>
@ -104,40 +103,20 @@
</div> </div>
</div> </div>
</div> </div>
{% else %} {% else %}
<!--form role="form" id="payment-form" novalidate>
<form role="form" id="payment-form" novalidate>
<div class="row"> <div class="row">
<div class="form-group col-xs-12"> <div class="form-group col-xs-12">
<div id="card-element"> <div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="form-group col-xs-12"> <div class="form-group col-xs-12">
<div id="new-card-element"> <div id="new-card-element">
<!-- a Stripe Element will be inserted here. --> </div>
<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>
<div id="card-errors" role="alert"></div> <div id="card-errors" role="alert"></div>
@ -171,9 +150,56 @@
</div> </div>
</div> </div>
{% endif %} {% 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;">
</form> <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>
{% endif %} {% endif %}
</div> </div>
</div> </div>

2
utils/models.py
View file

@ -8,7 +8,7 @@ from .fields import CountryField
# Create your models here. # Create your models here.
class BaseBillingAddress(models.Model): 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) street_address = models.CharField(max_length=100)
city = models.CharField(max_length=50) city = models.CharField(max_length=50)
postal_code = models.CharField(max_length=50) postal_code = models.CharField(max_length=50)