@mypay-tw/payment v0.0.192
消費者在特店進行購買商品的當下,特店向系統發動申請請求,撰寫方式請參考 typescript 範例。
付費請求的流程圖
生命週期
特店網站發動初始化請求
初始化流完成後即可顯示支付工具畫面,並且可以進行付款,開發上建議畫面載入當下就直接進行初始化動作,載入完畢前可事先將root的元素先做隱藏,等到消費者按下付款按鈕再將root元素顯示出來。
// 初始化範例
import paymentBuilder from '@mypay-tw/payment';
import type { Payment } from '@mypay-tw/payment';
const token = '特店或經銷商的 InAppPaymentToken';
const storeUid = 'pfn與store_id 被 AES-256 金鑰加密後的密文';
const layer = '特店使用 "store", 經銷商使用 "agent"';
const root = '請輸入您將要顯示支付工具畫面的元素的selector';
paymentBuilder({
token,
storeUid,
layer,
root,
clientUrl: location.href,
language: 'zh-TW',
})
.setWhenTradeStartLifeCycle(tradeStart)
.setWhenGotTradeTokenLifeCycle(sendTradeToken)
.setWhenGoToFinishPageLifeCycle(goToFinishPage)
.setWhenTradeFinishLifeCycle(tradeFinish)
.setWhenGotErrorLifeCycle(whenGotError)
.build()
.then((response) => {
console.log('payment init done.', response.getAllPayment());
// 取得
payment.value = response;
console.timeEnd('create payment instance');
});
// 得到交易序號透過後端進行交易
function sendTradeToken(token: string, responseCallback: (code: string) => void) {
console.timeEnd('trade start');
console.log(token);
fetch('電商後端發送交易的API位置!', {
method: 'POST',
body: JSON.stringify({ tradeToken: token })
}).then((response) => {
return response.json();
}).then((result) => {
console.log(result);
responseCallback(result.response.code as string);
console.time('trade finish');
}).catch((err) => {
console.log(err);
responseCallback('error');
console.time('trade finish');
});
}
- 初始化所需參數
欄位 | 型態 | 說明 |
---|---|---|
token | string | 特店或經銷商的 InAppPaymentToken |
storeUid | string | pfn與store_id 被 AES-256 金鑰加密後的密文 |
layer | string | 特店使用 "store", 經銷商使用 "agent" |
root | string | 顯示支付工具畫面的元素,為 html tag 的 id |
- 初始化包含註冊以下觸發事件
事件名稱 | 對應方法 |
---|---|
當消費者點擊送出交易 | setWhenTradeStartLifeCycle |
當取得交易序號 | setWhenGotTradeTokenLifeCycle |
當交易畫面到達結果頁面上 | setWhenGoToFinishPageLifeCycle |
當交易結束 | setWhenTradeFinishLifeCycle |
當交易發生錯誤 | setWhenGotErrorLifeCycle |
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago