Shopify Plus 香港 Apple Pay 與 Google Pay 整合設定教學

在 Shopify Plus 香港店啟用 Apple Pay 與 Google Pay，核心流程是：開通 Shopify Payments（HKD）、在付款設定中勾選兩個錢包、完成所有自訂網域的 Apple Pay 網域驗證，再於主題加入動態結帳按鈕，最後用實機 Safari 與 Chrome 測試。

這篇教學針對香港（以及新加坡、台灣、澳洲等同樣使用 Shopify Payments 的 APAC 市場）的 Shopify Plus 商戶，涵蓋前置條件、設定步驟、Liquid 與 Headless 程式碼、測試方法與疑難排解。

為什麼香港商戶值得優先處理錢包付款

根據 Baymard Institute 匯整的 50 項結帳研究，網購平均購物車放棄率約為 70%，其中「結帳流程太長／太複雜」長期位列前五大原因。Apple Pay 與 Google Pay 的價值正在於此：以裝置內已儲存的卡片、地址與聯絡資料，把「填表 → 輸入卡號 → 等 3-D Secure」壓縮成一次生物辨識確認。

在香港，錢包付款的滲透條件也相當成熟。根據香港金融管理局（HKMA）公布的儲值支付工具（SVF）季度統計，本地儲值支付工具帳戶數目長期以倍數高於人口規模，顯示消費者同時持有多個電子錢包已是常態。而根據 StatCounter 的香港流動裝置作業系統市佔統計，iOS 在香港手機市場長期佔接近一半，意味著單靠 Google Pay 或單靠 Apple Pay，都只能覆蓋一半的手機流量——兩者都要開。

跨境來看，同一套設定邏輯可以複製到 Shopify Payments 支援的其他 APAC 市場（新加坡、澳洲、紐西蘭、日本）。差異只在貨幣、結算銀行帳戶與稅務設定，而不是技術流程。這對一間用香港作為 APAC 營運中心、同時經營 HK/SG/AU 站點的品牌來說，是可規模化的。

開始前要準備什麼

在動手之前，先確認以下條件全部成立，否則錢包按鈕會「設定了但不出現」：

1. 店舖已啟用 Shopify Payments，且商戶實體為香港註冊公司（需要商業登記證 BR、公司註冊處文件、負責人身分證明、香港銀行帳戶）。根據 Shopify Help Center 的支援國家列表，香港屬於 Shopify Payments 支援地區。
2. 店舖貨幣或已啟用的結算貨幣包含 HKD（或你要收的目標貨幣）。
3. 所有前台網域都已 HTTPS，並由 Shopify 託管或已正確 CNAME 指向 Shopify。
4. 主題為 Online Store 2.0 架構（Dawn 或同等級自訂主題），或你正在用 Hydrogen / Headless。
5. 至少一部實機測試裝置：一部已登入 Apple ID 並在 Wallet 加入有效卡片的 iPhone 或 Mac（Safari），一部已設定 Google Wallet 的 Android 或已登入 Google 帳戶的 Chrome。
6. Shopify Plus 權限：如果你要改 checkout.liquid 替代方案（Checkout Extensibility）或使用 Shopify Functions，需要 Plus 方案與開發店。

第三方支付閘道的限制

如果你沒有用 Shopify Payments，而是用本地或第三方閘道（例如 PayMe for Business 的導流方案、銀聯收單行、或某些香港 PSP），情況會不同：

• Google Pay 在 Shopify 上主要透過 Shopify Payments 提供。第三方閘道一般無法在 Shopify 原生結帳中注入 Google Pay 按鈕。
• Apple Pay 部分第三方閘道（如 Stripe、Adyen 等支援 Apple Pay on the Web 的收單方）可透過 Shopify 的 gateway 整合提供，但是否出現按鈕取決於該閘道在 Shopify 的整合層級。
• 實務建議：Shopify Payments 作為主要收單，第三方閘道作為補充（例如 AlipayHK、WeChat Pay HK、八達通相關方案），而不是反過來。

