教學課程

請按照這個教學課程中的步驟將網頁應用程式與 Google Pay API 整合，並將該應用程式設定為接受付款卡。

步驟 1：定義 Google Pay API 版本。
步驟 2：選擇付款權杖化方式。
步驟 3：定義支援的付款卡發卡機構。
步驟 4：說明您允許的付款方式。
步驟 5：載入 Google Pay API JavaScript 程式庫。
步驟 6：判斷是否適合使用 Google Pay API 付款。
步驟 7：新增 Google Pay 付款按鈕。
步驟 8：建立 PaymentDataRequest 物件。
步驟 9：針對使用者手勢註冊事件處理常式。
步驟 10 (選用)：在使用者進行互動前預先擷取付款資料。
步驟 11 (選用)：設定授權付款功能。
步驟 12 (啟用運送選項時的選擇性步驟)：設定動態價格更新功能。
步驟 13 (促銷代碼的選用步驟)：設定促銷代碼。
完整的實作範例。
注意：請參閱 Google Pay 即時示範頁面。

步驟 1：定義 Google Pay API 版本

宣告您網站使用的 Google Pay API 版本。傳遞每個物件時，物件的欄位都必須具有主要和次要版本，回應中也會包含這項資訊。

下列程式碼範例顯示了已宣告的 API 版本：

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

步驟 2：為付款服務供應商申請付款權杖

Google 會將付款人所選卡片的相關資訊加密，以便付款服務供應商安全地進行處理。

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

將 example 和 exampleGatewayMerchantId 替換為適用於付款服務供應商的值。請參閱下表，找出服務供應商適用的特定 gateway 和 gatewayMerchantId 值：

開發人員說明文

