ungleich-public/dynamicweb
6
0
Fork 0
Code Issues 1 Pull requests 2 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

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

@ -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,6 +96,18 @@ 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: {
@ -113,6 +121,18 @@ 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', {
@ -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;

74
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,39 +103,19 @@
</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. -->
<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>
@ -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;">
<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 %} {% 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)