Add a ui-block to page after credit card submit event

src/layouts/payment/payment.vue

@@ -47,6 +47,8 @@
                         @back-clicked="backButtonAction" />
                 </div>
             </div>
+
+            <div v-if="shouldBlockInteraction" class="ui-block" @click="supressClick"></div>
         </div>
     </Form>
 
@@ -231,6 +233,8 @@ export default {
             piaLineItems: "",
             lineItems: [],
             availableVaps: [],
+
+            shouldBlockInteraction: false,
         };
     },
     directives: {
@@ -598,12 +602,23 @@ export default {
             if (event.data.indexOf("afterpayClosed") > -1) {
                 this.backButtonAction();
             }
+            if (event.data.indexOf("creditCardSubmit") > -1) {
+                this.setUIBlock(true);
+            }
         },
         setIFrameListener() {
             window.addEventListener("message", (event) =>
                 this.handleIFrameContentWindwMessage(event)
             );
         },
+        setUIBlock(val) {
+            this.shouldBlockInteraction = val;
+        },
+        supressClick(event) {
+            if (this.shouldBlockInteraction) {
+                event.stopPropagation();
+            }
+        },
     },
     components: {
         funnelHeader,
@@ -625,4 +640,13 @@ export default {
 #pageLoadingModal {
     background-color: red;
 }
+
+.ui-block {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+}
 </style>