閘道	參數和文件
ABA PayWay	"gateway": "ababank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
accept.blue	"gateway": "acceptblue" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ACI	"gateway": "aciworldwide" "gatewayMerchantId": "`YOUR_ENTITY_ID`" 開發人員說明文件
ACpay	"gateway": "acpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Acquired.com	"gateway": "acquired" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Adyen	"gateway": "adyen" "gatewayMerchantId": "`YOUR_MERCHANT_ACCOUNT_NAME`" 開發人員說明文件
Airba Pay	"gateway": "airbapay" "gatewayMerchantId": "`YOUR_MERCHANT_ACCOUNT_NAME`" 開發人員說明文件
Airvend	"gateway": "airvend" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Airwallex	"gateway": "airwallex" "gatewayMerchantId": "`YOUR_MERCHANT_ACCOUNT_NAME`" 開發人員說明文件
Akurateco	"gateway": "akuratecolab" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Alfa-Bank	"gateway": "alfabank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Algoritma	"gateway": "algoritma" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Allinpay	"gateway": "allinpayintl" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
AllPayments	"gateway": "allpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
alticepay	"gateway": "alticepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Anedot	"gateway": "anedot" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ApcoPay	"gateway": "apcopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
APPEX	"gateway": "epos" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
AsiaBill	"gateway": "asiabill" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Assist	"gateway": "assist" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Assist Belarus	"gateway": "belassist" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Assist Kazakhstan	"gateway": "assistkz" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Aurus	"gateway": "auruspay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Axerve	"gateway": "gestpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Bank 131	"gateway": "bank131" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Bank Vostok	"gateway": "bankvostok" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Barclaycard	"gateway": "barclayssmartpayadvance" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Barion	"gateway": "barion" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
BCC.KZ	"gateway": "bccpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
bePaid	"gateway": "ecomcharge" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Bereke Bank	"gateway": "berekepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Billing Systems	"gateway": "billingsystems" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Bizzon	"gateway": "bizzon" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Blocks	"gateway": "blocks" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Bluefin	"gateway": "bluefin" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Blue Media	"gateway": "bluemedia" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
BlueSnap	"gateway": "bluesnap" "gatewayMerchantId": "`YOUR_shopToken`" 開發人員說明文件
BPC	"gateway": "bpcpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
BR-DGE	"gateway": "comcarde" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Braintree	"gateway": "braintree" "braintree:apiVersion": "v1" "braintree:sdkVersion": "braintree.client.`VERSION`" "braintree:merchantId": "`YOUR_BRAINTREE_MERCHANT_ID`" "braintree:clientKey": "`YOUR_BRAINTREE_TOKENIZATION_KEY`" 開發人員說明文件
Braspag	"gateway": "cielo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
BridgerPay	"gateway": "bridgerpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Buya	"gateway": "buya" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CardCom	"gateway": "cardcom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CardConnect	"gateway": "cardconnect" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cardknox	"gateway": "cardknox" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cardstream	"gateway": "crst" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cashflows	"gateway": "cashflowsgateway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
國泰世華商業銀行	"gateway": "cathaybk" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CCAvenue UAE	"gateway": "ccavenueuae" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cecabank	"gateway": "cecabank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Celerispay	"gateway": "celerispay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CentralPay	"gateway": "centralpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Chargehive	"gateway": "chargehive" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CharityEngine	"gateway": "charityengine" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Chase Merchant Services	"gateway": "chase" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Checkout.com	"gateway": "checkoutltd" "gatewayMerchantId": "`YOUR_PUBLIC_KEY`" 開發人員說明文件
CityPay	"gateway": "citypay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cloud9 Payment Gateway (C9PG)	"gateway": "c9pg" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CloudPayments	"gateway": "cloudpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CloudWalk	"gateway": "cloudwalk" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
Computop	"gateway": "computop" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ConcordPay	"gateway": "concordpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Connectum	"gateway": "connectum" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ConnexPay	"gateway": "connexpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Corefy	"gateway": "paycoreio" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Corvus Pay	"gateway": "corvuspay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Credorax	"gateway": "credorax" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CrossPay	"gateway": "crosspay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CSG Forte	"gateway": "csgforte" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
中國信託商業銀行	"gateway": "ctbcbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
CURO Payments	"gateway": "curopayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Cybersource	"gateway": "cybersource" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
danube.pay	"gateway": "danubepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Datacap Systems, Inc.	"gateway": "datacap systems inc." "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Datatrans	"gateway": "datatrans" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
DECTA	"gateway": "decta" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Deutsche Bank AG	"gateway": "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Deutsche Bank – Merchant Solutions	"gateway": "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
DG Financial Technology, Inc.	"gateway": "veritrans" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Digital Finance	"gateway": "digitalfinance" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
dLocal	"gateway": "dlocal" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
DNA Payments	"gateway": "dnapayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Dojo	"gateway": "dojo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Dotpay	"gateway": "dotpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
e-SiTef - Software Express	"gateway": "softwareexpress" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
easycard	"gateway": "easycard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
EasyPay	"gateway": "easypay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
EBANX	"gateway": "ebanx" "gatewayMerchantId": "`YOUR_PUBLIC_INTEGRATION_KEY`" 開發人員說明文件
eCard	"gateway": "ecard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ECOMMPAY	"gateway": "ecommpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Ecopaynet	"gateway": "ecopaynet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ECPay	"gateway": "ecpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
eGHL	"gateway": "eghl" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Elavon (Converge)	"gateway": "convergepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Emerchantpay	"gateway": "emerchantpay" "gatewayMerchantID": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
emspay	"gateway": "emsonline" "gatewayMerchantID": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Encoded	"gateway": "encoded" "gatewayMerchantID": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
EpicPay	"gateway": "epicpay" "gatewayMerchantID": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Espago	"gateway": "espago" "gatewayMerchantID": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
EveryPay	"gateway": "everypay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
EVONET	"gateway": "cardinfolink" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Evopay	"gateway": "evopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Evo Payment Gateway	"gateway": "evopaymentgateway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
exactly.com	"gateway": "exactly" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Exact Payments	"gateway": "exactpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Fat Zebra	"gateway": "fatzebra" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Fenige	"gateway": "fenige" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Fibonatix	"gateway": "fibonatixparagon" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Financial Line	"gateway": "finline" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Finanso UA	"gateway": "finansoua" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
FINEXUS	"gateway": "finexus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Finix	"gateway": "finix" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
First American by Deluxe	"gateway": "firstpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
First Data (Payeezy)	"gateway": "firstdata" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
FIS Biller Solutions	"gateway": "fisglobalbsp" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Fluid Pay	"gateway": "fluidpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
FM Finance LTD	"gateway": "fmfinanceltd" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ForteBank	"gateway": "fortebank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Freedom Finance Bank	"gateway": "axayscom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
FreedomPay	"gateway": "freedompay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
FreedomPay.Money	"gateway": "payboxmoney" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Freepay	"gateway": "freepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Frontstream	"gateway": "frontstreampayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Fung Payments	"gateway": "fungpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GB Payments	"gateway": "gbpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
geidea	"gateway": "geidea" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GETTRX	"gateway": "globalelectronictechnology" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Global One Pay	"gateway": "globalonepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Global Payments	"gateway": "globalpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GMO Payment Gateway	"gateway": "gmopg" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GoDaddy Payments	"gateway": "godaddypayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Good Idea Technologies	"gateway": "git" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GoPay	"gateway": "gopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
GP Webpay	"gateway": "gpwebpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Gr4vy	"gateway": "gr4vy" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Gravity Payments	"gateway": "gravitypayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Halyk Bank	"gateway": "halykbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Helcim	"gateway": "helcim" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
HIPS	"gateway": "hips" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
HiTrust	"gateway": "hitrustpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Hyp	"gateway": "hyp" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
icard	"gateway": "icardwallet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
iKhokha	"gateway": "ikhokha" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
IMOJE	"gateway": "imoje" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Impaya	"gateway": "impayarus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
InPlat	"gateway": "inplat" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
InstaMed	"gateway": "instamed" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
IntellectMoney	"gateway": "intellectmoney" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Interactive Transaction Solutions	"gateway": "interactivets" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Interswitch Payment Gateway	"gateway": "interswitch" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Intervale	"gateway": "intervale" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ioka fintech	"gateway": "ioka" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
iPay88	"gateway": "ipay88" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
IPSI	"gateway": "ipsi" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
iQmetrix	"gateway": "iqmetrixpaymentservicesgateway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
IXOPAY	"gateway": "ixopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
JetPay	"gateway": "jetpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
JudoPay	"gateway": "judopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Kassa	"gateway": "kassacom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
kassa24pay	"gateway": " kassa24pay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Kineox	"gateway": "kineox" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Klix by Citadele	"gateway": "klix" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Lapsa Payments	"gateway": "lapsapayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
LHV Pank	"gateway": "lhvpank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Liberty	"gateway": "liberty" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Lifepay	"gateway": "lifepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Limepay	"gateway": "limepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
LiqPay	"gateway": "liqpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Littlepay	"gateway": "littlepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
LogPay	"gateway": "logpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Loyale	"gateway": "loyale" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
lynck	"gateway": "lynck" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Lyra	"gateway": "lyra" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Magnetiq Bank	"gateway": "magnetiq" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
maib	"gateway": "maibecomm" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MakeCommerce (Maksekeskus)	"gateway": "maksekeskus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Mastercard Payment Gateway Services	"gateway": "mpgs" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Mandarin	"gateway": "mandarin" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Market Pay	"gateway": "marketpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MerchantE	"gateway": "merchante" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Merchant Warrior	"gateway": "merchantwarrior" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Minsait Payments Systems	"gateway": "minsaitpaymentsgateway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MITEC	"gateway": "mitecmx" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MIXPLAT	"gateway": "mixplat" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MOBI.Money	"gateway": "mobimoney" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Modulbank	"gateway": "modulbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Molpay	"gateway": "molpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Mondido	"gateway": "mondido" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Monei	"gateway": "monei" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
monek	"gateway": "monek" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Moneris	"gateway": "moneris" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Moneta	"gateway": "moneta" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
Monext	"gateway": "monext" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Money.Mail.Ru	"gateway": "moneymailru" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MPay	"gateway": "managepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
mstartipg	"gateway": "mstartipg" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Multicarta	"gateway": "mulitcarta" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MultiSafepay	"gateway": "multisafepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Mundipagg	"gateway": "mundipagg" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MyCheck	"gateway": "mycheck" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MyChoice2Pay	"gateway": "mychoice2pay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MyFatoorah	"gateway": "myfatoorah" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
MyPay	"gateway": "mypay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
myPOS	"gateway": "mypos" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
N&TS Group	"gateway": "netsgroup" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
NCCC	"gateway": "nccc" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Neon Pay	"gateway": "neonpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Netopia	"gateway": "netopia" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Netvalve	"gateway": "netvalve" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
藍新金流 (原為「STPath」、「Pay2Go」)	"gateway": "newebpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Newtech	"gateway": "newtechmobile" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Nexi	"gateway": "nexi" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
NMI	"gateway": "gatewayservices" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
noon payments	"gateway": "noonpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Noqoody Pay	"gateway": "noqoodypay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Novalnet	"gateway": "novalnet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
NTT DATA	"gateway": "nttdatahk" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Nuvei	"gateway": "nuvei" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Oceanpayment	"gateway": "oceanpayment" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Omise	"gateway": "omise" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
One Inc	"gateway": "oneinc" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Onelya	"gateway": "onelya" "gatewayMerchantId": "`YOUR_GATWAY_MERCHANT_ID`" 開發人員說明文件
Onerway	"gateway": "ronghan" "gatewayMerchantId": "`YOUR_GATWAY_MERCHANT_ID`" 開發人員說明文件
OneVision Limited	"gateway": "onevision" "gatewayMerchantId": "`YOUR_GATWAY_MERCHANT_ID`" 開發人員說明文件
OnPay	"gateway": "onpayio" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Opayo by Elavon	"gateway": "opayoelavon" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Oschadbank	"gateway": "oschadbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
pagarme	"gateway": "pagarme" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PagBank	"gateway": "pagbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PagBrasil	"gateway": "pagbrasil" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PagSeguro	"gateway": "pagsegurointernational" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PAY2M	"gateway": "pay2m" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payarc	"gateway": "payarc" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pay.com	"gateway": "paycom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PAYCOMET	"gateway": "paycomet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paydock	"gateway": "paydock" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
首信易支付	"gateway": "payeasenet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayEngine	"gateway": "payengine" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayFabric	"gateway": "payfabric" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayFacto	"gateway": "payfacto" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
paygent	"gateway": "paygent" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayHub	"gateway": "payhub" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayLane	"gateway": "paylane" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payler	"gateway": "payler" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayLink®	"gateway": "paylink" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payload	"gateway": "payload" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymark	"gateway": "paymark" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayMaster	"gateway": "paymaster" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payment Fusion	"gateway": "paymentfusion" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymentvision	"gateway": "paymentvision" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymentwall	"gateway": "paymentwall" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymo	"gateway": "paymo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymob	"gateway": "gpaymob" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paymtech	"gateway": "paymtech" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayNearMe	"gateway": "paynearme" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payneteasy	"gateway": "payneteasy" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pay.nl	"gateway": "paynl" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paynopain	"gateway": "paynopain" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayOne	"gateway": "payone" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayOnline	"gateway": "payonline" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payoo	"gateway": "payoo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayPlus	"gateway": "payplus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payrails	"gateway": "payrails" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payrexx	"gateway": "payrexx" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayRiff	"gateway": "payriff" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payrix	"gateway": "payrix" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paysafe	"gateway": "paysafe" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payscout	"gateway": "payscout" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paysend Business	"gateway": "paysend" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pay360	"gateway": "pay360" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
paytech	"gateway": "paytechsolutions" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayTech Ukraine	"gateway": "paytech" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paythru	"gateway": "paythru" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paysoft	"gateway": "paysoft" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payture	"gateway": "payture" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayU	"gateway": "payu" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayU LATAM	"gateway": "payulatam" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PAYUNi	"gateway": "payuni" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayU Romania	"gateway": "payuro" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PayU Russia	"gateway": "payuru" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Payway	"gateway": "payway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Paywiser	"gateway": "paywiser" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pelecard	"gateway": "pelecard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pikassa	"gateway": "pikassa" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PingPong	"gateway": "pingpongx" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pin Payments	"gateway": "pinpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Planet	"gateway": "cccpayment" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PlanetPay	"gateway": "itcardpaymentservice" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Plategka.com	"gateway": "plategkacom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Platon	"gateway": "platon" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Pomelo	"gateway": "pomelopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Portmone	"gateway": "portmonecom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Primer	"gateway": "primer" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Procard	"gateway": "procard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
ProcessOut	"gateway": "processout" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Przelewy24	"gateway": "przelewy24" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PSB Bank	"gateway": "psbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PSCB	"gateway": "pscbru" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
PXP Financial	"gateway": "pxpfinancial" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Qenta Payment CEE	"gateway": "qenta" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
QIWI	"gateway": "qiwi" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Qualpay	"gateway": "qualpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
QuickPay	"gateway": "quickpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Qvalent	"gateway": "qvalent" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Radial	"gateway": "radial" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Rapyd	"gateway": "rapyd" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
RBK.money	"gateway": "rbkmoney" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Rebail Capital	"gateway": "rebailcapital" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Rebilly	"gateway": "Rebilly" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Recurly	"gateway": "recurly" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Reddot	"gateway": "reddotpayment" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Rede	"gateway": "rede" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Redsys	"gateway": "redsys" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Reepay	"gateway": "reepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
RocketGate	"gateway": "rocketgate" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Russian Standard Bank	"gateway": "rsb" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Ryft	"gateway": "ryft" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Saferpay	"gateway": "worldlinesaferpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Safexpay	"gateway": "safexpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Sberbank	"gateway": "sberbank" "gatewayMerchantId": "`YOUR_ORGANIZATION_NAME`" 開發人員說明文件
SEB Baltic	"gateway": "sebbaltic" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Sense Bank	"gateway": "sensebank" "gatewayMerchantId": "`YOUR_ORGANIZATION_NAME`" 開發人員說明文件
SensePass	"gateway": "sensepass" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Shift4	"gateway": "shift4payments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Shiji Group	"gateway": "shijipaymentsolutions" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
SH Start High	"gateway": "shstartpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
simbasoft	"gateway": "simbasoft" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Sipay	"gateway": "sipay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Softbank Payment Service	"gateway": "sbps" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Solid	"gateway": "solid" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Sony Payment Services	"gateway": "sonypaymentservices" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Splitit	"gateway": "splitit" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Spreedly	"gateway": "spreedly" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Square	"gateway": "square" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
SredaPay	"gateway": "sredapay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Stancer	"gateway": "stancer" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Stripe	"gateway": "stripe" "stripe:version": "2018-10-31" "stripe:publishableKey": "`YOUR_PUBLIC_STRIPE_KEY`" 開發人員說明文件
紅陽科技	"gateway": "esafe" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Surfboard Payments	"gateway": "surfboard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Svea Bank	"gateway": "svea" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Swedbank Baltic	"gateway": "swedbankbaltic" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Swedbank Pay	"gateway": "payexswedbankpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TabaPay	"gateway": "tabapay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TapPay (喬睿科技)	"gateway": "tappay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TapPayments	"gateway": "tappayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
tarlanpayments	"gateway": "tarlanpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TAS Link	"gateway": "taslink" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tatra banka (CardPay)	"gateway": "tatrabanka" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
TEKO	"gateway": "teko" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
theMAP	"gateway": "themap" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Till Payments	"gateway": "tillpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tinkoff	"gateway": "tinkoff" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TPay	"gateway": "tpaycom" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TPay.com	"gateway": "tpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Transact Campus	"gateway": "transactcampus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Transaction Services Network	"gateway": "tns" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Transpayrent	"gateway": "transpayrent" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tranzila	"gateway": "tranzila" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tranzzo	"gateway": "tranzzo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tribe Payments	"gateway": "tribepayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Truevo	"gateway": "truevo" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
TrustPay	"gateway": "trustpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Trust Payments	"gateway": "trustpayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Tuna	"gateway": "tuna" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
2can&ibox	"gateway": "twocan" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
UAPAY	"gateway": "uapay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
UBRR	"gateway": "ubrrpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Ukrcard	"gateway": "ukrcardpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
UkrGasBank Pay	"gateway": "ukrgasbankpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Unibank OJSC	"gateway": "unibankcheckout" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
unitedfinancialcorporation	"gateway": "unitedfinancialcorporation" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Uniteller	"gateway": "uniteller" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Unitpay	"gateway": "unitpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Unlimint	"gateway": "unlimint" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Unzer	"gateway": "unzer" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Unzer Austria	"gateway": "unzeraustria" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
UPC	"gateway": "upc" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Upgate	"gateway": "upgate" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
USAePay	"gateway": "usaepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
UseePay	"gateway": "useepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Valitor	"gateway": "valitor" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Vantiv	"gateway": "vantiv" "vantiv:merchantPayPageId": "`YOUR_PAY_PAGE_ID`" "vantiv:merchantOrderId": "`YOUR_ORDER_ID`" "vantiv:merchantTransactionId": "`YOUR_TRANSACTION_ID`" "vantiv:merchantReportGroup": "*web" 開發人員說明文件
Verestro	"gateway": "verestro" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Very Good Security	"gateway": "verygoodsecurity" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Vindicia	"gateway": "vindicia" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Viva Wallet	"gateway": "vivawallet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
VTEX	"gateway": "vtex" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Walletdoc	"gateway": "walletdoc" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Walletto	"gateway": "walletto" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WayForPay	"gateway": "wayforpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WEAT	"gateway": "weatpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WhenThen	"gateway": "whenthen" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Windcave	"gateway": "windcave" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Wirebank	"gateway": "wirebank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Wirecard	"gateway": "wirecard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WOOPPAY	"gateway": "wooppay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WooshPay	"gateway": "swooshtransfer" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldline (GlobalCollect)	"gateway": "globalcollect" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldline - Ingenico (WL Online Checkout)	"gateway": "worldlineingenicoogone" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldline Nordics (Worldline Online Checkout)	"gateway": "worldlineonlinecheckout" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldline Sips	"gateway": "wlsips" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldnet	"gateway": "worldnet" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Worldpay	"gateway": "worldpay" "gatewayMerchantId": "`YOUR_WORLDPAY_MERCHANT_ID`" 開發人員說明文件
Wpay	"gateway": "wpayaus" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
WSPay	"gateway": "wspay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
XPATE	"gateway": "xpate" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
xpay	"gateway": "xpaycomua" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
YIĞIM Payment System	"gateway": "yigim" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 沒有可用的開發人員說明文件
ЮKassa (YooKassa)	"gateway": "yoomoney" "gatewayMerchantId": "`YOUR_SHOP_ID`" 開發人員說明文件
Z-credit	"gateway": "zcredit" "gatewayMerchantId": "`YOUR_SHOP_ID`" 開發人員說明文件
ZEN.com	"gateway": "zen" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Zest	"gateway": "zestpayment" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件
Zuora	"gateway": "zuora" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 開發人員說明文件

