教程

按照本教程中的步骤将 Web 应用与 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`" 开发者文档
结算系统	"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`" 开发者文档
BT Pay	"gateway": "btpay" "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`" 开发者文档
Cathay United Bank	"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`" 开发者文档
CTBC Bank	"gateway": "ctbcbank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
CURO Payments	"gateway": "curopayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
CYBERBIZ	"gateway": "cyberbizpay" "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`" 开发者文档
GBPayments	"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`" 没有开发者文档
全球付款	"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`" 开发者文档
Life Pay	"gateway": "lifepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
Limepay	"gateway": "limepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
Linkly	"gateway": "linkly" "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`" 开发者文档
Mandarin	"gateway": "mandarin" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
Market Pay	"gateway": "marketpay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
Mastercard Payment Gateway Services	"gateway": "mpgs" "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`" 开发者文档
Newebpay（原名 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`" 开发者文档
Nexi Relay	"gateway": "nexirelay" "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`" 开发者文档
OrkestaPay	"gateway": "orkestapay" "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`" 开发者文档
PayEase	"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`" 开发者文档
Paysoft	"gateway": "paysoft" "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`" 开发者文档
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`" 开发者文档
星球	"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`" 开发者文档
Preczn	"gateway": "preczn" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 开发者文档
PrimePay	"gateway": "primepay" "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`" 开发者文档
SEBES Technology	"gateway": "sebes" "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`" 开发者文档
Suntech	"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 (Cherri Tech)	"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`" 开发者文档
Zalopay	"gateway": "zalopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_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) 和/或在 Android 设备上以 3D 安全密文进行身份验证的设备令牌 (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 步：为用户手势注册事件处理程序

要为用户手势注册事件处理程序，请完成以下步骤：

为购买按钮注册 Click 事件处理程序。该事件处理程序会在与 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 步（可选）：在用户互动之前预取付款数据

要缩短执行时间，请先从 Google Pay API 预取您网站的付款配置，然后再调用 loadPaymentData()。请参阅以下示例：

paymentsClient.prefetchPaymentData(paymentDataRequest);

第 11 步（可选）：设置授权付款

“授权付款”用于启动付款流程并确认付款的授权状态。要设置授权付款，请按以下步骤操作：

在 PaymentOptions 中注册 onPaymentAuthorized() 回调。
使用 PAYMENT_AUTHORIZATION 回调 Intent 时，可调用 loadPaymentData() 函数。
实现 onPaymentAuthorized()。

注册 onPaymentAuthorized 回调

以下代码示例演示了如何注册 onPaymentAuthorized 回调：

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

使用回调 intent 加载付款数据

以下代码示例演示了如何使用“授权付款”来初始化付款表格：

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 回调。
使用回调 Intent 调用 loadPaymentData() 函数。如需了解详情，请参阅相应的示例。
实现 onPaymentAuthorized 和 onPaymentDataChanged。

注册 PaymentData 回调

以下代码示例显示动态价格更新需要在 PaymentsClient paymentOptions 对象中注册回调函数。

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

使用回调 intent 加载付款数据

以下代码示例演示了如何使用所需的送货地址和运费选项配置来初始化付款表格：

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 回调

onPaymentDataChanged 回调是使用 IntermediatePaymentData 对象调用的，该对象中包含在付款表格中选择的送货地址和运费选项。

该回调返回一个 Promise<PaymentDataRequestUpdate> 值。PaymentDataRequestUpdate 对象包含新的交易信息、运费选项和付款数据错误，这些数据用于更新付款表格。

直接在付款表格中处理所有例外情况，例如无用的送货地址或无效的运费选项。设置 PaymentDataError 对象以突出显示错误原因，并向用户显示错误消息。请务必在消息中添加相关 intent。如需详细了解如何设置对象和消息，请参阅以下代码示例：

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 回调。
使用回调 Intent 调用 loadPaymentData() 函数。如需了解详情，请参阅相应的示例。
实现 onPaymentDataChanged callback function。

注册 Offer 回调

以下代码示例显示促销代码需要在 PaymentsClient paymentOptions 对象中注册回调函数。

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

使用回调 intent 加载付款数据

以下代码示例演示了如何使用 OFFER 回调 Intent 来初始化付款表格：

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

paymentDataRequest.callbackIntents = ["OFFER"];

处理 onPaymentDataChanged 回调

onPaymentDataChanged 回调是使用 IntermediatePaymentData 对象调用的，该对象中包含在付款表格中选择的送货地址和运费选项。

该回调必须返回 Promise<PaymentDataRequestUpdate>。PaymentDataRequestUpdate 对象包含新的交易信息、运费选项、优惠数据和付款数据错误。这些数据用于更新付款表格。

直接在付款表格中处理任何例外情况，如促销代码无效。设置 PaymentDataError 对象以突出显示错误原因，并向用户显示错误消息。请务必在消息中添加相关 intent。如需详细了解如何设置对象和消息，请参阅以下代码示例，该示例引用的对象 (validPromotionCode) 包含促销代码值：

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 回调

使用回调 intent 加载付款数据

处理 onPaymentAuthorized 回调

第 12 步（启用运费时为可选）：设置动态价格更新

注册 PaymentData 回调

使用回调 intent 加载付款数据

处理 onPaymentDataChanged 回调

第 13 步（对于促销代码，为可选步骤）：设置促销代码

注册 Offer 回调

使用回调 intent 加载付款数据

处理 onPaymentDataChanged 回调

总结

教程

授权付款

动态价格更新

优惠