Skip to main content

Apple Pay

完整代碼範例​

1. 託管 Apple Pay 網域驗證檔案​

Apple Pay 付款方式要求特店網域下需託管網域驗證檔案。每次交易前，Apple會進行特店網域的驗證，以保證其交易安全性。否則交易會無法進行。

對於您要註冊的每個網域，將以下網域驗證檔案託管在以下路徑中：

https://[YOUR_DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association

請在下方下載對應環境的網域驗證檔案，檔案在沙盒環境和正式環境不通用，切換環境時也需更換此檔案。

沙盒環境的網域驗證檔案
正式環境的網域驗證檔案

注意

請去掉網域驗證檔案 .txt 後綴

2. 驗證特店網域​

完成託管網域驗證檔案之後，請登入您的 SHOPLINE Payments 後台，前往「設定」-「域名設定」-「管理域名」，按說明增加您的特店網站的網域。

注意

如果第一步「託管網域驗證檔案」沒有完成，此處網域驗證會無法完成。

3. 引入 JS SDK​

import ShoplinePayments from '@shoplinepayments/payment-web'

4. 初始化收银台​

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

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

5. 建立 paySession​

注意！！！

顧客點選結帳按钮后，必須马上呼叫 payment.createPayment() 建立 PaySession，即在點選結帳按鈕到呼叫 API 介面中不能有非同步操作，否則 ApplePay 會報錯

You attempt to create the ApplePaySession outside of a user gesture handler. The exception error “Must create a new ApplePaySession from a user gesture handler” appears.

document.getElementById('submit').addEventListener('click', async () => {
  // 中間不能有非同步操作，否則將會報錯
  const { paySession, error } = await payment.createPayment()
  // 需判斷回應是否包含錯誤資訊，若無，才能進行下一步
  if (error) {
    // 驗證錯誤碼和錯誤資訊
    const { message, code } = error
    return
  }
  createOrder(paySession)
})

6. 發起付款​

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
  }
}
注意！！！

發起付款的網址需與 SHOPLINE Payments 後台中的 「設定」 - 「域名設定」 中的商店網域相同，才能付款成功。

瀏覽器相容性​

ApplePay 瀏覽器相容性

仅支援 iOS 12.1 或 MacOS 10.14.1（包含） 上的 Safari

ApplePay Version History。

但在實際使用中，有可能其他版本也不支援 ApplePay，建議透過以下方法判斷報錯為準。

可透過以下方法取得錯誤，並展示錯誤資訊，指引顧客使用其他付款方式:

const { payment, error } = await ShoplinePayments({
  //... 初始化參數
})
// 錯誤處理
if (error) {
  if (error.code === '1100') {
    alert('當前瀏覽器無法使用 ApplePay，請使用其他付款方式進行付款')
  }
  return
}

測試方式​

準備環境​

  1. 設備環境：使用一台系統版本在 MacOS 10.14.1 以上的 MacBook 或者一台系統版本在 iOS 12.1 以上的 iPhone
  2. 瀏覽器：Safari
  3. AppleId：登陸非中國大陸的AppleId，並起碼綁定一張非銀聯的信用卡（中國大陸AppleId及銀聯卡不可用）
  4. HTTPS 網域：與 SHOPLINE Payments 後台中的 「設定」 - 「域名設定」 中的商店網域相同的 HTTPS 環境。