提示：example 在測試環境中為有效的閘道名稱。如想試用 API，您可以直接使用上方的程式碼範例，無須進行任何變更。使用 example 閘道時，您的網站不會收到可進行交易的卡片資料，但使用者流程看起來完全相同。

PAYMENT_GATEWAY 權杖化類型是商家最常在 Google Pay API 中實作的卡片付款方式。如果系統不支援您的付款服務供應商，您或許可以透過直接整合來接受 Google Pay 付款。詳情請參閱直接權杖化說明文件。

步驟 3：定義支援的付款卡發卡機構

定義貴商家網站接受的發卡機構。請參閱下列程式碼範例：

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

Google Pay API 可能會傳回 Google 系統中儲存的卡片 (PAN_ONLY)，以及/或是已通過 3-D Secure 密文驗證的 Android 裝置權杖 (CRYPTOGRAM_3DS)。請參閱下列程式碼範例：

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

詳情請參閱物件參考說明文件中的 CardParameters。您也可以與閘道或處理方聯絡，確認支援的發卡機構和取得 Android 裝置權杖的相關協助。

步驟 4：說明允許的付款方式

請完成下列步驟來說明您允許的付款方式：

將支援的驗證方法和發卡機構加以結合，以便說明您的網站對於 CARD 這個付款方式的支援。請參閱下列程式碼範例：

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

