Mark Ku's Blog
首頁 關於我
Google Pay on Web + Cybersource 串接筆記
Payment
Google Pay on Web + Cybersource 串接筆記
Mark Ku
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}
/>

Google Pay 商戶號 ( merchantInfo.merchantInfo ) 非常隱秘,千萬別填錯了,我因為填錯搞了很久。

金流閘道商戶號 ( gatewayMerchantId )

全部頁面實作完成,送審通過就能正常收款。(蠻有效率的一至兩天就能收到信了)

最後,實作後端交易的 API,將前端傳遞的 Google Pay Token 傳到,Cybersource REST API 做交易。

參考資料

使用 Google Pay 在網路上快速結帳
在Web端接入Google Pay
Radial Payments & Fraud Documentation - Google Pay Web Integration
How to Integrate GooglePay in React


Tags

Mark Ku

Mark Ku

Software Developer

擁有豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO,專業的網站開發鐵三工程師。

Expertise

前端(React)
後端(C#)
網路管理

Social Media

facebook github website

Related Posts

Apple Pay on Web + Cybersource 串接筆記
Apple Pay on Web + Cybersource 串接筆記
August 10, 2022
2 min

Quick Links

關於我

Social Media