# Google Pay on Web 串接

在 Web 上面串接 Google Pay 算是蠻簡單的,最主要是要參考官方指南 (opens new window)按照步驟來串接,其中有些地方指南沒有寫清楚的部分我這邊補充一下。

# 付款代碼化方式

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

其中 type 可以為 PAYMENT_GATEWAY 或是 DIRECT,PAYMENT_GATEWAY 會是比較簡單的串接方式,也就是從 Google Pay 拿到的 Token 送去給第三方金流供應商(藍新、綠界、...)。

DIRECT 則是可以解出真正的卡號,所以可以直接對接銀行,但是因為會拿到真正的卡號,所以必須通過 PCI DSS 認證 (opens new window),這會需要很多 $$ 如果只是一般電商網站,是不會選擇這種方式的。

# 程式碼

程式碼的部分,測試環境就直接抄完整的實作範例 (opens new window)這邊的程式碼就可以了

# 部署到正式環境

完成測試環境整合後,就去申請正式版存取權 (opens new window)這個網頁申請正式版的權限。

其中有一個欄位要填 Google Drive 的連結,這邊要在 Google Drive 開一個 public folder 並複製這個 link 到這個欄位。

Drive link

那這個 folder 是 Google 來 review 的時候要我們要把螢幕錄影傳到這裡用的。

# Google 回信

Google 回信會要求你提供螢幕錄影,其中螢幕錄影必須要包含這四種平台

  • Chrome on Android
  • Chrome on Desktop
  • Safari on iOS
  • Firefox on Desktop

Google Pay API team 回覆

那就按表操課把這四個平台的影片錄好放到 Google Drive 的 folder 裡面,然後再回信給 Google 說你完成影片囉!

那其中 review 的重點會是:

# Google Pay Button 是否有符合 guidelines

這邊建議使用 createButton 這個 method 去建立按鈕,這個 method 好處除了產出的按鈕一定是符合 guidelines 之外,還支援多語系。

# 結帳流程是否完整

那這邊就很簡單,只要流程有把商品放入購物車 -> 進入購物車 -> 使用 Google Pay 結帳 -> 結帳完成頁面,這樣就 OK 了。

# 通過審查後準備上 production

如果影片都沒問題的話,大概一、兩天就會通過,通過之後 Google 就會寄來通過的信,同時告訴你下一步。

下一步就是要取得 merchantId,這要註冊 Google Pay Developer Profile,註冊完成就會取得 Merchant ID

Google Pay Developer Profile Merchant ID

# 修改程式碼

# allowedCardNetworks

這邊就是定義要支援哪些發卡組織,基本上定義 JCB, MASTERCARD, VISA 這三個就好了,其他發卡組織在台灣不太常見,那如果不改的話,在前端一樣會拿到 token 但是送往第三方金流供應商,第三方金流供應商不支援的話,會交易失敗。

const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
const allowedCardNetworks = ["JCB", "MASTERCARD", "VISA"];
# tokenizationSpecification

gateway 換成配合的第三方金流供應商,那配合的第三方金流供應商可以參考 API 文件 (opens new window)

gatewayMerchantId 填第三方金流供應商公司提供的 MerchantId

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};
# getGooglePaymentDataRequest

merchantId 填在 Google Pay Developer Profile 上的 Merchant ID

merchantName 填商店的名稱,這邊可以填中文

function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '01234567890123456789',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}
# getGooglePaymentsClient

environment 要換成 PRODUCTION,當然可以用一個變數來根據環境去變動

function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
  }
  return paymentsClient;
}
# getGoogleTransactionInfo

currencyCode 要換成網站要用的幣別

function getGoogleTransactionInfo() {
  return {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    // set to cart total
    totalPrice: '1.00'
  };
}

# Go Production

修改完所有程式碼後就可以上 production,上 production 就用自己的信用卡測試,反正成功結帳之後再刷退就好。

贊助商連結
(adsbygoogle = window.adsbygoogle || []).push({});