Implementing new credit card js code

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});
+        //var card = elements.create('card', options={hidePostalCode: true});
-        card.mount('#card-element');
+        //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');
+    //var $form = $('#payment-form');
-    $form.submit(payWithStripe);
+    //$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") &&