Refactored and formatted unused code in hosting's payment.html payment.js landing-page.css
This commit is contained in:
PCoder
parent
ed52e396d9
commit
a87c0a89eb
3 changed files with 157 additions and 285 deletions
|
|
@ -514,7 +514,7 @@ a.unlink:hover {
|
||||||
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%;
|
||||||
|
|
|
||||||
|
|
@ -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 () {
|
||||||
$( document ).ready(function() {
|
|
||||||
$.ajaxSetup({
|
$.ajaxSetup({
|
||||||
beforeSend: function(xhr, settings) {
|
beforeSend: function (xhr, settings) {
|
||||||
function getCookie(name) {
|
function getCookie(name) {
|
||||||
var cookieValue = null;
|
var cookieValue = null;
|
||||||
if (document.cookie && document.cookie != '') {
|
if (document.cookie && document.cookie != '') {
|
||||||
var cookies = document.cookie.split(';');
|
var cookies = document.cookie.split(';');
|
||||||
for (var i = 0; i < cookies.length; i++) {
|
for (var i = 0; i < cookies.length; i++) {
|
||||||
var cookie = jQuery.trim(cookies[i]);
|
var cookie = jQuery.trim(cookies[i]);
|
||||||
// Does this cookie string begin with the name we want?
|
// Does this cookie string begin with the name we want?
|
||||||
if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
||||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return cookieValue;
|
return cookieValue;
|
||||||
}
|
}
|
||||||
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
|
|
||||||
// Only send the token to relative URLs i.e. locally.
|
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
|
||||||
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
|
// 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 elements = stripe.elements(element_style);
|
||||||
|
var credit_card_text_style = {
|
||||||
var 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', sans-serif",
|
fontSize: '14px',
|
||||||
fontSize: '14px',
|
'::placeholder': {
|
||||||
|
color: '#777'
|
||||||
'::placeholder': {
|
}
|
||||||
color: '#333',
|
|
||||||
},
|
},
|
||||||
},
|
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 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', {
|
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()) {
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -105,18 +105,20 @@
|
||||||
</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,7 +154,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</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}}";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue