evshop_h5/src/pages/Cart/Payment.vue

<template>
    <!-- Main Start -->
    <main class="main-wrap order-success-page mb-xxl">
        <!-- Banner Section Start -->
        <section class="banner-section">
            <div class="banner-wrap">
                <img src="@/assets/svg/order-success.svg" alt="order-success" />
            </div>

            <div class="content-wrap">
                <h1 class="font-lg title-color">感謝您的購買</h1>
                <p class="font-sm content-color">您的訂單已成功下達，您的訂單編號為#{{ order_sn }}</p>
            </div>
            <div ref="formContainer" :style="{ display: showForm }"></div>
            <div v-show="showTappay">
                <form class="ui form">
                    <div class="field">
                        <label>信用卡</label>
                        <div id="tappay-iframe"></div>
                    </div>
                </form>
                <br />
                <div class="ui button" id="submit" @click="onTapPay">立即付款</div>
            </div>
        </section>
        <!-- Banner Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

import { payment } from "@/services/order";

const statusTable = {
    0: "欄位已填好，並且沒有問題",
    1: "欄位還沒有填寫",
    2: "欄位有錯誤，此時在 CardView 裡面會用顯示 errorColor",
    3: "使用者正在輸入中",
};

const defaultCardViewStyle = {
    color: "rgb(0,0,0)",
    fontSize: "15px",
    lineHeight: "24px",
    fontWeight: "300",
    errorColor: "red",
    placeholderColor: "",
};

const config = {
    isUsedCcv: false,
    // 此設定會顯示卡號輸入正確後，會顯示前六後四碼信用卡卡號
    isMaskCreditCardNumber: true,
    maskCreditCardNumberRange: {
        beginIndex: 6,
        endIndex: 11,
    },
};

const route = useRoute();

const order_sn = route.query.order_sn;
const pay_code = route.query.pay_code;

const returnData = ref(null);
const formContainer = ref();
const showForm = ref("none");
const showTappay = ref(false);

onMounted(async () => {
    if (order_sn && pay_code) {
        switch (pay_code) {
            case "tpcredit":
                showTappay.value = true;

                TPDirect.setupSDK(
                    128084,
                    "app_Mmp6jV9pguSBO8eRwHOOf0hxKljbeQeZEKsl9Ow8hEbOMK5FIkLb7bpvenaS",
                    "sandbox"
                );

                TPDirect.card.setup("#tappay-iframe", defaultCardViewStyle, config);
                break;
            case "linepay":
            default:
                if(pay_code === "cod") {
                    return
                }
                let res = await payment({ order_sn, pay_code });
                if (res.code === 200) {
                    //將回傳的from寫入formContainer中，並且自動submit
                    if (res.data.method === "post") {
                        formContainer.value.innerHTML = res.data.data;
                        if (showForm.value === "none") {
                            formContainer.value.querySelector("form").submit();
                        }
                    } else if (res.data.method === "redirect") {
                        window.location.href = res.data.data.paymentUrl.web;
                    }
                }
                break;
        }
    }
});

const onTapPay = () => {
    TPDirect.card.getPrime(async (result) => {
        if (result.status !== 0) {
            alert("get prime error " + result.msg);
            return;
        }
        console.log("get prime 成功，prime: " + result.card.prime);
        // returnData.value = result.card.prime
        let res = await payment({ pay_id: 19, order_sn, prime: result.card.prime });
        console.log("res", res);
    });
};

TPDirect.card.onUpdate(function (update) {
    console.log("update", update);
});
</script>

<style lang="less" scoped>
#tappay-iframe {
    font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
    margin: 0;
    outline: 0;
    line-height: 1.21428571em;
    padding: 0.578571em 1em;
    font-size: 1em;
    background: #fff;
    border: 1px solid rgba(34, 36, 38, 0.15);
    color: rgba(0, 0, 0, 0.87);
    border-radius: 0.28571429rem;
    box-shadow: 0 0 0 0 transparent inset;
    transition: color 0.1s ease, border-color 0.1s ease;
    width: 100%;
}
</style>