擴充基本卡片付款方式物件，藉此說明您希望傳回至應用程式的資訊。另外，請提供權杖化付款資料的說明。請參閱下列程式碼範例：
```
const cardPaymentMethod = Object.assign(
  {tokenizationSpecification: tokenizationSpecification},
  baseCardPaymentMethod
);
```

如要進一步瞭解支援的 parameters，請參閱 CardParameters。

Google Pay 也支援 CARD 和 PAYPAL 類型的付款方式。如要進一步瞭解如何將 PAYPAL 類型新增為 Google Pay 付款方式，請參閱 PayPal 的開發人員說明文件。

步驟 5：載入 Google Pay API JavaScript 程式庫

如要載入 Google Pay API JavaScript 資料庫，請完成下列步驟：

將 Google 託管的 JavaScript 新增至您的頁面。請參閱下列程式碼範例：

<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="console.log('TODO: add onload function')">
</script>

載入 Google Pay API JavaScript 程式庫之後，請初始化 PaymentsClient 物件。初始開發作業會使用 TEST 環境，這個環境會傳回適合用於參照付款回應結構的虛擬付款方式。在這個環境中，選取的付款方式無法用於交易。請參閱以下程式碼範例。
注意：建議您僅初始化 paymentsClient 一次。當您叫用所有其他 API (例如 CreateButton、IsReadyToPay、PrefetchPaymentData 和 LoadPaymentData) 時，請使用相同的執行個體。
```
const paymentsClient =
    new google.payments.api.PaymentsClient({environment: 'TEST'});
```
如要進一步瞭解會傳回可扣款付款方式的 PRODUCTION 環境相關規定，請參閱整合作業檢查清單。

