From 481dadcfe552383ec25ec42452ca9c5af0ce77a3 Mon Sep 17 00:00:00 2001 From: PCoder Date: Sun, 16 Jul 2017 03:37:19 +0530 Subject: [PATCH] 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") &&