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

<template>
    <div class="pay-wrapper">
        <div class="pay-msg">
            <div class="row">Pay ${{amount || 0}}</div>
            <div class="msg">Generate Giveaways</div>
        </div>
        <div class="pay-btn">
            <iframe
                class="iframe-pay"
                ref="iframe"
                :src="`https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/paypal.html?amount=${amount}`"></iframe>
        </div>
    </div>
</template>

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

let iframe = ref(null);

const props = defineProps({
    amount: {
        type: Number,
        default: 0,
    },
});

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;
                case "iframeLoaded":
                    iframe.value.contentWindow.postMessage(
                        { actionType: "setAmount", amount: props.amount },
                        "*"
                    );
                    break;
            }
        }
    });
});
</script>

<style lang="scss" scoped>
.pay-wrapper {
    width: 100%;
    height: 68px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0px -2px 20px 0px #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: 17px;
        }
        .msg {
            font-size: 13px;
            color: rgba($color: #000000, $alpha: .54);
        }
    }

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

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