diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index a50ae6fd..c621f2c0 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -510,11 +510,11 @@ a.unlink:hover { .card-warning-content { font-family: Lato; border: 1px solid #a1a1a1; - border-radius: 3px; + border-radius: 3px; padding: 5px; } -.stripe-payment-btn{ +.stripe-payment-btn { width: auto; float: right; font-style: normal; @@ -522,22 +522,27 @@ a.unlink:hover { position: absolute; right: 0; } + .brand { float: left; width: 10%; } + .brand #brand-icon { vertical-align: bottom; padding-top: 13px; } + .card-number-element { float: left; width: 63%; } + .card-expiry-element { float: left; width: 17%; } + .card-cvc-element { float: left; width: 10%; @@ -607,11 +612,11 @@ a.unlink:hover { .brand { width: 16%; } - + .card-expiry-element { width: 40%; } - + .card-cvc-element { width: 15%; } diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js index 737221e9..60054c97 100644 --- a/hosting/static/hosting/js/payment.js +++ b/hosting/static/hosting/js/payment.js @@ -1,13 +1,12 @@ var cardBrandToPfClass = { - 'visa': 'pf-visa', - 'mastercard': 'pf-mastercard', - 'amex': 'pf-american-express', - 'discover': 'pf-discover', - 'diners': 'pf-diners', - 'jcb': 'pf-jcb', - 'unknown': 'pf-credit-card', -} - + 'visa': 'pf-visa', + 'mastercard': 'pf-mastercard', + 'amex': 'pf-american-express', + 'discover': 'pf-discover', + 'diners': 'pf-diners', + 'jcb': 'pf-jcb', + 'unknown': 'pf-credit-card' +}; function setBrandIcon(brand) { var brandIconElement = document.getElementById('brand-icon'); var pfClass = 'pf-credit-card'; @@ -15,152 +14,129 @@ function setBrandIcon(brand) { pfClass = cardBrandToPfClass[brand]; } 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(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() { - $.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; - } - 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')); - } - } + 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; - if (!hasCreditcard){ + 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');*/ /* new card */ - var server_url = "https://datacenterlight.ch"; var element_style = { fonts: [{ - family: 'lato-light', - src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")', - }, { - family: 'lato-regular', - src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")', - }, - ] - } - 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', - }, - }, + family: 'lato-light', + src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")' + }, { + family: 'lato-regular', + src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")' + } + ], + locale: window.current_lan }; - -var credit_card_text_style = { - base: { - iconColor: '#666EE8', - color: '#31325F', - lineHeight: '40px', - fontWeight: 300, - fontFamily: "'lato-light', sans-serif", - fontSize: '14px', - '::placeholder': { - 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: { - iconColor: '#666EE8', - color: '#31325F', - lineHeight: '40px', - fontWeight: 300, - fontFamily: "'lato-regular', sans-serif", - fontSize: '14px', - '::placeholder': { - color: '#555', - }, - }, - invalid: { - iconColor: '#eb4d5c', - color: '#eb4d5c', - lineHeight: '40px', - fontWeight: 300, - fontFamily: "'lato-regular', sans-serif", - fontSize: '14px', - '::placeholder': { - color: '#eb4d5c', - fontWeight: 600, - }, - } -}; - + var elements = stripe.elements(element_style); + var credit_card_text_style = { + base: { + iconColor: '#666EE8', + color: '#31325F', + lineHeight: '40px', + fontWeight: 300, + fontFamily: "'lato-light', sans-serif", + fontSize: '14px', + '::placeholder': { + 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: { + iconColor: '#666EE8', + color: '#31325F', + lineHeight: '40px', + fontWeight: 300, + fontFamily: "'lato-regular', sans-serif", + fontSize: '14px', + '::placeholder': { + 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', { - style: credit_card_text_style, - placeholder : "____ ____ ____ ____", + style: credit_card_text_style, + placeholder: "____ ____ ____ ____" }); cardNumberElement.mount('#card-number-element'); - + var cardExpiryElement = elements.create('cardExpiry', { - style: credit_card_cvv_style + style: credit_card_cvv_style }); cardExpiryElement.mount('#card-expiry-element'); - + var cardCvcElement = elements.create('cardCvc', { - style: credit_card_cvv_style + style: credit_card_cvv_style }); cardCvcElement.mount('#card-cvc-element'); - cardNumberElement.on('change', function(event) { + cardNumberElement.on('change', function (event) { // Switch brand logo if (event.brand) { setBrandIcon(event.brand); } //setOutcome(event); }); - /*$('#payment-form').submit(function(e) { - e.preventDefault(); - stripe.createToken(cardNumberElement).then(setOutcome); - });*/ /* new card end */ } console.log("has creditcard", hasCreditcard); @@ -170,106 +146,55 @@ var credit_card_cvv_style = { submit_form_btn.on('click', submit_payment); - function submit_payment(e){ - e.preventDefault(); - console.log("creditcard sdasd"); - // if (hasCreditcard) { - $('#billing-form').submit(); - // } - + function submit_payment(e) { + e.preventDefault(); + console.log("creditcard sdasd"); + // if (hasCreditcard) { + $('#billing-form').submit(); + // } + } - - //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) { - 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 '); - // Send the token to your server - stripeTokenHandler(result.token); - } - }); - - // /* Visual feedback */ - // $form.find('[type=submit]').html('Validating '); - - // 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 '); - // /* 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) { 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(); + // Insert the token ID into the form so it gets submitted to the server + var form = document.getElementById('payment-form-new'); + $('#id_token').val(token.id); + $('#billing-form').submit(); } - stripe.createToken(cardNumberElement).then(function(result) { + 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; + // 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 '); + var process_text = "Processing"; + if (typeof window.processing_text !== 'undefined') { + process_text = window.processing_text + } + + $form_new.find('[type=submit]').html(process_text + ' '); // 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); + $.validator.addMethod("month", function (value, element) { + 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."); - $.validator.addMethod("year", function(value, element) { - return this.optional(element) || /^[0-9]{2}$/.test(value); + $.validator.addMethod("year", function (value, element) { + return this.optional(element) || /^[0-9]{2}$/.test(value); }, "Please specify a valid 2-digit year."); validator = $form_new.validate({ @@ -292,28 +217,16 @@ var credit_card_cvv_style = { digits: true } }, - highlight: function(element) { + highlight: function (element) { $(element).closest('.form-control').removeClass('success').addClass('error'); }, - unhighlight: function(element) { + unhighlight: function (element) { $(element).closest('.form-control').removeClass('error').addClass('success'); }, - errorPlacement: function(error, element) { + errorPlacement: function (error, element) { $(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); // var readyInterval = setInterval(function() { // if (paymentFormReady()) { diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index 230c0bdf..065d73d7 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -2,7 +2,7 @@ {% load staticfiles bootstrap3 i18n %} {% block content %} - +
@@ -103,20 +103,22 @@
- + {% else %} - - -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-

- {% blocktrans %} - You are not making any payment yet. After submitting your card - information, you will be taken to the Confirm Order Page. - {% endblocktrans %} -

-
-
-
-
@@ -200,8 +154,8 @@
{% endif %} -
- + + {% endif %} @@ -215,7 +169,7 @@ {% if stripe_key %} {% get_current_language as LANGUAGE_CODE %}