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

Refactored and formatted unused code in hosting's payment.html payment.js landing-page.css

Browse source
This commit is contained in:
PCoder 2017-07-16 16:37:49 +05:30
parent ed52e396d9
commit a87c0a89eb
3 changed files with 157 additions and 285 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
hosting/static/hosting/css/landing-page.css
View file

@ -510,11 +510,11 @@ a.unlink:hover {
.card-warning-content { .card-warning-content {
font-family: Lato; font-family: Lato;
border: 1px solid #a1a1a1; border: 1px solid #a1a1a1;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
} }
.stripe-payment-btn{ .stripe-payment-btn {
width: auto; width: auto;
float: right; float: right;
font-style: normal; font-style: normal;
@ -522,22 +522,27 @@ a.unlink:hover {
position: absolute; position: absolute;
right: 0; right: 0;
} }
.brand { .brand {
float: left; float: left;
width: 10%; width: 10%;
} }
.brand #brand-icon { .brand #brand-icon {
vertical-align: bottom; vertical-align: bottom;
padding-top: 13px; padding-top: 13px;
} }
.card-number-element { .card-number-element {
float: left; float: left;
width: 63%; width: 63%;
} }
.card-expiry-element { .card-expiry-element {
float: left; float: left;
width: 17%; width: 17%;
} }
.card-cvc-element { .card-cvc-element {
float: left; float: left;
width: 10%; width: 10%;
@ -607,11 +612,11 @@ a.unlink:hover {
.brand { .brand {
width: 16%; width: 16%;
} }
.card-expiry-element { .card-expiry-element {
width: 40%; width: 40%;
} }
.card-cvc-element { .card-cvc-element {
width: 15%; width: 15%;
} }

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

@ -1,13 +1,12 @@
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',
'diners': 'pf-diners', 'diners': 'pf-diners',
'jcb': 'pf-jcb', 'jcb': 'pf-jcb',
'unknown': 'pf-credit-card', 'unknown': 'pf-credit-card'
} };
function setBrandIcon(brand) { function setBrandIcon(brand) {
var brandIconElement = document.getElementById('brand-icon'); var brandIconElement = document.getElementById('brand-icon');
var pfClass = 'pf-credit-card'; var pfClass = 'pf-credit-card';
@ -15,152 +14,129 @@ function setBrandIcon(brand) {
pfClass = cardBrandToPfClass[brand]; pfClass = cardBrandToPfClass[brand];
} }
for (var i = brandIconElement.classList.length - 1; i >= 0; i--) { for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
brandIconElement.classList.remove(brandIconElement.classList[i]); brandIconElement.classList.remove(brandIconElement.classList[i]);
} }
brandIconElement.classList.add('pf'); brandIconElement.classList.add('pf');
brandIconElement.classList.add(pfClass); brandIconElement.classList.add(pfClass);
} }
$(document).ready(function () {
$.ajaxSetup({
beforeSend: function (xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
$( document ).ready(function() { if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
$.ajaxSetup({ // Only send the token to relative URLs i.e. locally.
beforeSend: function(xhr, settings) { xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
function getCookie(name) { }
var cookieValue = null; }
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
}); });
var hasCreditcard = window.hasCreditcard || false; var hasCreditcard = window.hasCreditcard || false;
if (!hasCreditcard){ if (!hasCreditcard) {
var stripe = Stripe(window.stripeKey); 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');*/
/* new card */ /* new card */
var server_url = "https://datacenterlight.ch";
var element_style = { var element_style = {
fonts: [{ fonts: [{
family: 'lato-light', family: 'lato-light',
src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")', src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")'
}, { }, {
family: 'lato-regular', family: 'lato-regular',
src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")', src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")'
}, }
] ],
} locale: window.current_lan
var elements = stripe.elements(element_style);
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: "'Lato', sans-serif",
fontSize: '14px',
'::placeholder': {
color: '#333',
},
},
}; };
var elements = stripe.elements(element_style);
var credit_card_text_style = { var credit_card_text_style = {
base: { base: {
iconColor: '#666EE8', iconColor: '#666EE8',
color: '#31325F', color: '#31325F',
lineHeight: '40px', lineHeight: '40px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-light', sans-serif", fontFamily: "'lato-light', sans-serif",
fontSize: '14px', fontSize: '14px',
'::placeholder': { '::placeholder': {
color: '#777', color: '#777'
}, }
}, },
invalid: { invalid: {
iconColor: '#eb4d5c', iconColor: '#eb4d5c',
color: '#eb4d5c', color: '#eb4d5c',
lineHeight: '40px', lineHeight: '40px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
'::placeholder': { '::placeholder': {
color: '#eb4d5c', color: '#eb4d5c',
fontWeight: 400, fontWeight: 400
} }
} }
}; };
var credit_card_cvv_style = { var credit_card_cvv_style = {
base: { base: {
iconColor: '#666EE8', iconColor: '#666EE8',
color: '#31325F', color: '#31325F',
lineHeight: '40px', lineHeight: '40px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
'::placeholder': { '::placeholder': {
color: '#555', color: '#555'
}, }
}, },
invalid: { invalid: {
iconColor: '#eb4d5c', iconColor: '#eb4d5c',
color: '#eb4d5c', color: '#eb4d5c',
lineHeight: '40px', lineHeight: '40px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
'::placeholder': { '::placeholder': {
color: '#eb4d5c', color: '#eb4d5c',
fontWeight: 600, fontWeight: 600
}, }
} }
}; };
var cardNumberElement = elements.create('cardNumber', { var cardNumberElement = elements.create('cardNumber', {
style: credit_card_text_style, style: credit_card_text_style,
placeholder : "____ ____ ____ ____", placeholder: "____ ____ ____ ____"
}); });
cardNumberElement.mount('#card-number-element'); cardNumberElement.mount('#card-number-element');
var cardExpiryElement = elements.create('cardExpiry', { var cardExpiryElement = elements.create('cardExpiry', {
style: credit_card_cvv_style style: credit_card_cvv_style
}); });
cardExpiryElement.mount('#card-expiry-element'); cardExpiryElement.mount('#card-expiry-element');
var cardCvcElement = elements.create('cardCvc', { var cardCvcElement = elements.create('cardCvc', {
style: credit_card_cvv_style style: credit_card_cvv_style
}); });
cardCvcElement.mount('#card-cvc-element'); cardCvcElement.mount('#card-cvc-element');
cardNumberElement.on('change', function(event) { cardNumberElement.on('change', function (event) {
// Switch brand logo // Switch brand logo
if (event.brand) { if (event.brand) {
setBrandIcon(event.brand); setBrandIcon(event.brand);
} }
//setOutcome(event); //setOutcome(event);
}); });
/*$('#payment-form').submit(function(e) {
e.preventDefault();
stripe.createToken(cardNumberElement).then(setOutcome);
});*/
/* new card end */ /* new card end */
} }
console.log("has creditcard", hasCreditcard); console.log("has creditcard", hasCreditcard);
@ -170,106 +146,55 @@ var credit_card_cvv_style = {
submit_form_btn.on('click', submit_payment); submit_form_btn.on('click', submit_payment);
function submit_payment(e){ function submit_payment(e) {
e.preventDefault(); e.preventDefault();
console.log("creditcard sdasd"); console.log("creditcard sdasd");
// if (hasCreditcard) { // if (hasCreditcard) {
$('#billing-form').submit(); $('#billing-form').submit();
// } // }
} }
//var $form = $('#payment-form');
var $form_new = $('#payment-form-new'); var $form_new = $('#payment-form-new');
//$form.submit(payWithStripe);
$form_new.submit(payWithStripe_new); $form_new.submit(payWithStripe_new);
/* If you're using Stripe for payments */
function payWithStripe(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');
var hiddenInput = document.createElement('input');
$('#id_token').val(token.id);
$('#billing-form').submit();
}
stripe.createToken(card).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.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
// Send the token to your server
stripeTokenHandler(result.token);
}
});
// /* Visual feedback */
// $form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
// var PublishableKey = window.stripeKey;
// Stripe.setPublishableKey(PublishableKey);
// Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
// if (response.error) {
// /* Visual feedback */
// $form.find('[type=submit]').html('Try again');
// /* Show Stripe errors on the form */
// $form.find('.payment-errors').text(response.error.message);
// $form.find('.payment-errors').closest('.row').show();
// } else {
// /* Visual feedback */
// $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
// /* Hide Stripe errors on the form */
// $form.find('.payment-errors').closest('.row').hide();
// $form.find('.payment-errors').text("");
// // response contains id and card, which contains additional card details
// var token = response.id;
// // AJAX
// //set token on a hidden input
// $('#id_token').val(token);
// $('#billing-form').submit();
// }
// });
}
function payWithStripe_new(e) { function payWithStripe_new(e) {
e.preventDefault(); e.preventDefault();
function stripeTokenHandler(token) { function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server // Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form-new'); var form = document.getElementById('payment-form-new');
var hiddenInput = document.createElement('input'); $('#id_token').val(token.id);
$('#id_token').val(token.id); $('#billing-form').submit();
$('#billing-form').submit();
} }
stripe.createToken(cardNumberElement).then(function(result) { stripe.createToken(cardNumberElement).then(function (result) {
if (result.error) { if (result.error) {
// Inform the user if there was an error // Inform the user if there was an error
var errorElement = document.getElementById('card-errors'); var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message; errorElement.textContent = result.error.message;
} else { } else {
$form_new.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>'); var process_text = "Processing";
if (typeof window.processing_text !== 'undefined') {
process_text = window.processing_text
}
$form_new.find('[type=submit]').html(process_text + ' <i class="fa fa-spinner fa-pulse"></i>');
// Send the token to your server // Send the token to your server
stripeTokenHandler(result.token); 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);
}, "Please specify a valid 2-digit month."); }, "Please specify a valid 2-digit month.");
$.validator.addMethod("year", function(value, element) { $.validator.addMethod("year", function (value, element) {
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_new.validate({ validator = $form_new.validate({
@ -292,28 +217,16 @@ var credit_card_cvv_style = {
digits: true digits: true
} }
}, },
highlight: function(element) { highlight: function (element) {
$(element).closest('.form-control').removeClass('success').addClass('error'); $(element).closest('.form-control').removeClass('success').addClass('error');
}, },
unhighlight: function(element) { unhighlight: function (element) {
$(element).closest('.form-control').removeClass('error').addClass('success'); $(element).closest('.form-control').removeClass('error').addClass('success');
}, },
errorPlacement: function(error, element) { errorPlacement: function (error, element) {
$(element).closest('.form-group').append(error); $(element).closest('.form-group').append(error);
} }
}); });
paymentFormReady = function() {
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;
}
};
// $form.find('[type=submit]').prop('disabled', true); // $form.find('[type=submit]').prop('disabled', true);
// var readyInterval = setInterval(function() { // var readyInterval = setInterval(function() {
// if (paymentFormReady()) { // if (paymentFormReady()) {

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

@ -2,7 +2,7 @@
{% load staticfiles bootstrap3 i18n %} {% load staticfiles bootstrap3 i18n %}
{% block content %} {% block content %}
<!-- Credit card form --> <!-- Credit card form -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
<div class="dcl-order-container container"> <div class="dcl-order-container container">
<div class="payment-container"> <div class="payment-container">
<div class="row"> <div class="row">
@ -103,20 +103,22 @@
</div> </div>
</div> </div>
</div> </div>
{% else %} {% else %}
<form action="" id="payment-form-new" method="POST">
<!--form role="form" id="payment-form" novalidate> <input type="hidden" name="token"/>
<div class="row"> <div class="group">
<div class="form-group col-xs-12"> <div class="credit-card-element-with-brand">
<div id="card-element"> <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>
</div> </div>
</div> <div class="card-expiry-element">
<div class="row"> <div id="card-expiry-element" class="field"></div>
<div class="form-group col-xs-12"> </div>
<div id="new-card-element"> <div class="card-cvc-element">
</div> <div id="card-cvc-element" class="field"></div>
</div> </div>
</div> </div>
<div id="card-errors" role="alert"></div> <div id="card-errors" role="alert"></div>
@ -131,56 +133,8 @@
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="col-xs-6 pull-right"> <div class="col-xs-6 pull-right">
<button class="btn btn-success stripe-payment-btn" type="submit">{% trans "Submit" %} <button class="btn btn-success stripe-payment-btn" type="submit">{% trans
</button> "Submit" %}
</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 action="" id="payment-form-new" method="POST">
<input type="hidden" name="token" />
<div class="group">
<div class="credit-card-element-with-brand">
<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>
<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> </button>
</div> </div>
</div> </div>
@ -200,8 +154,8 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
</form> </form>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@ -215,7 +169,7 @@
{% if stripe_key %} {% if stripe_key %}
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
<script type="text/javascript"> <script type="text/javascript">
window.processing_text = '{% trans "Processing" %}';
(function () { (function () {
window.stripeKey = "{{stripe_key}}"; window.stripeKey = "{{stripe_key}}";