From d711b524e1bf86e4fa0b5f5c419ef50ce4817190 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sat, 15 Jul 2017 19:39:51 +0530 Subject: [PATCH 01/45] New layout for payment page --- hosting/static/hosting/css/landing-page.css | 228 ++++++++++++++--- hosting/templates/hosting/payment.html | 265 +++++++++++--------- 2 files changed, 343 insertions(+), 150 deletions(-) diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 0c927239..bdc0b7db 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -4,14 +4,15 @@ * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ - @font-face { font-family: 'Lato-Regular'; src: url('../fonts/Lato/Lato-Regular.ttf'); } + @font-face { src: url('../fonts/Lato/Lato-Black.ttf'); } + @font-face { font-family: 'Lato-Light'; src: url('../fonts/Lato/Lato-Light.ttf'); @@ -33,6 +34,7 @@ h6 { font-family: 'Lato-Regular', sans-serif; font-weight: 300; } + .topnav { font-size: 14px; } @@ -191,17 +193,19 @@ h6 { float: right; margin-top: 0; } + /*------Auth section---------*/ -.auth-container{ +.auth-container { height: 100vh; position: relative; } -.auth-bg{ + +.auth-bg { background: url(../img/auth-bg.jpg); position: fixed; left: 0; top: 0; - width: 100%; + width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; @@ -209,7 +213,8 @@ h6 { background-attachment: fixed; } -.auth-bg::before{ + +.auth-bg::before { content: ""; position: absolute; top: 0; @@ -219,26 +224,30 @@ h6 { background: rgba(75, 75, 101, 0.55); z-index: 1; } -.auth-container .container{ + +.auth-container .container { z-index: 1000; } -.auth-container .auth-content{ + +.auth-container .auth-content { width: 100%; margin: 0 auto; max-width: 390px; } -.auth-container .auth-center{ - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); + +.auth-container .auth-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); width: 100%; } -.auth-container .auth-title{ +.auth-container .auth-title { margin-bottom: 50px; } -.auth-container .auth-title h2{ + +.auth-container .auth-title h2 { color: #fff; font-size: 44px; text-align: center; @@ -247,7 +256,8 @@ h6 { margin-bottom: 30px; position: relative; } -.auth-container .auth-title h2::after{ + +.auth-container .auth-title h2::after { content: ""; position: absolute; bottom: -20px; @@ -258,17 +268,17 @@ h6 { transform: translate(-50%, 0); } -.auth-box{ +.auth-box { background: #fff; padding: 0; padding-bottom: 30px; box-sizing: border-box; - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); border-radius: 4px; z-index: 10; } -.auth-box .section-heading{ +.auth-box .section-heading { color: #5a5a5a; padding-top: 30px; padding-bottom: 5px; @@ -279,42 +289,51 @@ h6 { border-radius: 3px 3px 0px 0px; margin: 0 auto; } -.auth-box .form{ + +.auth-box .form { padding: 20px; width: 80%; margin: 0 auto; } -.auth-box .form .red{ + +.auth-box .form .red { color: #ea3a3a; } -.auth-box .form .btn{ - box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23); + +.auth-box .form .btn { + box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19), 0 3px 5px rgba(0, 0, 0, 0.23); letter-spacing: 3px; font-size: 17px; text-transform: uppercase; } -.auth-box .form .form-control{ + +.auth-box .form .form-control { height: 44px; font-size: 16px; } + .auth-box .auth-footer { text-align: center; padding: 10px; } -.auth-box .auth-footer .text{ + +.auth-box .auth-footer .text { color: #777; } -.auth-box .auth-footer .links a{ - color: #1e94cc; -} -.auth-box .auth-footer .links a:hover{ + +.auth-box .auth-footer .links a { color: #1e94cc; } -.auth-box.sign-up{ +.auth-box .auth-footer .links a:hover { + color: #1e94cc; +} + +.auth-box.sign-up { padding-bottom: 5px; } -.auth-box.sign-up .form{ + +.auth-box.sign-up .form { padding: 15px 20px 0 20px; } @@ -325,6 +344,7 @@ h6 { line-height: 30px; font-family: 'Lato' !important; } + .sign-up-message a { font-size: 18px; color: #1e94cc !important; @@ -353,38 +373,47 @@ h6 { ul.banner-social-buttons > li:last-child { margin-bottom: 0; } + .auth-box .form { padding: 15px 0px 0 0; } + .auth-box.sign-up .form { padding: 15px 0px 0 0; } + .auth-box .form .form-control { height: 44px; font-size: 13px; } + .auth-container .auth-title { display: none; } } + @media (max-width: 540px) { - .auth-container .auth-title h2{ + .auth-container .auth-title h2 { font-size: 32px; width: 90%; margin-bottom: 50px; } - .auth-container.auth-signup .auth-title h2{ + + .auth-container.auth-signup .auth-title h2 { font-size: 20px; width: 90%; margin-bottom: 50px; } + .auth-box .form { width: 90%; } + .auth-box .section-heading { font-size: 15px; } } + footer { padding: 2%; background-color: #f8f8f8; @@ -418,3 +447,138 @@ a.unlink:hover { color: inherit; } +/***** DCL payment page **********/ +.dcl-order-container { + font-family: Lato; +} + +.dcl-order-table-header { + border-bottom: 1px solid #eee; + padding-top: 15px; + padding-bottom: 15px; + font-size: 18px; + color: #999; + text-align: center; + font-weight: 400; +} + +.dcl-order-table-content { + border-bottom: 1px solid #eee; + padding-top: 15px; + padding-bottom: 15px; + font-size: 18px; + font-weight: 600; + text-align: center; +} + +.tbl-content { +} + +.dcl-order-table-total { + border-bottom: 4px solid #eee; + padding-top: 15px; + padding-bottom: 20px; + font-size: 20px; + font-weight: 600; + color: #999; +} + +.dcl-order-table-total span { + font-size: 12px; + color: #999; + font-weight: 400; +} + +.dcl-order-table-total .tbl-total { + text-align: center; + color: #000; +} + +.tbl-no-padding { + padding: 0px; +} + +.dcl-billing-sec { + margin-top: 50px; +} + +@media (max-width: 767px) { + .dcl-order-sec { + padding: 10px 20px 30px 20px; + border-bottom: 4px solid #eee; + } + + .tbl-header { + border-bottom: 1px solid #eee; + padding: 10px 0; + } + + .tbl-content { + border-bottom: 1px solid #eee; + padding: 10px 0; + } + + .dcl-order-table-header { + border-bottom: 0px solid #eee; + padding: 10px 0; + text-align: left; + } + + .dcl-order-table-content { + border-bottom: 0px solid #eee; + padding: 10px 0; + text-align: right; + } + + .dcl-order-table-total { + font-size: 18px; + color: #000; + padding: 10px 0; + border-bottom: 0px solid #eee; + } + + .dcl-order-table-total .tbl-total { + padding: 0px; + text-align: right; + } + + .dcl-billing-sec { + margin-top: 30px; + } +} + +@media (min-width: 1200px) { + .dcl-order-container { + width: 990px; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + } +} + +@media (min-width: 768px) { + .dcl-billing { + padding-right: 50px; + border-right: 1px solid #eee; + } + + .dcl-creditcard { + padding-left: 50px; + } + + .tbl-tot { + padding-left: 35px; + } + + .content-dashboard { + width: auto !important; + } + +} + +@media only screen and (max-width: 1330px) and (min-width: 1200px) { + .content-dashboard { + width: 100% !important; + } +} diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index faacee82..7f3aa0ab 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -2,129 +2,156 @@ {% load staticfiles bootstrap3 i18n %} {% block content %} -
-
-
-
-
-
-
-

{%trans "Billing Amount" %}

-
-
- - -

{%trans "Cores"%} {{request.session.specs.cpu|floatformat}}

-
-

{%trans "Memory"%} {{request.session.specs.memory|floatformat}} GB

-
-

{%trans "Disk space"%} {{request.session.specs.disk_size|floatformat}} GB

-
-

{%trans "Configuration"%} {{request.session.template.name}}

-
-

Total

{{request.session.specs.price }} CHF

-
-
-
-
- -
-
-

{%trans "Billing Address"%}

-
-
- {% for field in form %} +
+
+
+
+

Your Order

+
+
+ Cores +
+
+ Memory +
+
+ Disk space +
+
+ Configuration +
+
+
+
+ 1 +
+
+ 2 GB +
+
+ 10 GB +
+
+ CentOS 7 +
+
+
+
+ Total including VAT +
+
+
+
15CHF
+
+
+
+
+
+
+
+

{%trans "Billing Address"%}

+
+ + {% for field in form %} {% csrf_token %} - {% bootstrap_field field show_label=False type='fields'%} - {% endfor %} - {% bootstrap_form_errors form type='non_fields'%} - -
-
-
-
-
-

{%trans "Credit Card"%}

-
-
-
-

{% trans 'Please fill in your credit card information below. We are using Stripe for payment and do not store your information in our database.' %}

-
-
-
- {% if credit_card_data.last4 %} -
-
Credit Card
-
Last 4: *****{{credit_card_data.last4}}
-
Type: {{credit_card_data.cc_brand}}
- -
+ {% bootstrap_field field show_label=False type='fields'%} + {% endfor %} + {% bootstrap_form_errors form type='non_fields'%} + +
+
+

{%trans "Credit Card"%}

+
+
+
+

{% trans 'Please fill in your credit card information below. We are using Stripe for payment and do not + store + your + information in our database.' %}

+
+
+
+ {% if credit_card_data.last4 %} +
+
Credit Card
+
Last 4: *****{{credit_card_data.last4}}
+
Type: {{credit_card_data.cc_brand}}
+ +
-
-
-
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}

-
-
-
- -
-
-
- {% else %} - - -
-
-
- -
+
+
-
- -
-
-
-

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

-
-
-
- -
-
-
- - {% if paymentError %} -
-
-

- {% bootstrap_alert paymentError alert_type='danger' %} -

-
-
- {% endif %} +
+
+ +
+
+
+ {% else %} -
- {% endif %} +
+
+
+
+ +
+
+
+ +
+
+
+

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

+
+
+
+ +
+
+
+ + {% if paymentError %} +
+
+

+ {% bootstrap_alert paymentError alert_type='danger' %} +

+
+
+ {% endif %} -
-
-
-
-
+ + + {% endif %} + +
+
+
+
+
@@ -134,7 +161,7 @@ {%endif%} From 623c7e0d992553d9f8462fe09185224ce9b32fd4 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sat, 15 Jul 2017 20:44:28 +0530 Subject: [PATCH 02/45] Added some padding to vat text and increased its font size --- hosting/static/hosting/css/landing-page.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index bdc0b7db..53b7ab70 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -484,9 +484,10 @@ a.unlink:hover { } .dcl-order-table-total span { - font-size: 12px; + font-size: 13px; color: #999; font-weight: 400; + padding-left: 5px; } .dcl-order-table-total .tbl-total { From 481dadcfe552383ec25ec42452ca9c5af0ce77a3 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:37:19 +0530 Subject: [PATCH 03/45] Implementing new credit card js code --- hosting/static/hosting/js/payment.js | 120 +++++++++++++++++++++++++-- 1 file changed, 114 insertions(+), 6 deletions(-) diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js index af9a9e71..f0c93ba5 100644 --- a/hosting/static/hosting/js/payment.js +++ b/hosting/static/hosting/js/payment.js @@ -1,3 +1,28 @@ +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', +} + +function setBrandIcon(brand) { + var brandIconElement = document.getElementById('brand-icon'); + var pfClass = 'pf-credit-card'; + if (brand in cardBrandToPfClass) { + pfClass = cardBrandToPfClass[brand]; + } + for (var i = brandIconElement.classList.length - 1; i >= 0; i--) { + brandIconElement.classList.remove(brandIconElement.classList[i]); + } + brandIconElement.classList.add('pf'); + brandIconElement.classList.add(pfClass); +} + + + $( document ).ready(function() { @@ -32,8 +57,91 @@ $( document ).ready(function() { 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'); + //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', + }, + }, + }; + +var credit_card_text_style = { + base: { + iconColor: '#666EE8', + color: '#31325F', + lineHeight: '40px', + fontWeight: 300, + fontFamily: "'lato-light', sans-serif", + fontSize: '14px', + '::placeholder': { + color: '#777', + }, + }, +}; +var credit_card_cvv_style = { + base: { + iconColor: '#666EE8', + color: '#31325F', + lineHeight: '40px', + fontWeight: 300, + fontFamily: "'lato-regular', sans-serif", + fontSize: '14px', + '::placeholder': { + color: '#555', + }, + }, +}; + + var cardNumberElement = elements.create('cardNumber', { + style: credit_card_text_style, + placeholder : "____ ____ ____ ____", + }); + cardNumberElement.mount('#card-number-element'); + + var cardExpiryElement = elements.create('cardExpiry', { + style: credit_card_cvv_style + }); + cardExpiryElement.mount('#card-expiry-element'); + + var cardCvcElement = elements.create('cardCvc', { + style: credit_card_cvv_style + }); + cardCvcElement.mount('#card-cvc-element'); + 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); // hasCreditcard= true; @@ -53,8 +161,8 @@ $( document ).ready(function() { - var $form = $('#payment-form'); - $form.submit(payWithStripe); + //var $form = $('#payment-form'); + //$form.submit(payWithStripe); /* If you're using Stripe for payments */ function payWithStripe(e) { @@ -120,7 +228,7 @@ $( document ).ready(function() { return this.optional(element) || /^[0-9]{2}$/.test(value); }, "Please specify a valid 2-digit year."); - validator = $form.validate({ + /*validator = $form.validate({ rules: { cardNumber: { required: true, @@ -149,7 +257,7 @@ $( document ).ready(function() { errorPlacement: function(error, element) { $(element).closest('.form-group').append(error); } - }); + });*/ paymentFormReady = function() { if ($form.find('[name=cardNumber]').hasClass("success") && From 2bd5702b09dae6f42d97d84c68f336b05708eebd Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:38:48 +0530 Subject: [PATCH 04/45] Modified payment.html to include credit card number , cvv and year as separate Stripe elements --- hosting/templates/hosting/payment.html | 178 ++++++++++++++----------- 1 file changed, 103 insertions(+), 75 deletions(-) diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index 7f3aa0ab..c96e408e 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -2,46 +2,49 @@ {% load staticfiles bootstrap3 i18n %} {% block content %} +
-

Your Order

+

{%trans "Your Order" %}

-
- Cores +
+ {%trans "Cores" %}
- Memory + {%trans "Memory" %}
-
- Disk space +
+ {%trans "Disk space" %}
- Configuration + {%trans "Configuration" %}
-
- 1 +
+ {{request.session.specs.cpu|floatformat}}
- 2 GB + {{request.session.specs.memory|floatformat}} GB
-
- 10 GB +
+ {{request.session.specs.disk_size|floatformat}} GB
- CentOS 7 + {{request.session.template.name}}
- Total including VAT + Total {%trans "including VAT" %}
-
15CHF
+
{{request.session.specs.price}} + CHF +
@@ -64,11 +67,13 @@
-

{% trans 'Please fill in your credit card information below. We are using Stripe for payment and do not - store - your - information in our database.' %}

+

+ {% blocktrans %} + Please fill in your credit card information below. We are using Stripe for payment and do not store + your information in our database. + {% endblocktrans %} +


@@ -81,78 +86,101 @@
-
-
-
-
-
- -
-
-
- {% else %} - - -
-
-
-
- -
-
-
- -
-
-

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

+

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

-
-
From 30058efa415316878ae2461f1e1d79897c5a1a4f Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:39:37 +0530 Subject: [PATCH 05/45] Inroduced credit card holder's name in Billing Address --- utils/forms.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/utils/forms.py b/utils/forms.py index 15086dc6..250ba803 100644 --- a/utils/forms.py +++ b/utils/forms.py @@ -104,8 +104,9 @@ class BillingAddressForm(forms.ModelForm): class Meta: model = BillingAddress - fields = ['street_address', 'city', 'postal_code', 'country'] + fields = ['cardholder_name', 'street_address', 'city', 'postal_code', 'country'] labels = { + 'cardholder_name': _('Cardholder Name'), 'street_address': _('Street Address'), 'city': _('City'), 'postal_code': _('Postal Code'), From 9d4cbb2be527478b3d681b9e7bc7d63ae801de21 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:40:30 +0530 Subject: [PATCH 06/45] Introduced credit card holder's name in BaseBillingAddress model --- utils/models.py | 1 + 1 file changed, 1 insertion(+) diff --git a/utils/models.py b/utils/models.py index 2aee584b..bd03f822 100644 --- a/utils/models.py +++ b/utils/models.py @@ -8,6 +8,7 @@ from .fields import CountryField # Create your models here. class BaseBillingAddress(models.Model): + cardholder_name = models.CharField(max_length=100) street_address = models.CharField(max_length=100) city = models.CharField(max_length=50) postal_code = models.CharField(max_length=50) From 73982f3c7bc58f74b91c41d10fe6cc0ef5d57654 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:41:20 +0530 Subject: [PATCH 07/45] Updated DE translations for some reformatted EN texts --- hosting/locale/de/LC_MESSAGES/django.po | 86 ++++++++++++++++--------- 1 file changed, 57 insertions(+), 29 deletions(-) diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po index 89257629..547406a9 100644 --- a/hosting/locale/de/LC_MESSAGES/django.po +++ b/hosting/locale/de/LC_MESSAGES/django.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2017-07-11 00:02+0530\n" +"POT-Creation-Date: 2017-07-16 03:34+0530\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" @@ -26,47 +26,47 @@ msgstr "Dein Account wurde noch nicht aktiviert." msgid "Paste here your public key" msgstr "Fügen Sie Ihren public key ein" -#: templates/hosting/base_short.html:68 +#: templates/hosting/base_short.html:71 msgid "My Virtual Machines" msgstr "Meine virtuellen Maschinen" -#: templates/hosting/base_short.html:73 templates/hosting/orders.html.py:12 +#: templates/hosting/base_short.html:76 templates/hosting/orders.html.py:12 msgid "My Orders" msgstr "Meine Bestellungen" -#: templates/hosting/base_short.html:82 +#: templates/hosting/base_short.html:85 msgid "Keys" msgstr "Schlüssel" -#: templates/hosting/base_short.html:87 +#: templates/hosting/base_short.html:90 msgid "Notifications " msgstr "Benachrichtigungen" -#: templates/hosting/base_short.html:90 +#: templates/hosting/base_short.html:93 msgid "Logout" msgstr "Abmelden" -#: templates/hosting/base_short.html:95 +#: templates/hosting/base_short.html:98 msgid "How it works" msgstr "So funktioniert es" -#: templates/hosting/base_short.html:98 +#: templates/hosting/base_short.html:101 msgid "Your infrastructure" msgstr "deine Infrastruktur" -#: templates/hosting/base_short.html:101 +#: templates/hosting/base_short.html:104 msgid "Our inftrastructure" msgstr "Unsere Infrastruktur" -#: templates/hosting/base_short.html:104 +#: templates/hosting/base_short.html:107 msgid "Pricing" msgstr "Preise" -#: templates/hosting/base_short.html:107 +#: templates/hosting/base_short.html:110 msgid "Contact" msgstr "Kontakt" -#: templates/hosting/base_short.html:110 +#: templates/hosting/base_short.html:113 #: templates/hosting/confirm_reset_password.html:38 #: templates/hosting/login.html:17 templates/hosting/login.html.py:26 #: templates/hosting/reset_password.html:32 templates/hosting/signup.html:30 @@ -289,17 +289,17 @@ msgstr "Bezahlmethode" msgid "Order summary" msgstr "Bestellungsübersicht" -#: templates/hosting/order_detail.html:65 templates/hosting/payment.html:17 +#: templates/hosting/order_detail.html:65 templates/hosting/payment.html:13 #: templates/hosting/virtual_machine_detail.html:76 msgid "Cores" msgstr "Prozessorkerne" -#: templates/hosting/order_detail.html:67 templates/hosting/payment.html:20 +#: templates/hosting/order_detail.html:67 templates/hosting/payment.html:16 #: templates/hosting/virtual_machine_detail.html:82 msgid "Memory" msgstr "Arbeitsspeicher" -#: templates/hosting/order_detail.html:69 templates/hosting/payment.html:23 +#: templates/hosting/order_detail.html:69 templates/hosting/payment.html:19 msgid "Disk space" msgstr "Festplattenkapazität" @@ -349,46 +349,71 @@ msgstr "Schliessen" msgid "Delete" msgstr "Löschen" -#: templates/hosting/payment.html:12 -msgid "Billing Amount" -msgstr "Rechnungsbetrag" +#: templates/hosting/payment.html:10 +msgid "Your Order" +msgstr "" -#: templates/hosting/payment.html:26 +#: templates/hosting/payment.html:22 #: templates/hosting/virtual_machine_detail.html:98 msgid "Configuration" msgstr "Konfiguration" -#: templates/hosting/payment.html:38 +#: templates/hosting/payment.html:41 +msgid "including VAT" +msgstr "" + +#: templates/hosting/payment.html:55 msgid "Billing Address" msgstr "Rechnungsadresse" -#: templates/hosting/payment.html:52 +#: templates/hosting/payment.html:66 msgid "Credit Card" msgstr "Kreditkarte" -#: templates/hosting/payment.html:56 +#: templates/hosting/payment.html:71 msgid "" -"Please fill in your credit card information below. We are using Stripe for payment and do not " -"store your information in our database." +"\n" +" Please fill in your credit card information " +"below. We are using Stripe for payment and do not store\n" +" your information in our database.\n" +" " msgstr "" "Bitte füll deine Kreditkarteninformationen unten aus. Wir nutzen Stripe für die Bezahlung und " "speichern keine Informationen in unserer Datenbank." -#: templates/hosting/payment.html:71 templates/hosting/payment.html.py:96 +#: templates/hosting/payment.html:91 msgid "" -"You are not making any payment yet. After submitting your card information, " -"you will be taken to the Confirm Order Page." +"\n" +" You are not making any payment yet. " +"After submitting your card\n" +" information, you will be taken to " +"the Confirm Order Page.\n" +" " msgstr "" "Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe deiner " "Kreditkateninformationen wirst du auf die Bestellbestätigungsseite " "weitergeleitet." -#: templates/hosting/payment.html:76 templates/hosting/payment.html.py:100 +#: templates/hosting/payment.html:102 templates/hosting/payment.html.py:155 msgid "Submit" msgstr "Absenden" +#: templates/hosting/payment.html:147 +msgid "" +"\n" +" You are not making any payment " +"yet. After submitting your card\n" +" information, you will be taken " +"to the Confirm Order Page.\n" +" " +msgstr "" +"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe deiner " +"Kreditkateninformationen wirst du auf die Bestellbestätigungsseite " +"weitergeleitet." + #: templates/hosting/reset_password.html:15 msgid "Reset your password" msgstr "Passwort zurücksetzen" @@ -535,6 +560,9 @@ msgid "" "contact Data Center Light Support." msgstr "" +#~ msgid "Billing Amount" +#~ msgstr "Rechnungsbetrag" + #~ msgid "Payment Details" #~ msgstr "Rechnungsdetails" From b64198c2c06331209b4f0355dba04b9588bc3951 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:41:54 +0530 Subject: [PATCH 08/45] Added styles for the new credit card form --- hosting/static/hosting/css/landing-page.css | 54 +++++++++++++++++++-- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 53b7ab70..54076de3 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -456,10 +456,10 @@ a.unlink:hover { border-bottom: 1px solid #eee; padding-top: 15px; padding-bottom: 15px; - font-size: 18px; - color: #999; + font-size: 16px; + color: #333; text-align: center; - font-weight: 400; + font-weight: 300; } .dcl-order-table-content { @@ -503,7 +503,51 @@ a.unlink:hover { margin-top: 50px; } +.dcl-order-sec { + padding: 0 30px; +} + +.card-warning-content { + font-family: Lato; + border: 1px solid #a1a1a1; + border-radius: 3px; + padding: 5px; +} + +.stripe-payment-btn{ + width: auto; + float: right; + font-style: normal; + font-weight: bold; + position: absolute; + right: 0; +} +.brand { + float: left; + width: 8%; +} +.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%; +} + @media (max-width: 767px) { + .dcl-order-table-total span { + padding-left: 3px; + } + .dcl-order-sec { padding: 10px 20px 30px 20px; border-bottom: 4px solid #eee; @@ -529,6 +573,7 @@ a.unlink:hover { border-bottom: 0px solid #eee; padding: 10px 0; text-align: right; + font-size: 16px; } .dcl-order-table-total { @@ -545,6 +590,7 @@ a.unlink:hover { .dcl-billing-sec { margin-top: 30px; + margin-bottom: 30px; } } @@ -569,7 +615,7 @@ a.unlink:hover { } .tbl-tot { - padding-left: 35px; + padding-left: 17px; } .content-dashboard { From ba72527f2fabdfea9cdb127c1a768f741ed75f5b Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 15:23:18 +0530 Subject: [PATCH 09/45] Added validations for credit card inputs. Made credit card holder's name default value empty in the model. --- hosting/static/hosting/js/payment.js | 82 ++++++++++++++++++++------ hosting/templates/hosting/payment.html | 78 ++++++++++++++++-------- utils/models.py | 2 +- 3 files changed, 116 insertions(+), 46 deletions(-) diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js index f0c93ba5..737221e9 100644 --- a/hosting/static/hosting/js/payment.js +++ b/hosting/static/hosting/js/payment.js @@ -1,5 +1,5 @@ var cardBrandToPfClass = { - 'visa': 'pf-visa', + 'visa': 'pf-visa', 'mastercard': 'pf-mastercard', 'amex': 'pf-american-express', 'discover': 'pf-discover', @@ -24,10 +24,6 @@ function setBrandIcon(brand) { $( document ).ready(function() { - - - - $.ajaxSetup({ beforeSend: function(xhr, settings) { function getCookie(name) { @@ -57,8 +53,8 @@ $( document ).ready(function() { 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'); + /*var card = elements.create('card', options={hidePostalCode: true}); + card.mount('#card-element');*/ /* new card */ var server_url = "https://datacenterlight.ch"; var element_style = { @@ -100,7 +96,19 @@ var credit_card_text_style = { 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', @@ -113,7 +121,19 @@ var credit_card_cvv_style = { 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, @@ -135,12 +155,12 @@ var credit_card_cvv_style = { if (event.brand) { setBrandIcon(event.brand); } - setOutcome(event); + //setOutcome(event); }); - $('#payment-form').submit(function(e) { + /*$('#payment-form').submit(function(e) { e.preventDefault(); stripe.createToken(cardNumberElement).then(setOutcome); - }); + });*/ /* new card end */ } console.log("has creditcard", hasCreditcard); @@ -162,7 +182,9 @@ var credit_card_cvv_style = { //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) { @@ -173,7 +195,6 @@ var credit_card_cvv_style = { var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); $('#id_token').val(token.id); - $('#billing-form').submit(); } @@ -218,7 +239,30 @@ var credit_card_cvv_style = { // } // }); } + 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(); + } + + + 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; + } else { + $form_new.find('[type=submit]').html('Processing '); + // 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); @@ -228,7 +272,7 @@ var credit_card_cvv_style = { return this.optional(element) || /^[0-9]{2}$/.test(value); }, "Please specify a valid 2-digit year."); - /*validator = $form.validate({ + validator = $form_new.validate({ rules: { cardNumber: { required: true, @@ -257,13 +301,13 @@ var credit_card_cvv_style = { errorPlacement: function(error, element) { $(element).closest('.form-group').append(error); } - });*/ + }); paymentFormReady = function() { - if ($form.find('[name=cardNumber]').hasClass("success") && - $form.find('[name=expMonth]').hasClass("success") && - $form.find('[name=expYear]').hasClass("success") && - $form.find('[name=cvCode]').val().length > 1) { + 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; diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index c96e408e..a73d09d6 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -84,7 +84,6 @@
Type: {{credit_card_data.cc_brand}}
-

@@ -104,40 +103,20 @@

+ {% else %} - -
+
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
+
@@ -171,9 +150,56 @@
{% endif %} + > + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

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

+
+
+
+ +
+
+
- -
+ + {% if paymentError %} +
+
+

+ {% bootstrap_alert paymentError alert_type='danger' %} +

+
+
+ {% endif %} + + {% endif %} diff --git a/utils/models.py b/utils/models.py index bd03f822..c45b25bc 100644 --- a/utils/models.py +++ b/utils/models.py @@ -8,7 +8,7 @@ from .fields import CountryField # Create your models here. class BaseBillingAddress(models.Model): - cardholder_name = models.CharField(max_length=100) + cardholder_name = models.CharField(max_length=100, default="") street_address = models.CharField(max_length=100) city = models.CharField(max_length=50) postal_code = models.CharField(max_length=50) From acaa791a37a35672b463521efb7e7904f48b0a3b Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 15:50:15 +0530 Subject: [PATCH 10/45] Fixed MM/YY and CVV for mobile view --- hosting/static/hosting/css/landing-page.css | 19 ++++++++++++++++++- hosting/templates/hosting/payment.html | 8 +++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 54076de3..9f54e22b 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -524,7 +524,7 @@ a.unlink:hover { } .brand { float: left; - width: 8%; + width: 10%; } .brand #brand-icon { vertical-align: bottom; @@ -592,6 +592,23 @@ a.unlink:hover { margin-top: 30px; margin-bottom: 30px; } + + .credit-card-element-with-brand { + width: 100%; + float: left; + } + + .brand { + width: 16%; + } + + .card-expiry-element { + width: 40%; + } + + .card-cvc-element { + width: 15%; + } } @media (min-width: 1200px) { diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index a73d09d6..230c0bdf 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -155,9 +155,11 @@
-
-
-
+
+
+
+
+
From b67a12f01b33b0b74c51b43071143e21fb9099b1 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 16:04:15 +0530 Subject: [PATCH 11/45] Adjusted styles for error message --- hosting/static/hosting/css/landing-page.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 9f54e22b..a50ae6fd 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -543,6 +543,12 @@ a.unlink:hover { width: 10%; } +#card-errors { + clear: both; + padding: 0 0 10px; + color: #eb4d5c; +} + @media (max-width: 767px) { .dcl-order-table-total span { padding-left: 3px; From a37464f8b3772222656ff98a8c19d6aa053aef1f Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 16:35:02 +0530 Subject: [PATCH 12/45] Removed some unreachable code from utils/forms.py --- utils/forms.py | 4 ---- 1 file changed, 4 deletions(-) diff --git a/utils/forms.py b/utils/forms.py index 250ba803..f8746c11 100644 --- a/utils/forms.py +++ b/utils/forms.py @@ -50,8 +50,6 @@ class LoginFormMixin(forms.Form): return email except CustomUser.DoesNotExist: raise forms.ValidationError("User does not exist") - else: - return email class PasswordResetRequestForm(forms.Form): @@ -67,8 +65,6 @@ class PasswordResetRequestForm(forms.Form): return email except CustomUser.DoesNotExist: raise forms.ValidationError("User does not exist") - else: - return email class SetPasswordForm(forms.Form): From 083b870b338073c4c62f072be449d0ebe3a1eaa6 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 16:35:55 +0530 Subject: [PATCH 13/45] Formatted utils/forms.py --- utils/forms.py | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/utils/forms.py b/utils/forms.py index f8746c11..c521e3ba 100644 --- a/utils/forms.py +++ b/utils/forms.py @@ -5,11 +5,12 @@ from django.core.mail import EmailMultiAlternatives from django.utils.translation import ugettext_lazy as _ from django.contrib.auth import authenticate from membership.models import CustomUser + + # from utils.fields import CountryField class SignupFormMixin(forms.ModelForm): - confirm_password = forms.CharField(widget=forms.PasswordInput()) password = forms.CharField(widget=forms.PasswordInput()) @@ -87,7 +88,7 @@ class SetPasswordForm(forms.Form): if password1 != password2: raise forms.ValidationError( self.error_messages['password_mismatch'], - code='password_mismatch',) + code='password_mismatch', ) return password2 From ed52e396d927949374b0f811aaca7b7c416b1ffd Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 16:36:38 +0530 Subject: [PATCH 14/45] Formatted utils/models.py --- utils/models.py | 1 - 1 file changed, 1 deletion(-) diff --git a/utils/models.py b/utils/models.py index c45b25bc..c08f4008 100644 --- a/utils/models.py +++ b/utils/models.py @@ -19,7 +19,6 @@ class BaseBillingAddress(models.Model): class BillingAddress(BaseBillingAddress): - def __str__(self): return self.street_address From a87c0a89eb21772d27411d5538168b94be65619c Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 16:37:49 +0530 Subject: [PATCH 15/45] Refactored and formatted unused code in hosting's payment.html payment.js landing-page.css --- hosting/static/hosting/css/landing-page.css | 13 +- hosting/static/hosting/js/payment.js | 345 ++++++++------------ hosting/templates/hosting/payment.html | 84 ++--- 3 files changed, 157 insertions(+), 285 deletions(-) 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 %}