Build with Gemini, our largest and most capable AI model. Get an API key.

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

透過 Google Pay 在網路上快速結帳

Google Pay API 可讓使用者使用儲存在 Google 帳戶中的付款資訊，隨時隨地進行付款。在這個研究室中，您運用 Google Pay 的用戶端程式庫，改善簡化版網路商店的結帳體驗，進而打造更快、更便利、更安全的使用體驗，進而帶來更多轉換、提升客戶滿意度。

這個商店的互動指標是透過屋頂計算。不過，這些指標也反映了結帳過程中的放棄率。我們十分樂意處理這項專案的負責人，他們發現影片顯示 Google Pay 為類似的網站創造出的驚人成效，因此他們決定採用這項做法，並且值得您信任整合服務。

建構目標

這個程式碼研究室會逐步引導您將 Google Pay 整合至現有的網站，包括確定使用者是否能使用 Google Pay 支援的付款方式付款、付款按鈕的位置和設計，以及執行交易。

課程內容

如何將 Google Pay 整合至現有的結帳頁面
如何選擇您偏好的付款方式
如何判斷使用者是否準備好使用 Google Pay 付款

您需要準備的項目

可上網的電腦
JavaScript 基本知識

在 glitch.com 執行範例網站

為了盡快讓遊戲上線，這個程式碼研究室已在 glitch.com 上推出。Glitch 是免費的網頁式環境，提供程式碼編輯器，以及代管和部署功能，可協助您建構和提供網路應用程式。

如要開始設定，請使用下方按鈕，在 Glitch 上佈建已用這個程式碼研究室所編寫的新開發環境。

在 Glitch.com 上啟動開發環境

之後，您可以使用 Glitch 的程式碼編輯器來修改檔案。如要開始使用您的應用程式，請使用頂端的 [顯示] 選單，然後選擇 [在新視窗中開啟]。

透過範例網站進行瀏覽

如您所見，這個存放區具備未合併的檔案結構。本程式碼研究室的主要目標是讓您，能夠將這項整合調整套用至現有和未來的應用程式，不受您選擇的架構、程式庫或工具影響。

探索網站

此示範市集的建立方式與現行應用程式或潛在應用程式可能類似。在新增購買方式之前，這項流程看起來很類似。事實上，雖然我們建議您以本示範應用程式為基礎，也可以直接使用此程式碼研究室將 Google Pay 整合至您現有的應用程式中。

現在，如果尚未開啟示範網站，請先開啟。方法是在執行 Glitch 的情況下按一下 [顯示] 按鈕，或是開啟您執行本機網路伺服器的網址。

示範網站沒什麼驚喜，對吧？產品詳細資料頁面，有相片、價格、說明、部分選取器，並提供可前往虛構和一般付款方式的按鈕。

本研究室的目標是以由 Google Pay 技術提供的雙鍵體驗來取代這個流程。

讓我們來規劃一下！

為了進一步瞭解這類整合作業，相關程序分為下列基本步驟：

載入程式庫
決定使用 Google Pay 付款的功能
顯示透過 Google Pay 付款的按鈕
建立並傳送付款要求
收集結果

加入 `script` 標記

如要開始使用 Google Pay API，您必須先載入 JavaScript 程式庫。方法是在您要呼叫 API 的 HTML 檔案中加入 script 標記，包括指向外部 JavaScript 程式庫的 src 屬性。

針對這個程式碼研究室，開啟 index.html 檔案。您應該已經看到指令碼已經加入：

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

除了 src 以外，您還新增了另外兩個屬性。

async 可允許指令碼在網頁的其他部分上同步載入及執行，因此文件的首次載入時間不會受到任何影響。
onload 能協助您延後執行這個程式庫的程式碼，直到指令碼載入完成為止。完成之後，系統便會執行您在此屬性中指定的函式。在這個範例中，函式為 onGooglePayLoaded。

將 API 用戶端執行個體化

指令碼載入後，您就可以開始使用這項服務。首先，將用戶端物件執行個體化，您稍後將用來呼叫 Google Pay API。

編輯 index.js 檔案，因為該檔案已是這項專案中的檔案結構的一部分。將 onGooglePayLoaded 函式替換為下列程式碼。

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

付款用戶端已使用 PaymentOptions 物件初始化。將 environment 設為 TEST 可測試整個整合過程中的虛擬付款資訊。當您準備建立支援實際交易的作業時，可以將 environment 屬性更新為 PRODUCTION。

總覽

我們已經載入 Google Pay API JavaScript 用戶端程式庫。現在，請將其設定為對我們發出 API 呼叫。

