Google Pay API 網頁版 201：進階

1. 簡介

本程式碼實驗室是 Google Pay API for Web 101：基礎知識的延續，並依賴該程式碼實驗室中編寫的程式碼。如要完成本程式碼研究室，請務必先完成該程式碼研究室。

課程內容

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

軟硬體需求

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

使用 Firebase Studio 逐步操作

在 Firebase Studio 開啟

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

選用

預訂、購買、結帳、捐款、訂購、付款、一般、訂閱

在 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);
}

解釋程式碼

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

3. 付款資料回呼

付款用戶端提供機制，讓您註冊函式來處理特定事件。第一個是付款授權，第二個是付款資料變更。

  1. 在 main.js 中找出 // todo: paymentDataCallbacks 註解，並替換成以下程式碼。
    paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},
  2. 然後找出 main.js 的 Event Handlers 區段，並在區段結尾附加下列程式碼。
    function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}
  3. 最後，在 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.'
    },
  ],
},

解釋程式碼

  1. PaymentDataCallbacks 屬性有兩個子屬性，分別用於付款授權回呼和付款資料變更回呼。
  2. 如果實作回呼，則onPaymentAuthorized為必要。當 callbackIntents 清單在 PaymentDataRequest 中包含 PAYMENT_AUTHORIZATION 時，系統會叫用這個回呼。
  3. onPaymentDataChanged 為選填欄位。當 callbackIntents 清單在 PaymentDataRequest 中包含 OFFER、SHIPPING_ADDRESS 或 SHIPPING_OPTION 時，系統會叫用此回呼。
  4. 在 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);
  });
}

解釋程式碼

  1. 系統會使用 PaymentData 引數叫用 onPaymentAuthorized() 回呼函式，且該函式必須傳回 promise。在本例中，函式會隨機選擇傳回成功或錯誤。在專案中，您會利用這個機會，使用 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);
  });
}

解釋程式碼

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

6. 結語

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

執行專案

使用 Google Chrome 測試

使用 Google Chrome 網路瀏覽器開啟 index.html，方法是依序點選 Chrome 主選單中的「檔案」>「開啟檔案...」。以這種方式開啟專案時，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 存取網站。

下一步該做什麼？

其他資源