Skip to main content

其他付款方式

完整代碼範例​

其他付款方式的串接方式相似，唯一區別在於初始化時傳入的 paymentMethod 值不同，參照 付款方式清單。

1. 引入 JS SDK​

import ShoplinePayments from '@shoplinepayments/payment-web'

2. 初始化收銀台​

const { payment, error } = await ShoplinePayments({
  clientKey: '***YOUR**CLIENT**KEY***',
  merchantId: '***YOUR**MERCHANTID***',
  // 傳入付款方式
  paymentMethod: 'LinePay',
  currency: 'TWD',
  amount: 10000,
  // 已存在的 HTMLElement
  element: '#paymentContainer',
})
// 錯誤處理，需判斷回應是否包含錯誤資訊，若無，才能進行下一步
if (error) {
  // 驗證錯誤碼和錯誤資訊，根據不同錯誤碼提示不同文本指引顧客進行下一步操作
  const { message, code } = error
  return
}

3. 建立 paySession​

document.getElementById('submit').addEventListener('click', async () => {
  const { paySession, error } = await payment.createPayment()
  // 錯誤
  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
  }
}