以下程式碼對程式碼其餘部分所做的所有變更，都將套用至 index.js 檔案。

骨骼

每次與 Google Pay API 進行通訊時，您需要在要求中加入一些設定參數，例如您指定的 API 版本。我們在此程式碼研究室中，此物件還包含應用程式中接受的付款方式相關資訊。最終的結構如下所示：

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

allowedPaymentMethods 屬性內含付款方式清單。無論採用哪一種付款方式，您都必須提供下列屬性：

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

只有必要的屬性 type 和 parameters 才能判斷使用者是否能透過 Google Pay 付款。

付款方式設定

在此範例中，您只能接受一項設定，也就是使用代碼化和主要帳號 (PAN) 表單，允許以 Mastercard 和 Visa 卡支付卡片費用。

以下是您在 index.js 中配置的設定方式：

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

整合所有資訊

我們來複習一下。

您定義了可在網站上接受的一種付款方式，而您使用的是 API 2.0 版。實際結果如下：

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

現在您的基本設定已準備就緒，讓我們開始吧！

Google Pay 的主要目標之一，就是為使用者提供更便捷的結帳體驗。這並不適用於使用者能使用 Google Pay 的情況，同時也適用於他們無法使用 Google Pay 的情況。使用 isReadyToPay 要求，您就能判斷自己是否準備好使用 Google Pay 付款，以及有機會據此修改網站體驗。

您的使用者是否能透過 Google Pay 付款？

首先，您必須確認網站上即將付款的使用者是否能使用 Google Pay。您必須指定 Google Pay API 的版本，並為您的網站設定付款方式。而此步驟是在上一個步驟中定義的基本設定物件。

在「onGooglePayLoaded()」函式中的「index.js」中，貼上以下內容：

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

如果呼叫失敗或傳回失敗回應，則 Google Pay 將不會採取進一步的行動。此時，最適當的步驟就是顯示其他支援使用者介面的其他使用者介面。

另一方面，如果回應成功，您現在可以讓使用者開始使用 Google Pay 了。因此，您即可新增一個按鈕，啟用使用者啟動程序 (例如按下按鈕)。

新增按鈕以透過 Google Pay 付款

雖然您可以使用任何符合 Google Pay 品牌規範的按鈕開始進行付款程序，但我們建議您透過 Google Pay API 產生一組按鈕。如此一來，您不但可以正確使用品牌規範，還能受惠於直接內建於按鈕上的其他改善功能，例如本地化。

如要產生按鈕，請使用 PaymentsClient 物件中的 createButton 方法，包括 ButtonOptions 設定按鈕。

在「createAndAddButton()」函式中的「index.js」中，貼上以下內容：

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

使用 createButton 時，唯一必要屬性是 onClick，這是決定使用者每次啟用按鈕時觸發回呼物件或函式的必要屬性。buttonColor 和 buttonType 可讓您自訂按鈕的外觀。請根據應用程式的主題和使用者介面需求，據此進行微調。

建立按鈕後，您只需在按鈕中加入 DOM 中適當的節點即可。在這個範例中，使用 buy-now 識別的 div 節點可用於此目的。

假設您也定義了用來處理按鈕點擊事件的函式。在下一節中，您將使用這個函式來要求付款方式。

準備付款要求

到目前為止，您已經載入 Google Pay API，並確定您網站的使用者可以透過 Google Pay 付款。因此，您已在使用者介面中顯示 Google Pay 付款按鈕，使用者現在可以展開交易了。現在請載入最後一筆付款畫面，其中列出不同登入使用者可用的付款方式。

和先前一樣，在 isReadyToPay 要求的定義中，這項呼叫也必須對先前定義的基礎設定物件中的屬性 (apiVersion、apiVersionMinor 和 allowedPaymentMethods) 以及部分新物件。這次你的付款方式中有一項新屬性「tokenizationSpecification」，以及與你的要求相關的「parameters」相關要求。此外，您也必須加入transactionInfo和merchantInfo。

在您的付款方式中加入其他必要資訊

首先，請建立先前使用的基本卡片付款方式複本。此卡片付款方式現在需要一個 tokenizationSpecification 屬性，以便定義如何處理所選付款方式的相關資料，以及實際交易所需的其他資料規定：本例中為完整的帳單地址和電話號碼。

`tokenizationSpecification` 屬性

代碼化規格會決定客戶使用的付款方式，以及如何完成交易。

系統支援兩種不同類型的處理策略。如果您是透過 PCI DSS 相容伺服器處理付款交易，請使用 DIRECT 規格類型。在此範例中，您將使用付款閘道來處理付款，因此需設定 PAYMENT_GATEWAY 規格類型。