步驟一：開通並檢查 Shopify Payments 設定

進入 Settings → Payments。

如果尚未啟用，點 Activate Shopify Payments，依序填寫：

• Business type：Corporation / Sole proprietorship
• Business registration number：香港 BR 號碼
• Business address：香港註冊地址（不可用純郵政信箱）
• Banking information：香港銀行帳戶（HKD；若要多幣結算，需另加對應幣別帳戶）
• Customer billing statement：顧客信用卡月結單上顯示的名稱（建議用消費者認得的品牌名，而非公司全名——這會直接影響爭議交易率）

啟用後，在同一頁面確認狀態顯示為 Active。若顯示 Pending，Shopify 仍在審核文件，錢包按鈕在審核期間通常不會顯示。

檢查支援的卡種與貨幣

在 Settings → Payments → Shopify Payments → Manage 內確認：

• 已啟用 Visa、Mastercard、American Express（AmEx 在香港高客單價零售的佔比不低，不要預設關掉）
• Payout currency 設為 HKD
• 如果你經營多市場，到 Settings → Markets 確認每個市場的結算貨幣已設定（例如 SG 站用 SGD、AU 站用 AUD）

步驟二：啟用 Apple Pay 與 Google Pay 錢包

仍在 Settings → Payments → Shopify Payments → Manage，向下捲到 Wallets 區塊。

勾選：

• Apple Pay
• Google Pay
• （視策略決定是否勾選 Shop Pay——Shop Pay 會搶走部分錢包點擊，但其一鍵回購率通常較高；建議三者同開，再用數據判斷）

按 Save。

預期結果：儲存後 1-2 分鐘內，在 Safari（iOS/macOS，且 Wallet 內有卡）開啟你的商品頁，應該在 Add to cart 下方看到黑色的 Apple Pay 按鈕；在 Chrome 登入 Google 帳戶並有已儲存卡片的情況下，應看到 Google Pay 按鈕。

如果什麼都沒出現，先不要改程式碼——先做步驟三的網域驗證檢查。

步驟三：完成 Apple Pay 網域驗證

這是香港商戶最常卡關的一步，尤其是使用多個自訂網域（.hk、.com.hk、.com）或有 Cloudflare / Akamai 在前面擋的站。

Apple 要求每一個會顯示 Apple Pay 按鈕的網域，都必須托管一個驗證檔案。根據 Apple Developer 的 Apple Pay on the Web 文件，該檔案路徑固定為：

1https://your-domain.com/.well-known/apple-developer-merchantid-domain-association

Shopify 託管網域

若網域由 Shopify 管理（Settings → Domains 顯示 Managed by Shopify），Shopify 會自動處理驗證。你只需確認網域狀態為 Connected。

自訂 DNS 或有 CDN 代理的網域

用 curl 驗證檔案是否可公開存取：

1curl -sI https://shop.example.com.hk/.well-known/apple-developer-merchantid-domain-association

預期輸出：

1HTTP/2 200
2content-type: text/plain; charset=utf-8

若回傳 301、302、403 或 404，Apple Pay 按鈕就不會出現。常見成因與處理：

