diff --git a/src/main/ui/static/templates/payment/v1/card_pay.js b/src/main/ui/static/templates/payment/v1/card_pay.js
index ba68674fc..b8ccf86aa 100644
--- a/src/main/ui/static/templates/payment/v1/card_pay.js
+++ b/src/main/ui/static/templates/payment/v1/card_pay.js
@@ -5,8 +5,6 @@ $(function () {
     let $errorMsgBox = $('#errorMsgBox');
     let loading = $('.loading-container');
     cardFrame.onSuccess = function (secretData) {
-        ctrl.pending = true;
-        loading.removeClass('hide');
         $.ajax({
             url: 'commit',
             data: JSON.stringify(secretData),
@@ -40,6 +38,8 @@ $(function () {
     };
     cardFrame.onError = function (msg) {
         $errorMsgBox.text(msg).show();
+        ctrl.pending = false;
+        loading.addClass('hide')
     };
     cardFrame.show();
 
@@ -52,6 +52,8 @@ $(function () {
             $errorMsgBox.text('Pending...').show();
             return;
         }
+        ctrl.pending = true;
+        loading.removeClass('hide');
         $errorMsgBox.hide();
         cardFrame.commit();
     });