本頁面由 Cloud Translation API 翻譯而成。

Google Pay for Web 201：進階

1. 簡介

本程式碼研究室是「Google Pay API for Web 101：基本概念」的延伸課程，因此會使用該程式碼研究室中編寫的程式碼。如要完成本程式碼研究室，請務必先完成該程式碼研究室。

課程內容

如何自訂 Google Pay 按鈕
如何開始付款程序
如何確認付款授權狀態
如何處理運送地址變更
如何處理兌換代碼

軟硬體需求

您選擇的文字編輯器，用於編輯 HTML 和 JavaScript 檔案。
Google Chrome 網路瀏覽器，或其他測試本機網站的方法。
如要進行正式發布，您需要使用 Google Pay merchantId。註冊 Google Pay 和錢包主控台只需要一分鐘，建議您現在就完成註冊。

使用 Project IDX 進行操作

2. 按鈕自訂功能

以下簡要介紹 ButtonOptions。詳情請參閱說明文件

選項	必要性	值
onClick	必填	JavaScript 事件處理常式名稱
allowedPaymentMethods	選用	`PaymentMethod[]`
buttonColor	選用	預設、黑色、白色
buttonLocale	選用	兩個字母的 ISO 639-1 代碼。支援的語言代碼包括 en、ar、bg、ca、cs、da、de、el、es、et、fi、fr、hr、id、it、ja、ko、ms、nl、no、pl、pt、ru、sk、sl、sr、sv、th、tr、uk 和 zh。
buttonRadius	選用	0 至 100
buttonRootNode	選用	HTMLDocument 或 ShadowRoot
buttonSizeMode	選用	靜態、填滿
buttonType	選用	book、buy、checkout、donate、order、pay、plain、subscribe

在 main.js 檔案中找出 renderGooglePayButton() 方法，然後將其替換為此處列出的程式碼。

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

程式碼說明

createButton() 程式庫方法會採用 ButtonOptions 設定引數，讓您定義按鈕的外觀和行為。

3. 付款資料回呼

付款用戶端提供一項機制，可讓您註冊函式，以便在特定事件發生時處理。第一個是付款授權，第二個是付款資料變更。

找出 main.js 中的 // todo: paymentDataCallbacks 註解，並用以下程式碼取代。

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

接著，找出 main.js 的 Event Handlers 部分，然後在該部分結尾處附加以下程式碼。

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

最後，請在 main.js 中找出 // todo: callbackIntents 註解，並用以下程式碼取代註解。在本程式碼研究室中，我們將實作所有 4 個意圖。

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

程式碼說明

PaymentDataCallbacks 屬性有兩個子屬性，一個用於付款授權回呼，另一個用於付款資料變更回呼。
如果要實作回呼，就必須使用 onPaymentAuthorized。當 callbackIntents 清單在 PaymentDataRequest 中包含 PAYMENT_AUTHORIZATION 時，系統會叫用這個回呼。
onPaymentDataChanged 為選填欄位。當 callbackIntents 清單在 PaymentDataRequest 中包含 OFFER、SHIPPING_ADDRESS 或 SHIPPING_OPTION 時，系統會叫用此回呼。
在 PaymentDataRequest 中設定 callbackIntents，以便觸發本程式碼研究室的兩個回呼。

4. 付款授權

授權付款功能用於啟動付款流程，並確認付款授權狀態。

找出您在上一節新增的 main.js 中的 onPaymentAuthorized() 函式，然後將其替換為以下程式碼。

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

程式碼說明

onPaymentAuthorized() 回呼函式會使用 PaymentData 引數叫用，且必須傳回承諾。在這個範例中，函式會隨機選擇傳回成功或錯誤。在專案中，您會利用這個機會，使用 paymentData.paymentMethodData.tokenizationData.token 中 paymentData 的權杖，透過閘道處理交易。

5. 付款資料變更

動態價格更新功能可讓商家依據所選運送地址動態更新運送選項和交易資訊。此外，您也可以根據所選運送選項動態更新交易資訊。

找出您在上一節新增的 main.js 中的 onPaymentDataChanged() 函式，然後將其替換為以下程式碼。

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

程式碼說明

onPaymentDataChanged() 函式會使用 IntermediatePaymentData 做為引數。如果付款畫面中的運送地址或運送選項發生變更，系統就會叫用這個函式。
onPaymentDataChanged() 函式必須傳回承諾，以解析 PaymentDataRequestUpdate 物件，該物件會指定新的交易資訊、運送選項和錯誤訊息，以便更新付款畫面。
redemptionCodes 是指在付款表單中輸入的促銷代碼組合。包括已核准的代碼。

6. 結語

恭喜您完成本程式碼研究室！您已瞭解如何 ...

執行專案

使用 Google Chrome 進行測試

使用 Google Chrome 網路瀏覽器，透過 Chrome 主選單中的「檔案」>「開啟檔案...」開啟 index.html。以這種方式開啟專案時，Chrome 會執行 main.js。其他網路瀏覽器可能不允許執行 JavaScript。

– 或 –

使用本機網路伺服器進行測試

如果您已安裝 Python，請在根目錄 pay-web-101 資料夾中的終端機提示中執行 python3 -m http.server。

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

然後前往 http://localhost:8000 造訪您的網站。

下一步該做什麼？

查看整合檢查清單

其他資源

加入 Discord 上的 #payments 頻道對話
在 X 上追蹤 @GooglePayDevs
在 YouTube 上觀看 Google Pay 相關影片