• Cloudflare 的 Always Use HTTPS / Page Rules 把 .well-known 重導 → 在 Cloudflare 新增 Page Rule，對 */.well-known/* 設定 Cache Level: Bypass 且不套用重導。
• WAF 封鎖點開頭的路徑 → 將 /.well-known/ 加入白名單。
• 網域仍指向舊主機 → 確認 A record 指向 23.227.38.x（Shopify 的 IP），CNAME 指向 shops.myshopify.com。

多網域與多市場

如果你用 Shopify Markets 經營 HK / SG / TW 分站，每個市場各有獨立網域（如 example.hk、example.sg），每個網域都要獨立通過驗證。驗證是以 domain 為單位，不是以店舖為單位。

驗證所有網域的批次檢查腳本：

1#!/usr/bin/env bash
2DOMAINS=("example.hk" "example.sg" "example.com.tw" "example.com.au")
3PATH_SUFFIX="/.well-known/apple-developer-merchantid-domain-association"
4
5for d in "${DOMAINS[@]}"; do
6  code=$(curl -s -o /dev/null -w "%{http_code}" "https://${d}${PATH_SUFFIX}")
7  echo "${d} -> ${code}"
8done

預期輸出：每一行都應是 200。

步驟四：在主題中加入動態結帳按鈕

錢包按鈕在 Shopify 原生結帳頁會自動出現，但在商品頁與購物車頁需要主題明確渲染 payment_button。

在 sections/main-product.liquid（Dawn 架構）中，確認 product form 內有：

1{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate' -%}
2  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
3
4  <div class="product-form__buttons">
5    <button
6      type="submit"
7      name="add"
8      class="product-form__submit button button--full-width"
9      {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
10    >
11      <span>{{ 'products.product.add_to_cart' | t }}</span>
12    </button>
13
14    {%- if show_dynamic_checkout -%}
15      {{ form | payment_button }}
16    {%- endif -%}
17  </div>
18{%- endform -%}

{{ form | payment_button }} 是關鍵。它會由 Shopify 依據瀏覽器與已啟用錢包，動態決定渲染 Apple Pay、Google Pay 還是 Shop Pay。

在 section schema 中加入開關，讓營運團隊不用改碼就能控制：

1{
2  "type": "checkbox",
3  "id": "show_dynamic_checkout",
4  "default": true,
5  "label": "顯示動態結帳按鈕 (Apple Pay / Google Pay / Shop Pay)"
6}

購物車頁面

在 sections/main-cart-footer.liquid 的 cart form 內：

1{%- form 'cart', cart, id: 'cart' -%}
2  <button type="submit" name="checkout" class="cart__checkout-button button">
3    {{ 'sections.cart.checkout' | t }}
4  </button>
5
6  {%- if additional_checkout_buttons -%}
7    <div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
8      {{ content_for_additional_checkout_buttons }}
9    </div>
10  {%- endif -%}
11{%- endform -%}

注意：content_for_additional_checkout_buttons 只在購物車 form 內有效，放在外面不會渲染。

樣式微調

Apple 對 Apple Pay 按鈕的外觀有規範（圓角、高度、留白、不可改字樣）。你可以調整容器寬度，但不要用 CSS 覆寫按鈕內部：

1.shopify-payment-button__button--unbranded,
2.shopify-payment-button__button {
3  min-height: 46px;
4  border-radius: 6px;
5}
6
7/* 不要做：強制改變 Apple Pay 按鈕文字或品牌標誌 */

步驟五：Headless 與 Hydrogen 的做法

如果你的前端是 Hydrogen、Next.js 或其他 Headless 架構，payment_button Liquid filter 不存在。你有兩條路：

路線 A：導向 Shopify 託管結帳（建議）

用 Storefront API 建立 cart，然後把使用者送到 checkoutUrl。錢包按鈕由 Shopify 結帳頁原生提供，不需要自行整合 Apple Pay JS。

1const CART_CREATE = `#graphql
2  mutation cartCreate($input: CartInput!) {
3    cartCreate(input: $input) {
4      cart { id checkoutUrl }
5      userErrors { field message }
6    }
7  }
8`;
9
10const res = await storefront.mutate(CART_CREATE, {
11  variables: {
12    input: {
13      lines: [{ merchandiseId: variantId, quantity: 1 }],
14      buyerIdentity: { countryCode: 'HK' },
15    },
16  },
17});
18
19window.location.href = res.cartCreate.cart.checkoutUrl;

重點：buyerIdentity.countryCode 設為 HK（或 SG、TW、AU）會讓結帳頁套用正確市場的貨幣與可用付款方式。漏掉這個參數，是 Headless 站「Apple Pay 在部分市場不出現」最常見的原因。

路線 B：自建 Google Pay 按鈕判斷可用性

若你要在商品頁先判斷裝置是否支援錢包（例如決定按鈕排序），可用 Google Pay API 的 isReadyToPay：

