用户投稿[Update-2020-12-12] TapPay Web SDK 串接 - @types/tpdirect 介绍
这篇文章主要是说明如何使用 TapPay 这个服务
TapPay 是一家金流厂商，主要都是做线上金流，详细就不多说
有兴趣想要详细了解可以去参考官网 https://www.tappaysdk.com
这边会以 Web 服务为主去做範例，完整程式码，请参考最下面
环境设置
TapPay 近期在 github 上面好像有公布测试用的 key
要拿到以下的值才有办法作后续的付款
App Key: app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJCApp ID: 11327Partner Key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RMMerchant 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
流程介绍
主要分成以下几个步骤
前端
使用 TapPay SDK 设置好输入卡号的表单按下按钮触发 TapPay 的 GetPrime 方法拿到 Prime把 Prime 送到后端后端
拿到前端送来的 Prime把 Prime 加上其他所需参数送往 TapPay Server完成付款!程式撰写 - 前端
根据最新的 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 = 8080app.use(bodyParser.json())app.use(bodyParser.urlencoded({ extended: false}))app.use('/', express.static(__dirname + "/html")) //serve static contentapp.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') 里面
这里有两个参数要注意
另外就是 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 axiosconst express = require('express')const app = express()const bodyParser = require('body-parser')const https = require('https');const axios = require('axios')const PORT = 8080app.use(bodyParser.json())app.use(bodyParser.urlencoded({ extended: false}))app.use('/', express.static(__dirname + "/html")) //serve static contentapp.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/');})后记
有时间再来写写怎么接上 Apple Pay, Pay with Google, Line Pay 的教学
微信扫一扫打赏
支付宝扫一扫打赏
