Changes stripe v2 to stripe v3 and added localization support

Changelog

@@ -12,3 +12,5 @@ next
 	* [opennebula_api] Improve testing, add ssh key functions
 	* [opennebula_api] Remove template views
 	* [datacenterlight] Allow user to have multiple ssh keys 
+        * [datacenterlight] Changed stripe.js v2 to v3
+        * [datacenterlight] Added support for stripe payment errors on current user language 

hosting/static/hosting/js/payment.js

@@ -1,5 +1,11 @@
 $( document ).ready(function() {
 
+
+    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');
+
     $.ajaxSetup({ 
          beforeSend: function(xhr, settings) {
              function getCookie(name) {
@@ -38,10 +44,8 @@ $( document ).ready(function() {
       console.log("creditcard sdasd");
       // if (hasCreditcard) {
          $('#billing-form').submit();
-         console.log("has creditcard2");
       // }
      
-      // $form.submit();
     }
 
 
@@ -53,33 +57,55 @@ $( document ).ready(function() {
     function payWithStripe(e) {
         e.preventDefault();
 
-        /* Visual feedback */
+        function stripeTokenHandler(token) {
-        $form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
+          // 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);
 
-        var PublishableKey = window.stripeKey;
+          $('#billing-form').submit();
-        Stripe.setPublishableKey(PublishableKey);
+        }
-        Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
+
-            if (response.error) {
+
-                /* Visual feedback */
+        stripe.createToken(card).then(function(result) {
-                $form.find('[type=submit]').html('Try again');
+            if (result.error) {
-                /* Show Stripe errors on the form */
+              // Inform the user if there was an error
-                $form.find('.payment-errors').text(response.error.message);
+              var errorElement = document.getElementById('card-errors');
-                $form.find('.payment-errors').closest('.row').show();
+              errorElement.textContent = result.error.message;
             } else {
-                /* Visual feedback */
                 $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
-                /* Hide Stripe errors on the form */
+                // Send the token to your server
-                $form.find('.payment-errors').closest('.row').hide();
+                stripeTokenHandler(result.token);
-                $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();
             }
         });
+
+        // /* 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();
+        //     }
+        // });
     }
 
     /* Form validation */
@@ -131,7 +157,7 @@ $( document ).ready(function() {
         } else {
             return false;
         }
-    }
+    };
 
     // $form.find('[type=submit]').prop('disabled', true);
     // var readyInterval = setInterval(function() {

hosting/templates/hosting/base_short.html

@@ -184,8 +184,9 @@
     <!-- Init JavaScript -->
     <script src="{% static 'hosting/js/initial.js' %}"></script>
 
+    <script src="https://js.stripe.com/v3/"></script>
+    <script src="https://js.stripe.com/v2/"></script>
     <!-- Stripe Lib -->
-    <script type="text/javascript" src="//js.stripe.com/v2/"></script>
 
     <!-- Proccess payment lib -->
     <script type="text/javascript" src="{% static 'hosting/js/payment.js' %}"></script>

hosting/templates/hosting/payment.html

@@ -62,7 +62,16 @@
 
 
 	                    <form role="form" id="payment-form" novalidate>
-	                        <div class="row">
+                            <div class="row">
+                            <div class="form-group">
+                            <div id="card-element">
+                              <!-- a Stripe Element will be inserted here. -->
+                              </div>
+                            </div>
+                             </div>
+                             <div id="card-errors" role="alert"></div>
+
+<!-- 	                        <div class="row">
 	                            <div class="col-xs-9 col-md-12">
 	                                <div class="form-group">
 	                                    <label class="control-label" for="cardNumber">CARD NUMBER</label>
@@ -91,10 +100,10 @@
 	                                    <input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
 	                                </div>
 	                            </div>
-	                        </div>
+	                        </div> -->
 	                        <div class="row">
-	                            <div class="col-xs-12">
+	                            <div class="col-xs-6 float-right">
-	                                <button class="btn btn-success btn-lg btn-block" type="submit">Submit Payment</button>
+	                                <button class="btn btn-success btn-sm btn-block" type="submit">Submit Payment</button>
 	                            </div>
 	                        </div>
 	                        <div class="row" style="display:none;">
@@ -115,6 +124,7 @@
                            
 	                    </form>
                     {% endif %}
+
 	                </div>
 	            </div>
 	        </div>
@@ -125,8 +135,14 @@
 
 <!-- stripe key data -->
 {% if stripe_key %}
+{% get_current_language as LANGUAGE_CODE %}
 <script type="text/javascript"> 
-     (function () {window.stripeKey = "{{stripe_key}}";})();
+
+
+     (function () {
+        window.stripeKey = "{{stripe_key}}";
+        window.current_lan = "{{LANGUAGE_CODE}}";
+    })();
 </script>
 {%endif%}
 

utils/stripe_utils.py

@@ -10,6 +10,7 @@ def handleStripeError(f):
             'response_object': None,
             'error': None
         }
+        import pdb;pdb.set_trace()
         common_message = "Currently its not possible to make payments."
         try:
             response_object = f(*args, **kwargs)