Google Pay on Web + Cybersource 串接筆記

首頁關於我

Payment

Mark Ku

September 29, 2022

1 min

時空背景

因工作需要美國及德國電商網站，需要界接 Google Pay。

先前也有分享 Apple Pay on Web + Cybersource

程式串接前需提前準備的項目

網站需要 Https 環境
Google 開發者帳號( 25 美金 / 只需繳交一次 )
非直接對接Google Pay，則需要金流商戶 ( 本篇採用 cybersource )
頁面設計需符合 Google Pay UI 規範

Google Pay 付款流程

當使用者按下Google Pay 付款按鈕，會員可以選擇可付款信用卡 > 選取完信用卡後，前端會在 onLoadPaymentData 事件拿到 Google Pay Token，此時帶著 Google Pay Token Call 自己的後端 API，向金流商請求建立訂單。

Google Pay 設定

首先，至 Google Pay 開發者平台，登入 Google Pay 開發者帳號 > 透過主控台管理整合作業

啟用 Google Pay 後，填寫『商家檔案』

Google Pay API > 開始使用

填寫欲整合 Google Pay 網站域名，整合類型選擇『閘道』

先跳過此步，後面網站若實作完成 Google Pay 頁面後，依據審核要求，截圖上傳送審，經 Google 審核通過後，才能使用 PRODUCTION 環境。

送審後會禁止修改，並提示正在審核中

接著我們來到前端網站

安裝 Google Pay Button 套件

npm i @google-pay/button-react --save

撰寫程式碼

  const googlePayProcessResult = (paymentData) => {
    return checkStock()  // 檢查庫存     
      .then((res) => {
        const paymentDataString = paymentData.paymentMethodData.tokenizationData.token;
        const paymentDataBase64 = btoa(paymentDataString);

        let param: IPaymentProcessRequest = { PaymentTokenObject: paymentDataBase64 };
        // call 自己的後端，並透過自己後端和金流商交易
        digitalProcessResult(param).then((res) => {
          if(res.IsSuccess === true){
            alert('交易成功')
          }         
        });
      });
  };

<GooglePayButton
environment="PRODUCTION" // 審核通過才能使用
buttonType="short"
paymentRequest={{
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['MASTERCARD', 'VISA'],
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'cybersource', 
          gatewayMerchantId: 'letgo_account', // cybersource 後台商戶號 ( 非 android 商戶號 )
        },
      },
    },
  ],
  merchantInfo: {
    merchantId: 'ABB121232', // google pay developer merchantId
    merchantName: 'LetGo',
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPriceLabel: 'Total',
    totalPrice: numberFormat(degitalPayPrice, 2),
    currencyCode: 'USD',
    countryCode: 'US',
  },
}}
onLoadPaymentData={googlePayProcessResult}
/>