步驟 6：判斷是否準備好使用 Google Pay API 付款

如要判斷是否準備好使用 Google Pay API 付款，請完成下列步驟：

在基本要求物件中新增允許的付款方式。請參閱下列程式碼範例：

const isReadyToPayRequest = Object.assign({}, baseRequest);
isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];

呼叫 isReadyToPay() 來判斷目前的裝置和瀏覽器是否支援 Google Pay API，藉此確認指定的付款方式確實可用。請參閱下列程式碼範例：

paymentsClient.isReadyToPay(isReadyToPayRequest)
    .then(function(response) {
      if (response.result) {
        // add a Google Pay payment button
      }
    })
    .catch(function(err) {
      // show error in developer console for debugging
      console.error(err);
    });

步驟 7：新增 Google Pay 付款按鈕

在您的網頁中新增 Google Pay 付款按鈕，鼓勵購物者透過 Google Pay API 和您網站支援的付款方式結帳。如要進一步瞭解可用的按鈕類型、顏色和顯示規定，請參閱品牌規範。

請參閱下列付款按鈕程式碼範例：

const button =
    paymentsClient.createButton({onClick: () => console.log('TODO: click handler'),
    allowedPaymentMethods: []}); // make sure to provide an allowed payment method
document.getElementById('container').appendChild(button);

步驟 8：建立 PaymentDataRequest 物件

如要建立 PaymentDataRequest 物件，請完成下列步驟：

建立 JavaScript 物件來說明您的網站是否支援 Google Pay API。如需完整的支援屬性清單，請參閱 PaymentDataRequest。請參閱下列程式碼範例：
```
const paymentDataRequest = Object.assign({}, baseRequest);
```
新增您應用程式支援的付款方式，例如您希望回應中包含的任何其他資料設定。請參閱下列程式碼範例：
```
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
```
定義要經過購物者授權的總價格和貨幣。請參閱下列程式碼範例：
重要事項：如果商家在歐洲經濟區 (EEA) 或採行嚴格客戶驗證 (SCA) 機制的任何其他國家/地區處理交易，則須加入 countryCode、totalPrice 和 merchantName 參數，以符合 SCA 規定。
```
paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};
```
提供向使用者顯示的商家名稱，並在 TEST 中使用我們的 TEST merchantId 值。如需更多詳細資料或想瞭解 TEST merchantId 值的替換時機，請參閱 MerchantInfo 的說明。請參閱下列程式碼範例來瞭解使用者可以查看的商家名稱：
```
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890'
};
```
注意：我們的 TEST merchantId 值是數字。您的特定 merchantId 值可以是數字，或英數字元都有。請檢閱 MerchantInfo 的說明，進一步瞭解如何取得您的特定 merchantId。

步驟 9：註冊使用者手勢的事件處理常式

如要註冊使用者手勢的事件處理常式，請完成下列步驟：

註冊購買按鈕的點擊事件處理常式。事件處理常式與 Google Pay 付款按鈕互動之後，會立即呼叫 loadPaymentData()。
Google 使用者授權您的網站接收使用者所選付款方式和選用聯絡資料的相關資訊之後，請處理 Google Pay API 傳出的回應。

擷取 paymentData 回應中的付款權杖。如果實作了閘道整合，請將這個權杖傳送至閘道，不要進行任何修改。

注意：在 TEST 環境中，如果您選取的付款方式適合顯示於確認頁面，您就會在付款回應中看見相關摘要資料。付款回應中不含可進行交易的付款方式。

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
  // if using gateway tokenization, pass this token without modification
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}).catch(function(err){
  // show error in developer console for debugging
  console.error(err);
});

步驟 10 (選擇性步驟)：在使用者進行互動前預先擷取付款資料

呼叫 loadPaymentData() 之前，請先透過 Google Pay API 預先擷取您網站的付款設定，以便縮短執行時間。請參閱以下範例：

paymentsClient.prefetchPaymentData(paymentDataRequest);

步驟 11 (選擇性步驟)：設定授權付款功能

授權付款功能用於啟動付款流程，並確認付款的授權狀態。如要設定授權付款功能，請按照下列步驟操作：

在 PaymentOptions 中註冊 onPaymentAuthorized() 回呼。
使用 PAYMENT_AUTHORIZATION 回呼意圖呼叫 loadPaymentData() 函式。
導入 onPaymentAuthorized()。

註冊 onPaymentAuthorized 回呼

下列程式碼範例說明如何註冊 onPaymentAuthorized 回呼：

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized
  }
}

使用回呼意圖載入付款資料

透過下列程式碼範例，您可以瞭解如何使用授權付款功能初始化付款畫面：

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890',
};

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

處理 onPaymentAuthorized 回呼

付款人透過使用者手勢 (例如按一下「付款」) 核准付款後，Google 會使用 PaymentData 物件叫用 onPaymentAuthorized() 回呼。

