billing: Make card change use create_ajax_request.

static/js/billing/billing.js

@@ -70,25 +70,7 @@ $(function () {
             image: '/static/images/logo/zulip-icon-128x128.png',
             locale: 'auto',
             token: function (stripe_token) {
-                loading.make_indicator($('#updating_card_indicator'),
+                create_ajax_request("/json/billing/sources/change", "cardchange", stripe_token = stripe_token);
-                                       {text: 'Updating card. Please wait ...', abs_positioned: true});
-                $("#payment-section").hide();
-                $("#loading-section").show();
-                $.post({
-                    url: "/json/billing/sources/change",
-                    data: {
-                        stripe_token: JSON.stringify(stripe_token.id),
-                    },
-                    success: function () {
-                        $("#loading-section").hide();
-                        $("#card-updated-message").show();
-                        location.reload();
-                    },
-                    error: function (xhr) {
-                        $("#loading-section").hide();
-                        $('#error-message-box').show().text(JSON.parse(xhr.responseText).msg);
-                    },
-                });
             },
         });
 

static/styles/billing.scss

@@ -175,7 +175,7 @@
         display: none;
     }
 
-    #loading-section,
+    #cardchange-loading,
     #invoice-loading,
     #autopay-loading {
         display: none;
@@ -184,13 +184,14 @@
     }
 
 
-    #card-updated-message,
+    #cardchange-success,
     #invoice-success,
     #autopay-success {
         text-align: center;
         display: none;
     }
 
+    #cardchange-error,
     #invoice-error,
     #autopay-error {
         text-align: center;
@@ -218,24 +219,20 @@
         stroke: hsl(0, 0%, 100%);
     }
 
-    #updating_card_indicator,
+    #cardchange_loading_indicator,
     #invoice_loading_indicator,
     #autopay_loading_indicator {
         margin: 10px auto;
     }
 
-    #updating_card_indicator .loading_indicator_text {
+    #cardchange_loading_indicator_box_container,
-        margin-left: -75px;
-    }
-
-    #updating_card_indicator_box_container,
     #invoice_loading_indicator_box_container,
     #autopay_loading_indicator_box_container {
         position: absolute;
         left: 50%;
     }
 
-    #updating_card_indicator_box,
+    #cardchange_loading_indicator_box,
     #invoice_loading_indicator_box,
     #autopay_loading_indicator_box {
         position: relative;
@@ -247,6 +244,7 @@
         border-radius: 6px;
     }
 
+    #cardchange_loading_indicator .loading_indicator_text,
     #invoice_loading_indicator .loading_indicator_text,
     #autopay_loading_indicator .loading_indicator_text {
         margin-left: -115px;

templates/corporate/billing.html

@@ -27,6 +27,7 @@
                     <li><a data-toggle="tab" href="#payment-method">Payment Method</a></li>
                 </ul>
 
+                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                 <div class="tab-content">
                     <div class="tab-pane active" id="overview">
                         <p>Your current plan is <strong>{{ plan_name }}</strong>.</p>
@@ -37,16 +38,18 @@
                         </p>
                     </div>
                     <div class="tab-pane" id="payment-method" data-email="{{stripe_email}}" data-key="{{publishable_key}}">
-                        <div id="payment-section">
+                        <div id="cardchange-error" class="alert alert-danger"></div>
+                        <div id="cardchange-input-section">
+                            <form id="cardchange-form">
                                 <p>Current payment method: <strong>{{ payment_method }}</strong></p>
                                 {% if charge_automatically %}
-                            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                                 <button id="update-card-button" class="stripe-button-el">
                                     <span id="update-card-button-span">Update card</span>
                                 </button>
                                 {% endif %}
+                            </form>
                         </div>
-                        <div id="loading-section">
+                        <div id="cardchange-loading">
                             <div class="zulip-loading-logo">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
                                     <g transform="translate(-297.14285,-466.64792)">
@@ -55,9 +58,9 @@
                                     </g>
                                 </svg>
                             </div>
-                            <div id="updating_card_indicator"></div>
+                            <div id="cardchange_loading_indicator"></div>
                         </div>
-                        <div id="card-updated-message" class="alert alert-success">
+                        <div id="cardchange-success" class="alert alert-success">
                             Card updated. The page will now reload.
                         </div>
                     </div>