1const paymentsClient = new google.payments.api.PaymentsClient({
2  environment: 'TEST', // 上線改 'PRODUCTION'
3});
4
5const isReadyToPayRequest = {
6  apiVersion: 2,
7  apiVersionMinor: 0,
8  allowedPaymentMethods: [
9    {
10      type: 'CARD',
11      parameters: {
12        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
13        allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],
14      },
15    },
16  ],
17};
18
19paymentsClient
20  .isReadyToPay(isReadyToPayRequest)
21  .then(({ result }) => {
22    if (result) document.querySelector('#gpay-slot').hidden = false;
23  })
24  .catch(console.error);

Apple 端對應的能力偵測：

1if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
2  document.querySelector('#apay-slot').hidden = false;
3}

這兩段只用於 UI 顯示判斷。實際扣款仍由 Shopify 結帳處理——不要在 Headless 前端自行處理付款 token，除非你有 PCI DSS SAQ-D 的合規準備。

步驟六：測試流程與預期結果

Apple Pay 與 Google Pay 無法用 Shopify 的 Bogus Gateway 測試。你有兩個選擇：

測試模式（Test mode）

在 Settings → Payments → Shopify Payments → Manage → Test mode 開啟。此時 Apple Pay 按鈕會顯示，但使用測試卡號。注意測試模式會影響真實訂單處理，建議在開發店或低流量時段操作。

真卡小額測試（建議）

1. 建立一個 HKD 1.00 的隱藏商品（不加入任何 collection，透過直接 URL 存取）
2. 在 iPhone Safari 開啟該商品頁 → 點 Apple Pay → Face ID 確認
3. 預期：訂單於 Shopify Admin 出現，Payment method 顯示 Apple Pay，交易 metadata 含 wallet: apple_pay
4. 在 Android Chrome 重複一次，確認 wallet: google_pay
5. 全部退款

驗證追蹤有沒有斷掉

錢包結帳會跳過一般結帳步驟，很多 GA4 設定會因此漏掉 begin_checkout。用 Shopify 的 Web Pixels API 補：

1// extensions/analytics-pixel/src/index.js
2import { register } from '@shopify/web-pixels-extension';
3
4register(({ analytics, browser }) => {
5  analytics.subscribe('payment_info_submitted', (event) => {
6    const method = event.data?.checkout?.transactions?.[0]?.paymentMethod ?? 'unknown';
7    browser.sendBeacon('https://your-endpoint.example/collect', JSON.stringify({
8      event: 'payment_info_submitted',
9      wallet: method,
10      value: event.data?.checkout?.totalPrice?.amount,
11      currency: event.data?.checkout?.currencyCode,
12    }));
13  });
14
15  analytics.subscribe('checkout_completed', (event) => {
16    browser.sendBeacon('https://your-endpoint.example/collect', JSON.stringify({
17      event: 'purchase',
18      orderId: event.data?.checkout?.order?.id,
19      currency: event.data?.checkout?.currencyCode,
20    }));
21  });
22});

部署：

1shopify app deploy

疑難排解：按鈕沒出現怎麼辦

按以下順序排查，由最常見排到最罕見：

1. 瀏覽器或裝置不符合條件

Apple Pay 按鈕只在 Safari（iOS 10+ / macOS 10.12+）且 Wallet 內有可用卡片時顯示。在 iPhone 的 Chrome 上看不到是正常行為，不是 bug。Google Pay 需要 Chrome 且 Google 帳戶已儲存付款方式。

檢查方法：用 macOS Safari 開啟 DevTools Console 輸入 ApplePaySession.canMakePayments()，應回傳 true。

2. 網域驗證失敗

重跑步驟三的 curl 檢查。這佔實務上大約一半的案例，特別是在前面加了 CDN 或 WAF 的站。

3. 主題缺少 payment_button

在 Theme Editor → Product section 確認「Show dynamic checkout buttons」已勾選。自訂主題則用 Theme Inspector 搜尋 payment_button：

