分期

可為 中租 zingla 銀角零卡 或 信用卡分期。

完整代碼範例

1. 引入 JS SDK

import ShoplinePayments from '@shoplinepayments/payment-web'

2. 初始化收銀台

installmentCounts 接收需要顯示的分期期數的陣列，可為單個，可為多個，注意傳入的分期期數為 String 類型，也可兼容 Number 類型。 當paymentMethod 為 CreditCard 或 ChaileaseBNPL 時此欄位才生效。

說明

根據傳入的值不同，顯示不同，判斷如下：

1. "0" 期代表不分期，若僅傳入 ['0'] 或空陣列 []，均代表不分期，此時不顯示下拉框，顯示跳轉提示文字。
2. 若傳入非 "0" 期數，SDK 內部會判斷特店支援哪些分期期數，不支援的分期期數將不會顯示。
3. 若僅傳入一個非"0" 期數，或傳入多個非"0" 期數但判斷後只有一個期數生效，則不顯示下拉框，默認為該期數，顯示為單期提示文本，顧客可直接付款。
4. 若傳入多個非"0" 期數且判斷後有多個期數生效，則顯示下拉框，顯示順序從小到大，默認選中第一個期數，顧客可選擇其他期數並付款。

範例 1: 傳入參數為 ['0', '3', '6', '9']，但特店並不支援分期，此時會顯示為不分期。
範例 2: 傳入參數為['0', '3', '6', '9']，特店支援['9', '12'] 期，此時僅顯示"9" 期，即不顯示下拉框，預設為"9"期，顧客無需選擇即可按分 9 期付款。
範例 3: 傳入參數為['0', '3', '6', '9']，特店支援['3', '9', '12'] 期，此時顯示下拉框，默認 選擇"3"期，顧客可選擇"3"，"9"兩期。

const { payment, error } = await ShoplinePayments({
  clientKey: '***YOUR**CLIENT**KEY***',
  merchantId: '***YOUR**MERCHANTID***',
  paymentMethod: 'ChaileaseBNPL',
  currency: 'TWD',
  amount: 10000,
  // 支援分期數，會顯示下拉框讓顧客選擇需要分多少期，
  installmentCounts: ['0', '3', '6', '9'],
  // 已存在的 HTMLElement
  element: '#paymentContainer',
})
// 錯誤處理，需判斷回應是否包含錯誤資訊，若無，才能進行下一步
if (error) {
  // 驗證錯誤碼和錯誤資訊，根據不同錯誤碼提示不同文本指引顧客進行下一步操作
  const { message, code } = error
  return
}

3. 建立 paySession

用戶點選結帳按鈕後，馬上建立 paySession

document.getElementById('submit').addEventListener('click', async () => {
  const { paySession, error } = await payment.createPayment()
  // 當顧客輸入資料錯誤時，校驗不通過，提示對應輸入框錯誤
  // 例如顧客輸入無效卡號，SDK 內部會顯示提示文本
  if (error) {
  // 驗證錯誤碼和錯誤資訊
  const { message, code } = error
  return
  }
  createOrder(paySession)
})

4. 發起付款

async function createOrder(paySession) {
  // server 端建立付款交易
  const { nextAction } = await createOrderFromServer(paySession)
  // 需判斷回應是否包含 nextAction，若包含，才能進行下一步
  if (!nextAction) {
    // 建立付款交易失敗，顯示錯誤資訊
    return
  } 
  // 發起付款
  const payResult = await payment.pay(nextAction)
  // 付款失敗錯誤處理
  // 付款成功時，payResult 為 undefined, 付款失敗時才有 error
  if (payResult && payResult.error) {
    // 根據錯誤碼顯示不同文本指引顧客進行下一步操作
    const { message, code } = payResult.error
  }
}