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 <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) {
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 <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
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 %}
<!-- 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="payment-container">
<div class="row">
@@ -103,20 +103,22 @@
</div>
</div>
</div>
-
+
{% else %}
-
- <!--form role="form" id="payment-form" novalidate>
- <div class="row">
- <div class="form-group col-xs-12">
- <div id="card-element">
+ <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>
- <div class="row">
- <div class="form-group col-xs-12">
- <div id="new-card-element">
- </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>
@@ -131,56 +133,8 @@
</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 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 class="btn btn-success stripe-payment-btn" type="submit">{% trans
+ "Submit" %}
</button>
</div>
</div>
@@ -200,8 +154,8 @@
</div>
</div>
{% endif %}
- </form>
-
+ </form>
+
{% endif %}
</div>
</div>
@@ -215,7 +169,7 @@
{% if stripe_key %}
{% get_current_language as LANGUAGE_CODE %}
<script type="text/javascript">
-
+ window.processing_text = '{% trans "Processing" %}';
(function () {
window.stripeKey = "{{stripe_key}}";