de-net/src/view/components/paypal-button.vue

<template>
    <div class="pay-wrapper">
        <div class="pay-msg">
            <div class="row">Pay ${{finalAmountData.finalAmountValue || 0}}<span>(Available ${{finalAmountData.requestAmountValue / 100}})</span></div>
            <div class="msg">Paypal charges fee: 4.4% + $0.3</div>
        </div>
        <div class="pay-btn">
            <iframe
                class="iframe-pay"
                ref="iframe"
                :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&a=${props.finalAmountData.finalAmountValue}`"></iframe>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, defineProps, defineEmits, watch } from "vue";

let iframe = ref(null);

const props = defineProps({
    finalAmountData: {
        type: Object,
        default: () => {
            return {
                currencyCode: "USD",
                feeAmountValue: 0,
                finalAmountValue: 0,
                requestAmountValue: 0
            }
        },
    },
    payConfig: {
        type: Object,
        default: () => {
            return {
                paypalClientId: '',
                paypalHtml: 'https://d1mcov78iir8kk.cloudfront.net/website/paypal_1.html'
            }
        }
    }
});

watch(
    () => props.finalAmountData.finalAmountValue,
    (newVal) => {
        iframe.value.contentWindow.postMessage({ 
            actionType: "setAmount", amount: newVal
        },
            "*"
        );
    },
    {
        deep: true
    }
);

const emits = defineEmits(["payPalFinsh"]);

onMounted(() => {
    window.addEventListener("message", function (event) {
        if (event.data && event.data.actionType) {
            switch (event.data.actionType) {
                case "payCallBack":
                    console.log(
                        "payCallBack",
                        event.data.orderData,
                        event.data.transaction
                    );
                    emits("payPalFinsh", event.data);
                    break;
            }
        }
    });
});

</script>

<style lang="scss" scoped>
.pay-wrapper {
    width: 100%;
    height: 68px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0 -4px 8px -3px #00000026;
    border-bottom-right-radius: 16px;
    padding: 12px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .pay-msg {
        text-align: right;
        margin-right: 25px;

        .row {
            font-weight: 600;
            font-size: 16px;
            color: #389AFF;
            span {
                display: inline-block;
                color: #000000;
                margin-left: 6px;
            }
        }
        .msg {
            font-size: 13px;
            color: #898989;
        }
    }

    .pay-btn {
        width: 206px;
        height: 48px;

        iframe {
            border: medium none;
            width: 100%;
            height: 100%;
        }
    }
}
</style>