消費者在特店進行購買商品的當下，特店向系統發動申請請求，撰寫方式請參考 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 |