1shopify theme pull --store your-store.myshopify.com
2grep -rn "payment_button\|content_for_additional_checkout_buttons" sections/ snippets/

預期輸出：至少在 main-product.liquid 與 cart 相關檔案各出現一次。

4. 商品含訂閱或需要額外同意

含 selling plan（訂閱）的商品、需要勾選條款、或有自訂 line item property 為必填的商品，Shopify 會隱藏動態結帳按鈕以避免跳過必要步驟。這是設計行為。

5. 多幣別設定不完整

顧客所在市場的貨幣未在 Shopify Payments 啟用時，錢包按鈕可能不顯示。到 Settings → Markets → [市場] → Pricing 確認貨幣已設定。

6. 第三方 App 搶渲染位置

部分「購物車抽屜」「加購」App 會自行重寫 cart form，導致 content_for_additional_checkout_buttons 失效。暫時停用相關 App 逐一測試。

7. 交易被拒但按鈕正常

若 Apple Pay 流程走到最後被拒，通常是發卡行的 3-D Secure 或風控規則，而非整合問題。在 Shopify Admin 的訂單時間軸可看到拒絕代碼。香港消費者常用的本地銀行卡在跨境商戶 MCC 下被拒的情況不罕見——這需要跟收單方而非 Shopify 處理。

實務觀察：多市場部署比單店設定更容易出錯

Branch8 在為一間同時經營香港與東南亞站點的多品牌零售集團處理 Shopify Plus 結帳優化時，遇到的典型狀況不是「Apple Pay 設定不會」，而是「HK 站正常、SG 站不出現」。根本原因通常落在三處：新開的市場網域沒有重新跑 Apple Pay 網域驗證、Shopify Markets 的市場貨幣沒啟用、或是 Headless 前端的 buyerIdentity.countryCode 寫死在 HK。

做法上，我們會把網域驗證檢查寫成 CI 步驟，每次新增市場網域時自動跑一次 curl 檢查並在失敗時擋住部署——這比靠人記得去點一次設定可靠。對於用香港作為 APAC 營運中心、由一個團隊管 4-6 個市場站點的品牌，這類自動化檢查的回報率很高。

跨市場 checklist

每新增一個 APAC 市場時，依序確認：

1. Shopify Payments 是否支援該國家（台灣目前不在 Shopify Payments 支援名單，需用第三方閘道，錢包可用性會不同）
2. 市場網域的 /.well-known/ 路徑回傳 200
3. Markets 內該市場的貨幣與價格已設定
4. Headless 前端的 countryCode 由路由動態帶入，而非硬編碼
5. 用該市場的真實 IP（VPN 或實地測試）開啟商品頁驗證按鈕

上線後值得監控的三個指標

• 錢包結帳佔比：以 payment_info_submitted 事件的 paymentMethod 分組。若 Apple Pay 在 iOS 流量中佔比低於 15%，通常代表按鈕位置或可見度有問題，而非需求不足。
• 錢包 vs 一般結帳的轉換率差距：這是判斷是否要把錢包按鈕往上移的依據。
• 錢包交易的退款與爭議率：錢包交易帶有裝置層級的驗證，爭議率通常低於手動輸卡；若反常地高，要檢查是否有帳戶盜用情況。

如果你的團隊正在處理 Shopify Plus 的跨市場結帳部署、Headless 遷移，或要把多個 APAC 站點的支付設定標準化，Branch8 在香港、新加坡、台灣與澳洲都有交付團隊，可以協助從收單設定到前端整合的完整落地。歡迎與我們談談你的架構。

Sources

• Shopify Help Center — Shopify Payments
• Shopify.dev — Developer Documentation
• Shopify.dev — Web Pixels API
• Apple Developer — Apple Pay on the Web
• Google Pay API — Web Developer Overview
• Hong Kong Monetary Authority — Official Site
• Baymard Institute — Cart Abandonment Rate Statistics
• StatCounter Global Stats — Hong Kong