payment ui

src/main/ui/static/templates/payment/v1/card_pay.js

@@ -1,7 +1,10 @@
 $(function () {
     let $container = $('.card-input-box')[0];
+    let ctrl = {ready: false, pending: false}
     let cardFrame = window.channel_account_id ? new TokenInputFrame($container, window.channel_account_id) : new CardInputFrame($container);
+    let $errorMsgBox = $('#errorMsgBox');
     cardFrame.onSuccess = function (secretData) {
+        ctrl.pending = true;
         $.ajax({
             url: 'commit',
             data: JSON.stringify(secretData),
@@ -11,10 +14,11 @@ $(function () {
                 startCheckOrder(window.client_moniker, window.partner_order_id);
             },
             error: function (jqXHR) {
+                ctrl.pending = false;
                 let errorText = jqXHR.responseText;
                 let err = JSON.parse(errorText);
-                if(err){
-                    $('#errorMsgBox').text(err.message).show();
+                if (err) {
+                    $errorMsgBox.text(err.message).show();
                 }
             }
         })
@@ -25,16 +29,26 @@ $(function () {
         border: 'none',
         borderRadius: '10px'
     };
-    cardFrame.onReady = function(){
-        $('#readyModal').hide()
+    cardFrame.onReady = function () {
+        $('#readyModal').hide();
+        $('#payBtn').removeAttr('disabled');
+        ctrl.ready = true;
     };
     cardFrame.onError = function (msg) {
-        $('#errorMsgBox').text(msg).show();
+        $errorMsgBox.text(msg).show();
     };
     cardFrame.show();
 
     $('#payBtn').click(function () {
-        $('#errorMsgBox').hide();
+        if (!ctrl.ready) {
+            $errorMsgBox.text('Loading...').show();
+            return;
+        }
+        if (ctrl.pending) {
+            $errorMsgBox.text('Pending...').show();
+            return;
+        }
+        $errorMsgBox.hide();
         cardFrame.commit();
     });