使用者輸入卡號 → 前端取得 Prime → 後端呼叫 Pay by Prime API → 回傳交易結果

// 前端 SDK
APP_ID: 166632
APP_KEY: 'app_eLtyNlnXhUY9PkZoJUw8wjU0o7Ts0iCe14YW6CND4AqYmi5hq8KR4PhKL9DA'

// 後端 API
PARTNER_KEY: 'partner_PHNbIt8d88834446583'
MERCHANT_ID: 'GlobalTesting_CTBC'

<script src="https://js.tappaysdk.com/sdk/tpdirect/v5.18.0"></script>

declare const TPDirect: any;

// 設定 SDK
TPDirect.setupSDK(
    166632, // APP_ID
    'app_eLtyNlnXhUY9PkZoJUw8wjU0o7Ts0iCe14YW6CND4AqYmi5hq8KR4PhKL9DA', // APP_KEY
    'sandbox' // 'sandbox' 或 'production'
);

TPDirect.card.setup({
    fields: {
        number: {
            element: '#card-number',
            placeholder: '**** **** **** ****'
        },
        expirationDate: {
            element: '#card-expiration-date',
            placeholder: 'MM / YY'
        },
        ccv: {
            element: '#card-ccv',
            placeholder: 'CCV'
        }
    },
    styles: {
        'input': { 'color': 'gray' },
        '.valid': { 'color': 'green' },
        '.invalid': { 'color': 'red' }
    }
});

const onSubmit = () => {
    const tappayStatus = TPDirect.card.getTappayFieldsStatus();

    if (tappayStatus.canGetPrime === false) {
        console.error('卡片資訊不完整');
        return;
    }

    TPDirect.card.getPrime((result: any) => {
        if (result.status !== 0) {
            console.error('取得 Prime 失敗:', result.msg);
            return;
        }

        const prime = result.card.prime;
        // 將 prime 傳送至後端
        sendToBackend(prime);
    });
};

<div id="card-number" class="tappay-field"></div>
<div id="card-expiration-date" class="tappay-field"></div>
<div id="card-ccv" class="tappay-field"></div>

import axios from 'axios';

const TAPPAY_PARTNER_KEY = process.env.TAPPAY_PARTNER_KEY;
const TAPPAY_MERCHANT_ID = process.env.TAPPAY_MERCHANT_ID;
const TAPPAY_URL = 'https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime';

export const payByPrime = async (req, res) => {
    const { prime, amount, orderId } = req.body;

    try {
        const response = await axios.post(TAPPAY_URL, {
            prime,
            partner_key: TAPPAY_PARTNER_KEY,
            merchant_id: TAPPAY_MERCHANT_ID,
            details: "商品描述",
            amount: amount,
            cardholder: {
                phone_number: "0912345678",
                name: "王小明",
                email: "test@example.com"
            },
            remember: false // 設為 true 可取得 card_key/card_token
        }, {
            headers: {
                'Content-Type': 'application/json',
                'x-api-key': TAPPAY_PARTNER_KEY
            }
        });

        const data = response.data;

        if (data.status === 0) {
            // 交易成功
            return res.json({
                success: true,
                transactionId: data.rec_trade_id,
                bankTransactionId: data.bank_transaction_id
            });
        } else {
            // 交易失敗
            return res.status(400).json({
                success: false,
                error: data.msg,
                status: data.status
            });
        }
    } catch (error) {
        console.error('TapPay API Error:', error);
        return res.status(500).json({ error: 'Payment processing failed' });
    }
};

TPDirect.linePay.getPrime((result: any) => {
    if (result.status !== 0) {
        console.error('LINE Pay Prime 失敗:', result.msg);
        return;
    }

    const prime = result.prime;
    sendToBackend(prime, 'line_pay');
});

const response = await axios.post(TAPPAY_URL, {
    prime,
    partner_key: TAPPAY_PARTNER_KEY,
    merchant_id: TAPPAY_MERCHANT_ID,
    amount: amount,
    details: "商品描述",
    cardholder: { /* ... */ },
    result_url: {
        frontend_redirect_url: "https://your-site.com/payment/result",
        backend_notify_url: "https://your-site.com/api/payment/notify"
    }
});

# TapPay 設定 (後端)
TAPPAY_PARTNER_KEY=partner_xxxxx
TAPPAY_MERCHANT_ID=your_merchant_id

POST /api/payment/pay
Content-Type: application/json
Authorization: Bearer <token>

{
    "prime": "prime_string_from_frontend",
    "paymentMethod": "credit_card",
    "details": {
        "amount": 90,
        "currency": "TWD"
    },
    "purchaseType": "PREMIUM"
}

// 檢查 SDK 是否載入
console.log(typeof TPDirect); // 應為 'object'

// 檢查欄位狀態
const status = TPDirect.card.getTappayFieldsStatus();
console.log(status);
// {
//   canGetPrime: true/false,
//   hasError: true/false,
//   status: { number: 2, expiry: 2, ccv: 2 } // 2=valid, 0=empty, 1=invalid
// }

# 測試 TapPay API 連線
curl -X POST https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime \
  -H "Content-Type: application/json" \
  -H "x-api-key: partner_PHNbIt8d88834446583" \
  -d '{
    "prime": "test_prime",
    "partner_key": "partner_PHNbIt8d88834446583",
    "merchant_id": "GlobalTesting_CTBC",
    "amount": 100,
    "details": "Test",
    "cardholder": {
      "phone_number": "0912345678",
      "name": "Test",
      "email": "test@test.com"
    }
  }'