diff --git a/matrixhosting/static/matrixhosting/images/mastercard.png b/matrixhosting/static/matrixhosting/images/mastercard.png new file mode 100644 index 0000000..a013447 Binary files /dev/null and b/matrixhosting/static/matrixhosting/images/mastercard.png differ diff --git a/matrixhosting/static/matrixhosting/images/visa.png b/matrixhosting/static/matrixhosting/images/visa.png new file mode 100644 index 0000000..9b72cb3 Binary files /dev/null and b/matrixhosting/static/matrixhosting/images/visa.png differ diff --git a/matrixhosting/static/matrixhosting/js/payment.js b/matrixhosting/static/matrixhosting/js/payment.js index 6ec03b6..0e81695 100644 --- a/matrixhosting/static/matrixhosting/js/payment.js +++ b/matrixhosting/static/matrixhosting/js/payment.js @@ -1,13 +1,3 @@ -function setBrandIcon(brand) { - var brandIconElement = document.getElementById('brand-icon'); - var pfClass = 'fa-cc-' + brand; - for (var i = brandIconElement.classList.length - 1; i >= 0; i--) { - brandIconElement.classList.remove(brandIconElement.classList[i]); - } - brandIconElement.classList.add('fab'); - brandIconElement.classList.add(pfClass); -} - function fetch_pricing() { var url = '/pricing/' + $('input[name="pricing_name"]').val() + '/calculate/'; var cores = $('#cores').val(); @@ -20,8 +10,18 @@ function fetch_pricing() { dataType: 'json', success: function (data) { if (data && data['total']) { - $('#total').text(data['total'] + " CHF"); $('#recurring_price').text(data['recurring_price'] + " CHF"); + $('#vat').text(data['vat_amount'] + " CHF"); + $('#total').text(data['total'] + " CHF"); + var balance = parseFloat($('#balance').data('balance')); + if(data['total'] > balance) { + $('#has-enough-balance').hide(); + $('#cards-section').show(); + window.cardNumberElement = loadStripe(stripe); + } else { + $('#cards-section').hide(); + $('#has-enough-balance').show(); + } } } }); @@ -43,8 +43,9 @@ function incrementValue(e) { return false; }; - $(document).ready(function () { + var stripe = Stripe(window.stripeKey); + if ($('#pricing_name') != undefined) { fetch_pricing(); } @@ -54,72 +55,8 @@ $(document).ready(function () { $('.fa-minus-circle.left').bind('click', {inc: -1}, incrementValue); var hasCreditcard = window.hasCreditcard || false; - if (hasCreditcard && window.stripeKey) { - var stripe = Stripe(window.stripeKey); - if (window.pm_id == undefined) { - 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")' - } - ], - locale: window.current_lan - }; - var elements = stripe.elements(element_style); - var credit_card_text_style = { - base: { - iconColor: '#666EE8', - color: '#31325F', - lineHeight: '25px', - fontWeight: 300, - fontFamily: "'lato-light', sans-serif", - fontSize: '14px', - '::placeholder': { - color: '#777' - } - }, - invalid: { - iconColor: '#eb4d5c', - color: '#eb4d5c', - lineHeight: '25px', - fontWeight: 300, - fontFamily: "'lato-regular', sans-serif", - fontSize: '14px', - '::placeholder': { - color: '#eb4d5c', - fontWeight: 400 - } - } - }; - - var enter_ccard_text = "Enter your credit card number"; - if (typeof window.enter_your_card_text !== 'undefined') { - enter_ccard_text = window.enter_your_card_text; - } - var cardNumberElement = elements.create('cardNumber', { - style: credit_card_text_style, - placeholder: enter_ccard_text - }); - cardNumberElement.mount('#card-number-element'); - - var cardExpiryElement = elements.create('cardExpiry', { - style: credit_card_text_style - }); - cardExpiryElement.mount('#card-expiry-element'); - - var cardCvcElement = elements.create('cardCvc', { - style: credit_card_text_style - }); - cardCvcElement.mount('#card-cvc-element'); - cardNumberElement.on('change', function (event) { - if (event.brand) { - setBrandIcon(event.brand); - } - }); - } + if (hasCreditcard) { + window.cardNumberElement = loadStripe(stripe); } function submitBillingForm(pmId) { @@ -141,7 +78,7 @@ $(document).ready(function () { } stripe.createPaymentMethod({ type: 'card', - card: cardNumberElement, + card: window.cardNumberElement, }) .then(function(result) { // Handle result.error or result.paymentMethod @@ -154,7 +91,7 @@ $(document).ready(function () { stripePMHandler(result.paymentMethod); } }); - window.card = cardNumberElement; + window.card = window.cardNumberElement; } /* Form validation */ diff --git a/matrixhosting/static/matrixhosting/js/stripe.js b/matrixhosting/static/matrixhosting/js/stripe.js new file mode 100644 index 0000000..04a03b1 --- /dev/null +++ b/matrixhosting/static/matrixhosting/js/stripe.js @@ -0,0 +1,79 @@ +function setBrandIcon(brand) { + var brandIconElement = document.getElementById('brand-icon'); + var pfClass = 'fa-cc-' + brand; + for (var i = brandIconElement.classList.length - 1; i >= 0; i--) { + brandIconElement.classList.remove(brandIconElement.classList[i]); + } + brandIconElement.classList.add('fab'); + brandIconElement.classList.add(pfClass); +}; + +function loadStripe(stripe) { + var cardNumberElement; + if (stripe) { + 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")' + } + ], + locale: window.current_lan + }; + var elements = stripe.elements(element_style); + var credit_card_text_style = { + base: { + iconColor: '#666EE8', + color: '#31325F', + lineHeight: '25px', + fontWeight: 300, + fontFamily: "'lato-light', sans-serif", + fontSize: '14px', + '::placeholder': { + color: '#777' + } + }, + invalid: { + iconColor: '#eb4d5c', + color: '#eb4d5c', + lineHeight: '25px', + fontWeight: 300, + fontFamily: "'lato-regular', sans-serif", + fontSize: '14px', + '::placeholder': { + color: '#eb4d5c', + fontWeight: 400 + } + } + }; + + var enter_ccard_text = "Enter your credit card number"; + if (typeof window.enter_your_card_text !== 'undefined') { + enter_ccard_text = window.enter_your_card_text; + } + cardNumberElement = elements.create('cardNumber', { + style: credit_card_text_style, + placeholder: enter_ccard_text + }); + cardNumberElement.mount('#card-number-element'); + + var cardExpiryElement = elements.create('cardExpiry', { + style: credit_card_text_style + }); + cardExpiryElement.mount('#card-expiry-element'); + + var cardCvcElement = elements.create('cardCvc', { + style: credit_card_text_style + }); + cardCvcElement.mount('#card-cvc-element'); + cardNumberElement.on('change', function (event) { + if (event.brand) { + setBrandIcon(event.brand); + } + }); + } + return cardNumberElement; +}; + diff --git a/matrixhosting/templates/matrixhosting/base.html b/matrixhosting/templates/matrixhosting/base.html index dcda82d..011e71e 100644 --- a/matrixhosting/templates/matrixhosting/base.html +++ b/matrixhosting/templates/matrixhosting/base.html @@ -55,6 +55,7 @@ crossorigin="anonymous" > + {% block js_extra %} {% endblock js_extra %} {% compress js %} diff --git a/matrixhosting/templates/matrixhosting/cards.html b/matrixhosting/templates/matrixhosting/cards.html new file mode 100644 index 0000000..569b9b9 --- /dev/null +++ b/matrixhosting/templates/matrixhosting/cards.html @@ -0,0 +1,210 @@ +{% extends "matrixhosting/base.html" %} + +{% load static i18n compress %} + +{% block title %} Payments {% endblock %} + +{% block content %} +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+

{{balance}} CHF

+ Make a deposit +
+
+
+
+
+
+
+
+

{% trans "Credit or Debit Cards"%} ({% trans "for payments"%})

+
+
+ {% for card in object_list %} +
+ +
+ {% endfor %} +
+
+
+
+
+ + +
+
+
+
+
+{% endblock %} +{% block js_extra %} + + + +{% endblock js_extra %} \ No newline at end of file diff --git a/matrixhosting/templates/matrixhosting/includes/_card.html b/matrixhosting/templates/matrixhosting/includes/_card.html index d0dbd79..9cb9462 100644 --- a/matrixhosting/templates/matrixhosting/includes/_card.html +++ b/matrixhosting/templates/matrixhosting/includes/_card.html @@ -24,15 +24,6 @@
-
- {% for message in messages %} - {% if 'failed_payment' in message.tags or 'make_charge_error' in message.tags or 'error' in message.tags %} - - {% endif %} - {% endfor %} -
diff --git a/matrixhosting/templates/matrixhosting/includes/_navbar.html b/matrixhosting/templates/matrixhosting/includes/_navbar.html index d6da1e9..83f4153 100644 --- a/matrixhosting/templates/matrixhosting/includes/_navbar.html +++ b/matrixhosting/templates/matrixhosting/includes/_navbar.html @@ -61,7 +61,7 @@
  • See all Notifications
    • -
  • +