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

<template>
    <div class="pay-wrapper">
        <div class="pay-msg">
            <div class="row">
                <template v-if="currentCurrencyInfo.currencyCode == 'USD'">
                    Pay ${{finalAmountData.finalAmountValue || 0}} 
                    <span>
                        (Available ${{finalAmountData.requestAmountValue}})
                    </span>
                </template>
                <template v-else>
                    <span class="desc">
                        Pay
                    </span>
                    {{payConfig.amount || 0}}
                    <img :src="currentCurrencyInfo.iconPath" class="icon">
                    <span>
                        {{currentCurrencyInfo.tokenSymbol}}
                    </span>
                </template>
            </div>
            <div class="msg">
                <template v-if="currentCurrencyInfo.currencyCode == 'USD'">
                    {{payConfig.feeDesc}}
                </template>
                <template v-else>
                    (Balance: {{currentCurrencyInfo.balance}})
                </template>
            </div>
        </div>
        <div class="pay-btn">
            <iframe
                v-show="currentCurrencyInfo.currencyCode == 'USD'"
                class="iframe-pay"
                ref="iframe"
                :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe>
            <div class="token-pay" 
                v-if="currentCurrencyInfo.currencyCode != 'USD'"
                @click="tokenPay">
                Pay Now
            </div>
        </div>
    </div>
</template>

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

import {payTaskLuckdropWithBalance} from "@/http/publishApi"

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

        }
    },
    postData: {
        type: Object,
        default: () => {

        }
    }
});

let iframe = ref(null);
let payIng = false;

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

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

const tokenPay = () => {    
    if(payIng) {
        return;
    }
    payIng = true;
    payTaskLuckdropWithBalance({
        params: {
            currencyCode: props.currentCurrencyInfo.currencyCode,
            postId: props.postData.postId
        }
    }).then(res => {
        if(res.code == 0) {
            emits("payPalFinsh", {...res.data, payNetwork: 'bsc'});
        }
        payIng = false;
    }).catch(() => {
        payIng = false;
    })
}

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, payNetwork: 'paypal'});
                    break;
            }
        }
    });
});

</script>

<style lang="scss" scoped>
.pay-wrapper {
    width: 100%;
    height: 80px;
    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;
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            span {
                display: inline-block;
                color: #000000;
                margin-left: 6px;
            }

            .icon {
                width: 14px;
                margin-left:6px;
            }
            
            .desc {
                margin-right:6px
            }
        }
        .msg {
            font-size: 13px;
            color: #898989;
        }
    }

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

        .token-pay {
            width: 100%;
            height: 100%;
            background: #389AFF;
            border-radius: 10000px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 18px;
            color: #fff;
        }

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