回呼會傳回 Promise<PaymentAuthorizationResult> 值。PaymentAuthorizationResult 物件包含 SUCCESS 或 ERROR 交易狀態。付款成功後，會順利關閉付款畫面。如果發生問題，付款畫面會在款項處理完畢後顯示系統傳回的錯誤詳細資料。使用者可以變更付款畫面中的付款資料，然後重新授權付款。請參閱下列程式碼範例：

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
      resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
    });
  });
}

步驟 12 (啟用運送選項時的選擇性步驟)：設定動態價格更新功能

動態價格更新功能可讓商家依據所選運送地址動態更新運送選項和交易資訊。另外，您也能按照所選運送選項動態更新交易資訊。

如要設定動態價格更新功能，請執行下列步驟：

在 PaymentOptions 中註冊 onPaymentAuthorized 和 onPaymentDataChanged 回呼。
使用回呼意圖呼叫 loadPaymentData() 函式。詳情請參閱相應的範例。
實作 onPaymentAuthorized 和 onPaymentDataChanged。

註冊 PaymentData 回呼

下列程式碼範例顯示，必須在 PaymentsClient paymentOptions 物件中註冊回呼函式，才能啟用動態價格更新功能。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized,
    onPaymentDataChanged: onPaymentDataChanged
  }
}

使用回呼意圖載入付款資料

透過下列程式碼範例，您可以瞭解如何使用必要的運送地址和運送選項設定來初始化付款畫面：

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];

paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
paymentDataRequest.shippingOptionRequired = true;

處理 onPaymentDataChanged 回呼

系統會使用 IntermediatePaymentData 物件叫用 onPaymentDataChanged 回呼，當中包含使用者在付款畫面中選取的運送地址和運送選項。

回呼會傳回 Promise<PaymentDataRequestUpdate>。PaymentDataRequestUpdate 物件中會包含新的交易資訊、運送選項和付款資料錯誤訊息。系統會使用這項資料更新付款畫面。

您可以直接在付款畫面中處理任何例外狀況，例如超出服務範圍的運送地址或無效的運送選項。設定 PaymentDataError 物件即可凸顯錯誤訊息中的錯誤原因，方便使用者查看。不過，請記得將相關意圖加入訊息中。如要進一步瞭解設定物件和訊息的方式，請參閱下列程式碼範例：

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let shippingAddress = intermediatePaymentData.shippingAddress;
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};

    if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
      if(shippingAddress.administrativeArea == "NJ")  {
        paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
      }
      else {
        paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
        let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
        paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
      }
    }
    else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
    }

    resolve(paymentDataRequestUpdate);
  });
}

促銷代碼可讓商家根據提供的促銷代碼動態更新運送選項和交易資訊。

如要設定促銷代碼，請按照下列步驟操作：

在 PaymentOptions 中註冊 onPaymentDataChanged 回呼。
使用回呼意圖呼叫 loadPaymentData() 函式。詳情請參閱相應的範例。
導入 onPaymentDataChanged callback function。

註冊優惠回呼

下列程式碼範例說明，您必須在 PaymentsClient paymentOptions 物件中註冊回呼函式，才能使用促銷代碼。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentDataChanged: onPaymentDataChanged
  }
}

使用回呼意圖載入付款資料

下列程式碼範例說明，您必須使用 OFFER 回呼意圖來初始化付款畫面：

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["OFFER"];

處理 onPaymentDataChanged 回呼

系統會使用 IntermediatePaymentData 物件叫用 onPaymentDataChanged 回呼，當中包含使用者在付款畫面中選取的運送地址和運送選項。

回呼必須傳回 Promise<PaymentDataRequestUpdate>。PaymentDataRequestUpdate 物件會包含新的交易資訊、運送選項、優惠資料和付款資料錯誤。系統會使用這項資料更新付款畫面。

您可以直接在付款畫面中處理任何例外狀況，例如無效的促銷代碼。設定 PaymentDataError 物件即可凸顯錯誤訊息中的錯誤原因，方便使用者查看。不過，請記得將相關意圖加入訊息中。如要進一步瞭解設定物件和訊息的方式，請參閱下列程式碼範例，這個範例參照的物件 (validPromoCodes) 包含促銷代碼值：

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let redemptionCodes = [];
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};
    paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo();

    // ensure that promo codes set is unique
    if(typeof intermediatePaymentData.offerData != 'undefined') {
      // convert to set then back to array
      redemptionCodes = Array.from(
        new Set(intermediatePaymentData.offerData.redemptionCodes)
      );
    }

    // OPTIONAL: ensure that the newest promo code is the only one applied
    // redemptionCodes = new Array(redemptionCodes[redemptionCodes.length -1]);

    // validate promo codes and add descriptions to payment sheet
    if (intermediatePaymentData.callbackTrigger === 'OFFER') {
      paymentDataRequestUpdate.newOfferInfo = {};
      paymentDataRequestUpdate.newOfferInfo.offers = [];
      for (redemptionCode of redemptionCodes) {
        if (validPromoCodes[redemptionCode]) {
          paymentDataRequestUpdate = validPromoCodes[redemptionCode].function(
            validPromoCodes[redemptionCode],
            paymentDataRequestUpdate
          );
        } else {
          paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode);
        }
      }
    }

完整的實作範例

本節提供的程式碼區塊範例顯示 Google Pay API JavaScript 程式庫教學課程、授權付款功能、動態價格更新功能以及促銷代碼的完整端對端範例。

教學課程

<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
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: '12345678901234567890',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
  }
  return paymentsClient;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
    countryCode: 'US',
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    // set to cart total
    totalPrice: '1.00'
  };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}
/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
  // show returned data in developer console for debugging
    console.log(paymentData);
  // @todo pass payment token to your gateway to process payment
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>

授權付款

<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
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: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
    	environment: 'TEST',
      paymentDataCallbacks: {
      	onPaymentAuthorized: onPaymentAuthorized
      }
    });
  }
  return paymentsClient;
}

/**
 * Handles authorize payments callback intents.
 *
 * @param {object} paymentData response from Google Pay API after a payer approves payment through user gesture.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentAuthorizationResult}
 * @returns Promise<{object}> Promise of PaymentAuthorizationResult object to acknowledge the payment authorization status.
 */
