信用卡

完整代碼範例

1. 引入 JS SDK

import ShoplinePayments from '@shoplinepayments/payment-web'

2. 初始化收银台

SDK 會判斷當前瀏覽器是否能夠使用信用卡付款方式（參照瀏覽器相容性），若不支援，則會呈現付款方式不可用，並回應錯誤

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

注意！！！

為確保 SDK 中的信用卡功能運行正常，請務必在 HTTPS 環境中進行串接測試。

為確保銀行 3D 認證網頁正常打開，請勿將銀行 3D 認證網頁放在 iframe 中打開。

3. 建立 paySession

顧客點選結帳按钮后，马上呼叫 payment.createPayment()，SDK 內部會校驗顧客輸入的信用卡資訊是否完整和正確。當顧客輸入錯誤時，SDK 會在對應輸入框下顯示提示文本，並回應錯誤。

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
  }
}

tip

顧客需要填寫完整的付款資訊才能提交訂單發起付款。 如果需要進行 3D 認證，則會跳轉至 3D 頁面進行後續驗證。

瀏覽器相容性

信用卡瀏覽器相容性

要注意: 以下常見系統及瀏覽器對TLS1.2 的支援不完善，（可參考User Agent Capabilities）為了付款資料安全， 無法使用信用卡付款.

瀏覽器與系統	結果
Safari 6 / iOS 6.0.1	Server sent fatal alert: handshake_failure
Safari 7 / iOS 7.1	Server sent fatal alert: handshake_failure
Safari 7 / OS X 10.9	Server sent fatal alert: handshake_failure
Safari 8 / iOS 8.4	Server sent fatal alert: handshake_failure
Safari 8 / OS X 10.10	Server sent fatal alert: handshake_failure
IE 11 / Win 7	Server sent fatal alert: handshake_failure
IE 11 / Win 8.1	Server sent fatal alert: handshake_failure
IE 11 / Win Phone 8.1	Server sent fatal alert: handshake_failure
IE 11 / Win Phone 8.1 Update	Server sent shake alert:

可自行判斷瀏覽器錯誤，或透過以下方法取得錯誤，並顯示錯誤資訊，引導顧客升級瀏覽器：

const { payment, error } = await ShoplinePayments({
   //... 初始化參數
})
// 錯誤處理
if (error) {
   if (error.code === '1026') {
     alert('瀏覽器版本過低，請升級瀏覽器後重試')
   }
   return
}