10 分鐘串接 TapPay 金流付錢去!

tappay nodejs direct pay 線上金流

yujack 2017-12-19 22:44:41 ‧ 17357 瀏覽

分享至

[Update-2020-12-12] TapPay Web SDK 串接 - @types/tpdirect 介紹

這篇文章主要是說明如何使用 TapPay 這個服務
TapPay 是一家金流廠商，主要都是做線上金流，詳細就不多說
有興趣想要詳細了解可以去參考官網 https://www.tappaysdk.com

這邊會以 Web 服務為主去做範例，完整程式碼，請參考最下面

環境設置

TapPay 近期在 github 上面好像有公佈測試用的 key

要拿到以下的值才有辦法作後續的付款
- App Key: app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC
- App ID: 11327
- Partner Key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM
- Merchant ID: GlobalTesting_CTBC
程式部分
- 前端: HTML + Javascript + CSS
- 後端: nodejs (v6)
測試卡號

測試卡號可以參考這裡
https://docs.tappaysdk.com/tutorial/zh/reference.html#test-card
card number 4242424242424242
month 01
year 23
ccv 123

流程介紹

主要分成以下幾個步驟

前端
1. 使用 TapPay SDK 設置好輸入卡號的表單
2. 按下按鈕觸發 TapPay 的 GetPrime 方法
3. 拿到 Prime
4. 把 Prime 送到後端
後端
1. 拿到前端送來的 Prime
2. 把 Prime 加上其他所需參數送往 TapPay Server
3. 完成付款!

程式撰寫 - 前端

根據最新的 SDK 發佈的方法, 可以直接在一個 element 底下把卡號輸入表單塞進去

HTML

HTML 分成兩個部分

建立好一個 div 準備等等被塞入輸入卡號表單
建立好 trigger button 來觸發 Get Prime 方法

<div style="width: 480px; margin: 50px auto;">
    <label>CardView</label>

    <!-- 這是我們要塞表單的地方 -->
    <div id="cardview-container"></div>

    <!-- 這是我們要觸發 GetPrime 方法的地方 -->
    <button id="submit-button" onclick="onClick()">Get Prime</button>
</div>

Javascript

Javascript 分成三個部分

初始化金鑰
植入輸入卡號表單
觸發 getPrime 方法

// 設置好等等 GetPrime 所需要的金鑰
TPDirect.setupSDK(11327, "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC", "sandbox")
				  
// 把 TapPay 內建輸入卡號的表單給植入到 div 中
TPDirect.card.setup('#cardview-container')

var submitButton = document.querySelector('#submit-button')

function onClick() {
    // 讓 button click 之後觸發 getPrime 方法
    TPDirect.card.getPrime(function (result) {
        if (result.status !== 0) {
            console.err('getPrime 錯誤')
            return
        }
        var prime = result.card.prime
        alert('getPrime 成功: ' + prime)
    })
}

程式撰寫 - 後端

小弟我是習慣用 nodejs 撰寫後端伺服器
所以這邊會以 nodejs 去做付款的動作
前端 Get Prime 成功之後, 就要把這組 prime 送到後端了

建立 NodeJs server

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const https = require('https');
const PORT = 8080

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}))
app.use('/', express.static(__dirname + "/html")) //serve static content

app.post('/pay-by-prime', (req, res, next) => {
    // 必須要把程式實作在這邊
})

app.listen(PORT, () => {
    console.log('Connet your webiste in the http://localhost:8080/');
})

實作 Pay by Prime

接下來要實作 pay-by-prime 的程式
要加到 app.post('/pay-by-prime') 裡面
這裡有兩個參數要注意

Partner Key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM
Merchant ID: GlobalTesting_CTBC

另外就是 headers 裡面要特別帶 x-api-key 進去
否則會收到 access deny 的 response

可以參考 https://docs.tappaysdk.com/tutorial/zh/back.html#pay-by-prime-api
所需要帶的參數和 headers

const post_data = {
    "prime": req.body.prime,
    "partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
    "merchant_id": "GlobalTesting_CTBC",
    "amount": 1,
    "currency": "TWD",
    "details": "An apple and a pen.",
    "cardholder": {
        "phone_number": "+886923456789",
        "name": "jack",
        "email": "example@gmail.com"
    },
    "remember": false
}

axios.post('https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime', post_data, {
    headers: {
        'x-api-key': 'partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM'
    }
}).then((response) => {
    console.log(response.data);
    return res.json({
        result: response.data
    })
})

實作完成後，開啟 nodejs server
然後打上測試卡後就可以完成付款了！

前端補正

記得前端要補上把 prime 帶上來的程式

$.post('/pay-by-prime', {prime: prime}, function(data) {
    alert('付款成功' + JSON.stringify(data))
})

完整程式碼

資料夾結構

|
|--- app.js
|
|----html
|     |---index.html

前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script text="text/javascript" src="https://js.tappaysdk.com/tpdirect/v3"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <title>Connect payment with TapPay</title>
</head>

<body>
    <div style="width: 480px; margin: 50px auto;">
        <label>CardView</label>
        <div id="cardview-container"></div>
        <button id="submit-button" onclick="onClick()">Get Prime</button>
        <pre id="result1"></pre>
        <pre id="result2"></pre>
    </div>
    <script>
        TPDirect.setupSDK(11327, "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC", "sandbox")
        TPDirect.card.setup('#cardview-container')

        var submitButton = document.querySelector('#submit-button')
        var cardViewContainer = document.querySelector('#cardview-container')
        

        function onClick() {
            TPDirect.card.getPrime(function (result) {
                if (result.status !== 0) {
                    console.log('getPrime 錯誤')
                    return
                }
                alert('getPrime 成功')
                var prime = result.card.prime
                document.querySelector('#result1').innerHTML = JSON.stringify(result, null, 4)

                $.post('/pay-by-prime', {prime: prime}, function(data) {
                    alert('付款成功')
                    document.querySelector('#result2').innerHTML = JSON.stringify(data, null, 4)
                })
            })
        }
    </script>
</body>
</html>

後端

記得先執行以下 command

npm install body-parser express axios

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const https = require('https');
const axios = require('axios')
const PORT = 8080


app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}))
app.use('/', express.static(__dirname + "/html")) //serve static content

app.post('/pay-by-prime', (req, res, next) => {
    const post_data = {
        "prime": req.body.prime,
        "partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
        "merchant_id": "GlobalTesting_CTBC",
        "amount": 1,
        "currency": "TWD",
        "details": "An apple and a pen.",
        "cardholder": {
            "phone_number": "+886923456789",
            "name": "jack",
            "email": "example@gmail.com"
        },
        "remember": false
    }

    axios.post('https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime', post_data, {
        headers: {
            'x-api-key': 'partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM'
        }
    }).then((response) => {
        console.log(response.data);
        return res.json({
            result: response.data
        })
    })

})

app.listen(PORT, () => {
    console.log('Connet your webiste in the http://localhost:8080/');
})