function onPaymentAuthorized(paymentData) {
	return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
      resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
  	});
  });
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: "Subtotal",
          type: "SUBTOTAL",
          price: "11.00",
        },
      {
          label: "Tax",
          type: "TAX",
          price: "1.00",
        }
    ],
    countryCode: 'US',
    currencyCode: "USD",
    totalPriceStatus: "FINAL",
    totalPrice: "12.00",
    totalPriceLabel: "Total"
  };
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest);
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
	return new Promise(function(resolve, reject) {
  	setTimeout(function() {
  		// @todo pass payment token to your gateway to process payment
  		paymentToken = paymentData.paymentMethodData.tokenizationData.token;

    	resolve({});
    }, 3000);
  });
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>

動態價格更新

<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
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: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];
  paymentDataRequest.shippingAddressRequired = true;
  paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
  paymentDataRequest.shippingOptionRequired = true;

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: "TEST",
      merchantInfo: {
        merchantName: "Example Merchant",
        merchantId: "01234567890123456789"
      },
      paymentDataCallbacks: {
      	onPaymentAuthorized: onPaymentAuthorized,
        onPaymentDataChanged: onPaymentDataChanged
      }
    });
  }
  return paymentsClient;
}

function onPaymentAuthorized(paymentData) {
	return new Promise(function(resolve, reject){

  // handle the response
  processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
    	resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
    });

  });
}

/**
 * Handles dynamic buy flow shipping address and shipping options callback intents.
 *
 * @param {object} itermediatePaymentData response from Google Pay API a shipping address or shipping option is selected in the payment sheet.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet.
 */
function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

   	let shippingAddress = intermediatePaymentData.shippingAddress;
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};

    if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
      if(shippingAddress.administrativeArea == "NJ")  {
        paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
      }
      else {
        paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
        let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
        paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
      }
    }
    else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
    }

    resolve(paymentDataRequestUpdate);
  });
}

/**
 * Helper function to create a new TransactionInfo object.

 * @param string shippingOptionId respresenting the selected shipping option in the payment sheet.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function calculateNewTransactionInfo(shippingOptionId) {
        let newTransactionInfo = getGoogleTransactionInfo();

  let shippingCost = getShippingCosts()[shippingOptionId];
  newTransactionInfo.displayItems.push({
    type: "LINE_ITEM",
    label: "Shipping cost",
    price: shippingCost,
    status: "FINAL"
  });

  let totalPrice = 0.00;
  newTransactionInfo.displayItems.forEach(displayItem => totalPrice += parseFloat(displayItem.price));
  newTransactionInfo.totalPrice = totalPrice.toString();

  return newTransactionInfo;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: "Subtotal",
          type: "SUBTOTAL",
          price: "11.00",
        },
      {
          label: "Tax",
          type: "TAX",
          price: "1.00",
        }
    ],
    countryCode: 'US',
    currencyCode: "USD",
    totalPriceStatus: "FINAL",
    totalPrice: "12.00",
    totalPriceLabel: "Total"
  };
}

/**
 * Provide a key value store for shippping options.
 */
function getShippingCosts() {
        return {
    "shipping-001": "0.00",
    "shipping-002": "1.99",
    "shipping-003": "10.00"
  }
}

/**
 * Provide Google Pay API with shipping address parameters when using dynamic buy flow.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters}
 * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest
 */
function getGoogleShippingAddressParameters() {
        return  {
        allowedCountryCodes: ['US'],
    phoneNumberRequired: true
  };
}

/**
 * Provide Google Pay API with shipping options and a default selected shipping option.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters|ShippingOptionParameters}
 * @returns {object} shipping option parameters, suitable for use as shippingOptionParameters property of PaymentDataRequest
 */
function getGoogleDefaultShippingOptions() {
        return {
      defaultSelectedOptionId: "shipping-001",
      shippingOptions: [
        {
          "id": "shipping-001",
          "label": "Free: Standard 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": "$10: Express shipping",
          "description": "Express shipping delivered in 1 business day."
        },
      ]
  };
}

/**
 * Provide Google Pay API with a payment data error.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError}
 * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate
 */
function getGoogleUnserviceableAddressError() {
        return {
    reason: "SHIPPING_ADDRESS_UNSERVICEABLE",
    message: "Cannot ship to the selected address",
    intent: "SHIPPING_ADDRESS"
        };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest);
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
	return new Promise(function(resolve, reject) {
  	setTimeout(function() {
    	// show returned data in developer console for debugging
   	 console.log(paymentData);
  		// @todo pass payment token to your gateway to process payment
  		paymentToken = paymentData.paymentMethodData.tokenizationData.token;

    	resolve({});
    }, 3000);
  });
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>

優惠

<div id="container"></div>

<script>
/**
 * Please note: The Promo Code callback is extremely flexible. This example
 * implementation is only one of many ways to interface with it.
 *
 * In production, your promo codes and payment logic should be securely
 * processed on your server, not client-side as in this example. Use AJAX to
 * pass this information to the payment sheet.
 */

/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Define valid promo code strings
 *
 * This object paradigm is not necessary to implement Promo Codes, but provides
 * an example of how to implement promo code behavior in a modular way.
 *
 * In production, your promo codes should be securely processed on your server,
 * not client-side as in this example.
 *
 * code: the way the promo code itself is displayed in the payment sheet
 * description: the description provided to the user on the payment sheet
 * function: the function used to calculate the price change
 * value: the value passed into the above function. This value should be
 * negative for a discount.
 */

const validPromoCodes = {
  SOMEPROMOCODE: {
    code: 'SOMEPROMOCODE',
    description: '20% off all products!',
    function: percentageDiscount,
    value: -20 // value should be negative for a discount
  },
  ANOTHERPROMOCODE: {
    code: 'ANOTHERPROMOCODE',
    description: '$5 dollars off!',
    function: staticDiscount,
    value: -5.00 // value should be negative for a discount
  }
}

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
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: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ['OFFER'];
  paymentDataRequest.shippingAddressRequired = false;
  paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo: {
        merchantName: 'Example Merchant',
        merchantId: '01234567890123456789'
      },
      paymentDataCallbacks: {
        onPaymentDataChanged: onPaymentDataChanged
      }
    });
  }
  return paymentsClient;
}

