CSR-1391 afterpay button and pop up

src/layouts/payment-method/payment-method.vue

@@ -66,6 +66,15 @@
                                 alt="PayPal" />
                         </button>
                     </div>
+                    <div>
+                        <button v-on:click="afterpay">
+                            <img
+                                src="https://business.afterpay.com/rs/539-RJA-633/images/AP_logo_badge_6328x2204_blackmint_png.png"
+                                width="100"
+                                height="26"
+                                alt="Afterpay" />
+                        </button>
+                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -221,6 +230,16 @@ export default {
                 this.$route
             );
         },
+        async afterpay() {
+            this.$refs.loadingModal.showModal();
+            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "ap", false);
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_PAY_NOW,
+                this.$route
+            );
+        },
     },
     computed: {
         damageInfo() {

src/layouts/payment/payment.vue

@@ -11,6 +11,7 @@
             <hr class="mt-0" />
             <div id="card-container">
                 <iframe
+                    ref="paymentFrame"
                     class="hop-iframe payment-iframe"
                     name="card-frame"
                     id="card-frame"
@@ -308,6 +309,17 @@ export default {
 
             this.$nextTick(() => {
                 this.$refs.myForm.submit();
+
+                if (this.paymentType == "ap") {
+                    const iframe = this.$refs.paymentFrame;
+                    if (iframe) {
+                        iframe.onload = () => {
+                            if (iframe.contentWindow) {
+                                iframe.contentWindow.postMessage("afterpay", "*");
+                            }
+                        };
+                    }
+                }
             });
         },
     },