/**
 * These functions handle adding valid promo codes to the payment sheet
 * as well as adjusting the display items to match.
 *
 * To add a new promo code, create a new function per this template
 * and define it as valid in the onPaymentDataChanged function.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @param {string} redemptionCode string representing the promo code to apply
 * @param {string} description string representing the description to show
 * @param {int} discountPercentage int representing the percentage to discount.
 * Please note the discount value should be negative. Ex: -20 = 20% discount.
 * @param {object} PaymentDataRequestUpdate object representing
 * the current state of the payment data request.
 * @returns {object} PaymentDataRequestUpdate object to update the
 * payment sheet with new transaction info and offer data.
 */

function percentageDiscount(promoParameters, paymentDataRequestUpdate) {
  // set variables
  let originalTransactionInfo = getGoogleTransactionInfo();
  /* because this promo code calculates a % of original prices,
   * we need to get the original transaction info */
  let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo;
  let discount = 0;

    // update promo code and description
  paymentDataRequestUpdate.newOfferInfo.offers.push({
    redemptionCode: promoParameters['code'],
    description: promoParameters['description']
  });

  // calculate discount (from original transaction items only)
  originalTransactionInfo.displayItems.forEach(function(displayItem) {
    discount += parseFloat(displayItem.price) * promoParameters['value'] * 0.01;
  });

  // add displayItem with new discount
  newTransactionInfo.displayItems.push({
      label: promoParameters['code'],
      price: discount.toFixed(2),
      type: 'LINE_ITEM'
  });

  return paymentDataRequestUpdate;
}

function staticDiscount(promoParameters, paymentDataRequestUpdate) {
  // set variables
  let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo;

    // update promo code and description
  paymentDataRequestUpdate.newOfferInfo.offers.push({
    redemptionCode: promoParameters['code'],
    description: promoParameters['description']
  });

  // add displayItem with new discount
  newTransactionInfo.displayItems.push({
      label: promoParameters['code'],
      price: promoParameters['value'].toFixed(2),
      type: 'LINE_ITEM'
  });

  return paymentDataRequestUpdate;
}

/**
 * Handles offer callback intents.
 *
 * @param {object} itermediatePaymentData response from Google Pay API when a promo code is entered in the google pay payment sheet.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet with new transaction info and offer data.
 */
function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let redemptionCodes = new Set();
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};
    paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo();

    // ensure that promo codes set is unique
    if(typeof intermediatePaymentData.offerData != 'undefined') {
      redemptionCodes = new Set(intermediatePaymentData.offerData.redemptionCodes);
    }

    // validate promo codes and add descriptions to payment sheet
    if (intermediatePaymentData.callbackTrigger === 'OFFER') {
      paymentDataRequestUpdate.newOfferInfo = {};
      paymentDataRequestUpdate.newOfferInfo.offers = [];
      for (redemptionCode of redemptionCodes) {
        if (validPromoCodes[redemptionCode]) {
          paymentDataRequestUpdate = validPromoCodes[redemptionCode].function(
            validPromoCodes[redemptionCode],
            paymentDataRequestUpdate
          );
        } else {
          paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode);
        }
      }
    }
    /**
     * Update item costs and total.
     *
     * In production, this final calculation should always be calculated
     * server-side to ensure it matches the price that the merchant sends to the
     * processor.
     */
    paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(
      paymentDataRequestUpdate.newTransactionInfo
    )

    resolve(paymentDataRequestUpdate);
  });
}

/**
 * Helper function to update the TransactionInfo object.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @param {object} transactionInfo respresenting the selected shipping option in the payment sheet.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function calculateNewTransactionInfo(newTransactionInfo) {
  // calculate the new totalPrice from display items
  let totalPrice = 0.00;
  newTransactionInfo.displayItems.forEach(
    function(displayItem) {
      totalPrice += parseFloat(displayItem.price);
    }
  );
  // Note: newTransactionInfo.totalPrice must be a string
  newTransactionInfo.totalPrice = totalPrice.toFixed(2);

  return newTransactionInfo;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: '11.00',
          status: 'FINAL'
        },
        {
          label: 'Tax',
          type: 'TAX',
          price: '1.00'
        }
    ],
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '12.00',
    totalPriceLabel: 'Total'
  };
}

/**
 * Provide Google Pay API with shipping address parameters.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters}
 * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest
 */
function getGoogleShippingAddressParameters() {
        return  {
        allowedCountryCodes: ['US', 'UK', 'FR', 'CA', 'MX', 'GA'],
    phoneNumberRequired: false
  };
}

/**
 * Provide Google Pay API with an invalid offer error.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError}
 * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate
 */
function getGoogleOfferInvalidError(redemptionCode) {
        return {
    reason: 'OFFER_INVALID',
    message: redemptionCode + ' is not a valid promo code.',
    intent: 'OFFER'
        };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Process payment data returned by the Google Pay API
 * In a production environment, this function should always be implemented
 * server-side.
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
  // show returned data in developer console for debugging
    console.log(paymentData);
  // @todo pass payment token to your gateway to process payment
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>

教學課程

步驟 1：定義 Google Pay API 版本

步驟 2：為付款服務供應商申請付款權杖

步驟 3：定義支援的付款卡發卡機構

步驟 4：說明允許的付款方式

步驟 5：載入 Google Pay API JavaScript 程式庫

步驟 6：判斷是否準備好使用 Google Pay API 付款

步驟 7：新增 Google Pay 付款按鈕

步驟 8：建立 PaymentDataRequest 物件

步驟 9：註冊使用者手勢的事件處理常式

步驟 10 (選擇性步驟)：在使用者進行互動前預先擷取付款資料

步驟 11 (選擇性步驟)：設定授權付款功能

註冊 onPaymentAuthorized 回呼

使用回呼意圖載入付款資料

處理 onPaymentAuthorized 回呼

步驟 12 (啟用運送選項時的選擇性步驟)：設定動態價格更新功能

註冊 PaymentData 回呼

使用回呼意圖載入付款資料

處理 onPaymentDataChanged 回呼

步驟 13 (促銷代碼的選用步驟)：設定促銷代碼

註冊優惠回呼

使用回呼意圖載入付款資料

處理 onPaymentDataChanged 回呼

完整的實作範例

教學課程

授權付款

動態價格更新

優惠