Tutorial

Follow the steps in this tutorial to integrate a web application with the Google Pay API, and to configure it to accept payment cards.

Step 1: Define your Google Pay API version .
Step 2: Choose a payment tokenization method .
Step 3: Define supported payment card networks .
Step 4: Describe your allowed payment methods.
Step 5: Load the Google Pay API JavaScript library .
Step 6: Determine readiness to pay with the Google Pay API .
Step 7: Add a Google Pay payment button .
Step 8: Create a PaymentDataRequest object .
Step 9: Register an event handler for user gestures .
Step 10 (optional): Set up Authorize Payments .
Step 11 (optional for shipping enabled): Set up Dynamic Price Updates .
Step 12 (optional for promo codes): Set up Promo Codes .
Put it all together .

Note : See our live Google Pay demo .

Step 1: Define your Google Pay API version

Declare the version of the Google Pay API that your site uses. The major and minor versions are required in the fields of each passed object, and are included in the response.

The following code sample shows declared API versions:

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

Step 2: Request a payment token for your payment provider

Google encrypts information about a payer's selected card for secure processing by a payment provider.

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

Replace example and exampleGatewayMerchantId with the appropriate values for your payment provider. Use the following table to find the specific gateway and gatewayMerchantId values for your payment provider:

Gateway	Parameters and documents
ABA PayWay	"gateway": "ababank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
accept.blue	"gateway": "acceptblue" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ACI	"gateway": "aciworldwide" "gatewayMerchantId": " `YOUR_ENTITY_ID` " Developer docs
ACpay	"gateway": "acpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Acquired.com	"gateway": "acquired" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Adyen	"gateway": "adyen" "gatewayMerchantId": " `YOUR_MERCHANT_ACCOUNT_NAME` " Developer docs
Airba Pay	"gateway": "airbapay"" "gatewayMerchantId": " `YOUR_MERCHANT_ACCOUNT_NAME` " Developer docs
Airvend	"gateway": "airvend" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Airwallex	"gateway": "airwallex" "gatewayMerchantId": " `YOUR_MERCHANT_ACCOUNT_NAME` " Developer docs
Akurateco	"gateway": "akuratecolab" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Alfa-Bank	"gateway": "alfabank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Algoritma	"gateway": "algoritma" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Allinpay	"gateway": "allinpayintl" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
AllPayments	"gateway": "allpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
alticepay	"gateway": "alticepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
AMO FINTECH LLC	"gateway": "amofintech" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Anedot	"gateway": "anedot" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ApcoPay	"gateway": "apcopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
APPEX	"gateway": "epos" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
AsiaBill	"gateway": "asiabill" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Assist	"gateway": "assist" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Assist Belarus	"gateway": "belassist" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Assist Kazakhstan	"gateway": "assistkz" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Aurus	"gateway": "auruspay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Authorize.net	"gateway": "authorizenet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Axerve	"gateway": "gestpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
azericardgpay	"gateway": "azericardgpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bank 131	"gateway": "bank131" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bank Vostok	"gateway": "bankvostok" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Barclaycard	"gateway": "barclayssmartpayadvance" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Barion	"gateway": "barion" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Basis Theory	"gateway": "basistheory" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BCC.KZ	"gateway": "bccpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
bePaid	"gateway": "ecomcharge" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bereke Bank	"gateway": "berekepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Billing Systems	"gateway": "billingsystems" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
bisys.kz	"gateway": "bisysgpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bizzon	"gateway": "bizzon" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Blocks	"gateway": "blocks" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bluefin	"gateway": "bluefin" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Bluefin Europe	"gateway": "bluefineurope" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Blue Media	"gateway": "bluemedia" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BlueSnap	"gateway": "bluesnap" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BORICA	"gateway": "borica" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BPC	"gateway": "bpcpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BR-DGE	"gateway": "comcarde" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Braintree	"gateway": "braintree" "braintree:apiVersion": "v1" "braintree:sdkVersion": "braintree.client. `VERSION` " "braintree:merchantId": " `YOUR_BRAINTREE_MERCHANT_ID` " "braintree:clientKey": " `YOUR_BRAINTREE_TOKENIZATION_KEY` " Developer docs
Braspag	"gateway": "cielo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BridgerPay	"gateway": "bridgerpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
BT Pay	"gateway": "btpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Buya	"gateway": "buya" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CardCom	"gateway": "cardcom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CardConnect	"gateway": "cardconnect" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cardknox	"gateway": "cardknox" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
cardlink	"gateway": "cardlink" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cardstream	"gateway": "crst" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cashflows	"gateway": "cashflowsgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cathay United Bank	"gateway": "cathaybk" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CCAvenue UAE	"gateway": "ccavenueuae" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CCV	"gateway": "ccv" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cecabank	"gateway": "cecabank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Celerispay	"gateway": "celerispay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CentralPay	"gateway": "centralpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Chargehive	"gateway": "chargehive" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CharityEngine	"gateway": "charityengine" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Chase Merchant Services	"gateway": "chase" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Checkout.com	"gateway": "checkoutltd" "gatewayMerchantId": " `YOUR_PUBLIC_KEY` " Developer docs
CityPay	"gateway": "citypay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cloud9 Payment Gateway (C9PG)	"gateway": "c9pg" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CloudPayments	"gateway": "cloudpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CloudWalk	"gateway": "cloudwalk" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Computop	"gateway": "computop" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ConcordPay	"gateway": "concordpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Connectum	"gateway": "connectum" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ConnexPay	"gateway": "connexpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CoralPay	"gateway": "coralpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Corefy	"gateway": "paycoreio" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Corvus Pay	"gateway": "corvuspay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Credorax	"gateway": "credorax" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CrossPay	"gateway": "crosspay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cross Switch	"gateway": "crossswitch" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CSG Forte	"gateway": "csgforte" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CTBC Bank	"gateway": "ctbcbank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CURO Payments	"gateway": "curopayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
CYBERBIZ	"gateway": "cyberbizpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Cybersource	"gateway": "cybersource" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
danube.pay	"gateway": "danubepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Datacap Systems, Inc.	"gateway": "datatrans" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Datatrans	"gateway": "datatrans" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
DECTA	"gateway": "decta" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs
Dejavoo	"gateway": "denovosystempay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
DEUNA	"gateway": "deuna" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Deutsche Bank AG	"gateway": "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs
Deutsche Bank – Merchant Solutions	"gateway": "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
DG Financial Technology, Inc.	"gateway": "veritrans" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Digital Finance	"gateway": "digitalfinance" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
dLocal	"gateway": "dlocal" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
DNA Payments	"gateway": "dnapayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Dojo	"gateway": "dojo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Dotpay	"gateway": "dotpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
e-SiTef - Software Express	"gateway": "softwareexpress" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
easycard	"gateway": "easycard" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EasyPay	"gateway": "easypay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Easypay EU	"gateway": "easypaypt" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EBANX	"gateway": "ebanx" "gatewayMerchantId": " `YOUR_PUBLIC_INTEGRATION_KEY` " Developer docs
eCard	"gateway": "ecard" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ECOMMPAY	"gateway": "ecommpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Ecopaynet	"gateway": "ecopaynet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ECPay	"gateway": "ecpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
eftcorporation	"gateway": "eftcorporation" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
eGHL	"gateway": "eghl" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Elavon (Converge)	"gateway": "convergepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Emerchantpay	"gateway": "emerchantpay" "gatewayMerchantID": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
emspay	"gateway": "emsonline" "gatewayMerchantID": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Encoded	"gateway": "encoded" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
epay	"gateway": "epay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EPAYJSC	"gateway": "epayjsc" "gatewayMerchantID": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EpicPay	"gateway": "epicpay" "gatewayMerchantID": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Espago	"gateway": "espago" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Etisalat	"gateway": "etisalatpaymentgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
EveryPay S.A.	"gateway": "EveryPay S.A." "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Evervault	"gateway": "evervault" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EVONET	"gateway": "cardinfolink" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
EVOPAY	"gateway": "EVOPAY" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Evo Payment Gateway	"gateway": "evopaymentgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
exactly.com	"gateway": "exactly" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Exact Payments	"gateway": "exactpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fat Zebra	"gateway": "fatzebra" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fenige	"gateway": "fenige" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fexco payUnite	"gateway": "fexco" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fibonatix	"gateway": "fibonatixparagon" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Financial Line	"gateway": "finline" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Finanso UA	"gateway": "finansoua" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
fincode byGMO	"gateway": "fincode" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
FINEXUS	"gateway": "finexus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Finix	"gateway": "finix" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
First American by Deluxe	"gateway": "firstpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
FIS Biller Solutions	"gateway": "fisglobalbsp" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fiserv	"gateway": "fiserv" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fiserv	"gateway": "fiservipg" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Flitt	"gateway": "flitt" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fluid Pay	"gateway": "fluidpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
FM Finance LTD	"gateway": "fmfinanceltd" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ForteBank	"gateway": "fortebank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fractal	"gateway": "fractal" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Freedom Finance Bank	"gateway": "axayscom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
FreedomPay	"gateway": "freedompay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
FreedomPay.Money	"gateway": "payboxmoney" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Freepay	"gateway": "freepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Frontstream	"gateway": "frontstreampayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Fung Payments	"gateway": "fungpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GBPayments	"gateway": "gbpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
geidea	"gateway": "geidea" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GETTRX	"gateway": "globalelectronictechnology" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Global One Pay	"gateway": "globalonepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Global Payments	"gateway": "globalpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
globalpaymentsinc	"gateway": "globalpaymentsinc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GMO Payment Gateway	"gateway": "gmopg" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GoDaddy Payments	"gateway": "godaddypayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Good Idea Technologies	"gateway": "git" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GoPay	"gateway": "gopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
GP Webpay	"gateway": "gpwebpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Gravity Payments	"gateway": "gravitypayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Gr4vy	"gateway": "gr4vy" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Halyk Bank	"gateway": "halykbank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Helcim	"gateway": "helcim" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
HIPS	"gateway": "hips" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
HiTrust	"gateway": "hitrustpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Hyp	"gateway": "hyp" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
icard	"gateway": "icardwallet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
iKhokha	"gateway": "ikhokha" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
IMOJE	"gateway": "imoje" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Impaya	"gateway": "impayarus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Inovio Payments	"gateway": "inoviopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
InPlat	"gateway": "inplat" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
InstaMed	"gateway": "instamed" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
IntaSend Solutions Limited	"gateway": "intasend" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
IntellectMoney	"gateway": "intellectmoney" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Interactive Transaction Solutions	"gateway": "interactivets" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Interswitch Payment Gallery	"gateway": "interswitch" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Intervale	"gateway": "intervale" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ioka fintech	"gateway": "ioka" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
iPay88	"gateway": "ipay88" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
IPSI	"gateway": "ipsi" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
iQmetrix	"gateway": "iqmetrixpaymentservicesgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
IXOPAY	"gateway": "ixopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
JetPay	"gateway": "jetpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
JudoPay	"gateway": "judopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
KapitalBank	"gateway": "eCommerceKapitalBank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Kassa	"gateway": "kassacom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
kassa24pay	"gateway": "kassa24pay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Kineox	"gateway": "kineox" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Klix by Citadele	"gateway": "klix" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Koin	"gateway": "koin" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Lapsa Payments	"gateway": "lapsapayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
LHV Pank	"gateway": "lhvpank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Liberty	"gateway": "liberty" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Life Pay	"gateway": "lifepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Limepay	"gateway": "limepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Linkly	"gateway": "linkly" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
LiqPay	"gateway": "liqpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Littlepay	"gateway": "littlepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
LogPay	"gateway": "logpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Loyale	"gateway": "loyale" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
lynck	"gateway": "lynck" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Lyra	"gateway": "lyra" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Magnetiq Bank	"gateway": "magnetiq" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
maib	"gateway": "maibecomm" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MakeCommerce (Maksekeskus)	"gateway": "maksekeskus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Maksu GMBH	"gateway": "maksupayeu" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Mandarin	"gateway": "mandarin" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Market Pay	"gateway": "marketpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Mastercard Payment Gateway Services	"gateway": "mpgs" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MerchantE	"gateway": "merchante" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Midtrans	"gateway": "midtrans" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Merchant Warrior	"gateway": "merchantwarrior" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Minsait Payments Systems	"gateway": "minsaitpaymentsgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MITEC	"gateway": "mitecmx" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MIXPLAT	"gateway": "mixplat" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MOBI.Money	"gateway": "mobimoney" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Modulbank	"gateway": "modulbank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Mollie	"gateway": "mollie" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Molpay	"gateway": "molpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Mondido	"gateway": "mondido" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Monei	"gateway": "monei" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
monek	"gateway": "monek" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Moneris	"gateway": "moneris" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Moneta	"gateway": "moneta" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Monext	"gateway": "monext" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Money.Mail.Ru	"gateway": "moneymailru" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
monripayments	"gateway": "monripayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Moov	"gateway": "moov" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MPay	"gateway": "managepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
mstartipg	"gateway": "mstartipg" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Multicarta	"gateway": "mulitcarta" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MultiSafepay	"gateway": "multisafepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Mundipagg	"gateway": "mundipagg" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MyCheck	"gateway": "mycheck" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MyChoice2Pay	"gateway" : "mychoice2pay" "gatewayMerchantId" : " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MyFatoorah	"gateway": "myfatoorah" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
MyPay	"gateway": "mypay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
myPOS	"gateway": "mypos" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
N&TS Group	"gateway": "netsgroup" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
NCCC	"gateway": "nccc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Neolink	"gateway": "neolinkprocessing" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Neon Pay	"gateway": "neonpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Netopia	"gateway": "netopia" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Netvalve	"gateway": "netvalve" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Network International	"gateway": "networkintl" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Newebpay (formerly STPath, Pay2Go)	"gateway": "newebpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Newtech	"gateway": "newtechmobile" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Nexi	"gateway": "nexi" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Nexi Easy	"gateway": "easy" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
NMI	"gateway": "gatewayservices" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
noon payments	"gateway": "noonpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Noqoody Pay	"gateway": "noqoodypay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Novalnet	"gateway": "novalnet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Nexi Relay	"gateway": "nexirelay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
NTT DATA	"gateway": "nttdatahk" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Nuvei	"gateway": "nuvei" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Oceanpayment	"gateway": "oceanpayment" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Omise	"gateway": "omise" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Omno	"gateway": "omno" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
One Inc	"gateway": "oneinc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Onelya	"gateway": "onelya" "gatewayMerchantId": " `YOUR_GATWAY_MERCHANT_ID` " Developer docs
Onerway	"gateway": "ronghan" "gatewayMerchantId": " `YOUR_GATWAY_MERCHANT_ID` " Developer docs
OneVision Limited	"gateway": "onevision" "gatewayMerchantId": " `YOUR_GATWAY_MERCHANT_ID` " Developer docs
OnPay	"gateway": "onpayio" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Opayo by Elavon	"gateway": "opayoelavon" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
OrkestaPay	"gateway": "orkestapay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Oschadbank	"gateway": "oschadbank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
pagarme	"gateway": "pagarme" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PagBank	"gateway": "pagbank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PagBrasil	"gateway": "pagbrasil" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PagSeguro	"gateway": "pagsegurointernational" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PAY2M	"gateway": "pay2m" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payarc	"gateway": "payarc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pay.com	"gateway": "paycom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PAYCOMET	"gateway": "paycomet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paydock	"gateway": "paydock" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayEase	"gateway": "payeasenet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayEngine	"gateway": "payengine" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayFabric	"gateway": "payfabric" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayFacto	"gateway": "payfacto" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
paygent	"gateway": "paygent" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payhub	"gateway": "payhub" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayKKa	"gateway": "paykkaeu" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayLane	"gateway": "paylane" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payler	"gateway": "payler" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayLink®	"gateway": "paylink" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payload	"gateway" : "payload" "gatewayMerchantId" : " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymark	"gateway": "paymark" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayMaster	"gateway": "paymaster" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payment Fusion	"gateway": "paymentfusion" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymentvision	"gateway": "paymentvision" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymentwall	"gateway": "paymentwall" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymo	"gateway": "paymo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymob	"gateway": "gpaymob" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paymtech	"gateway": "paymtech" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayNearMe	"gateway": "paynearme" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payneteasy	"gateway": "payneteasy" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pay.nl	"gateway": "paynl" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paynopain	"gateway": "paynopain" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayOne	"gateway": "payone" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayOnline	"gateway": "payonline" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payoo	"gateway": "payoo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayPlus	"gateway": "payplus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayPro Pvt Ltd	"gateway": "paypro" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Payrails	"gateway": "payrails" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payrexx	"gateway": "payrexx" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayRiff	"gateway": "payriff" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payrix	"gateway": "payrix" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paysafe	"gateway": "paysafe" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payscout	"gateway": "payscout" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paysend Business	"gateway": "paysend" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paysoft	"gateway": "paysoft" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pay360	"gateway": "pay360" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
paytech	"gateway": "paytechsolutions" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayTech Ukraine	"gateway": "paytech" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payten Payment Gateway	"gateway": "paytentr" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paythru	"gateway": "paythru" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payture	"gateway": "payture" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayU	"gateway": "payu" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayU LATAM	"gateway": "payulatam" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PAYUNi	"gateway": "payuni" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayU Romania	"gateway": "payuro" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PayU Russia	"gateway": "payuru" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payway	"gateway": "payway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Paywiser	"gateway": "paywiser" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Payzone Ireland	"gateway": "payzoneireland" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PBT Gateway Services Ltd	"gateway": "pbtgateway" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pelecard	"gateway": "pelecard" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pensopay	"gateway": "pensopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pikassa	"gateway": "pikassa" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PingPong	"gateway": "pingpongx" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pin Payments	"gateway": "pinpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Planet	"gateway": "cccpayment" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PlanetPay	"gateway": "itcardpaymentservice" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Plategka.com	"gateway": "plategkacom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Platon	"gateway": "platon" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Pomelo	"gateway": "pomelopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Portmone	"gateway": "portmonecom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Preczn	"gateway": "preczn" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PrimePay	"gateway": "primepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Primer	"gateway": "primer" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Procard	"gateway": "procard" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ProcessOut	"gateway": "processout" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Przelewy24	"gateway": "przelewy24" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PSCB	"gateway": "pscbru" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PSiGate Inc.	"gateway": "psigate" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
PXP Financial	"gateway": "pxpfinancial" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Qenta Payment CEE	"gateway": "qenta" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
QIWI	"gateway": "qiwi" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Qualpay	"gateway": "qualpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
QuickPay	"gateway": "quickpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Qvalent	"gateway": "qvalent" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Radial	"gateway": "radial" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Raiffeisen Processing Centre	"gateway": "raiffeisenprocessingcentre" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Rapyd	"gateway": "rapyd" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
RBK.money	"gateway": "rbkmoney" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Rebail Capital	"gateway": "rebailcapital" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Rebilly	"gateway": "Rebilly" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Recurly	"gateway": "recurly" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Reddot	"gateway": "reddotpayment" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Rede	"gateway": "rede" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Redsys	"gateway": "redsys" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Reepay	"gateway": "reepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
RocketGate	"gateway": "rocketgate" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Russian Standard Bank	"gateway": "rsb" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Ryft	"gateway": "ryft" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Saferpay	"gateway": "worldlinesaferpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Safexpay	"gateway": "safexpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Sberbank	"gateway": "sberbank" "gatewayMerchantId": " `YOUR_ORGANIZATION_NAME` " Developer docs
SEB Baltic	"gateway": "sebbaltic" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
SEBES Technology	"gateway": "sebes" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Sense Bank	"gateway": "sensebank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
SensePass	"gateway": "sensepass" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Servicios Digitales Popular S.A.	"gateway": "pagosazul" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Shift4	"gateway": "shift4payments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Shiji Group	"gateway": "shijipaymentsolutions" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
SH Start High	"gateway": "shstartpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
shvarenapay	"gateway" : "shvarenapay" "gatewayMerchantId" : " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
simbasoft	"gateway": "simbasoft" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Sipay	"gateway": "sipay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
SmartPay	"gateway": "smartpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Softbank Payment Service	"gateway": "sbps" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Softtouch POS and Payments	"gateway": "softtouch" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Solid	"gateway": "solid" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Sony Payment Services	"gateway": "sonypaymentservices" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Splitit	"gateway": "splitit" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Spreedly	"gateway": "spreedly" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Square	"gateway": "square" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
SredaPay	"gateway": "sredapay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Stancer	"gateway": "stancer" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Stripe	"gateway": "stripe" "stripe:version": "2018-10-31" "stripe:publishableKey": " `YOUR_PUBLIC_STRIPE_KEY` " Developer docs
SUMIT	"gateway": "sumit" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Suntech	"gateway": "esafe" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Surfboard Payments	"gateway": "surfboard" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Svea Bank	"gateway": "svea" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Swedbank Baltic	"gateway": "swedbankbaltic" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Swedbank Pay	"gateway": "payexswedbankpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TabaPay	"gateway": "tabapay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TapPay (Cherri Tech)	"gateway": "tappay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TapPayments	"gateway": "tappayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
tarlanpayments	"gateway": "tarlanpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TAS Link	"gateway": "taslink" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tatra banka (CardPay)	"gateway": "tatrabanka" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
TEKO	"gateway": "teko" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
theMAP	"gateway": "themap" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Till Payments	"gateway": "tillpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Time Project LLC	"gateway": "timeproject" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tinkoff	"gateway": "tinkoff" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TIPTOP PAY	"gateway": "tiptoppay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
TPay	"gateway": "tpaycom" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TPay.com	"gateway": "tpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Transact Campus	"gateway": "transactcampus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Transact Pro	"gateway": "transactpro" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Transaction Services Network	"gateway": "tns" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Transpayrent	"gateway": "transpayrent" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tranzila	"gateway": "tranzila" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tranzzo	"gateway": "tranzzo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tribe Payments	"gateway": "tribepayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Truevo	"gateway": "truevo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
TrustPay	"gateway": "trustpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Trust Payments	"gateway": "trustpayments" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Tuna	"gateway": "tuna" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
2can&ibox	"gateway": "twocan" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
UAPAY	"gateway": "uapay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
UBRR	"gateway": "ubrrpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Ukrcardpay	"gateway": "ukrcardpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
UkrGasBank Pay	"gateway": "ukrgasbankpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Unibank OJSC	"gateway": "unibankcheckout" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
unitedfinancialcorporation	"gateway": "unitedfinancialcorporation" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Uniteller	"gateway": "uniteller" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Unitpay	"gateway": "unitpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Unlimint	"gateway": "unlimint" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Unzer	"gateway": "unzer" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Unzer Austria	"gateway": "unzeraustria" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
UPC	"gateway": "upc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Upgate	"gateway": "upgate" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
USAePay	"gateway": "usaepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
UseePay	"gateway": "useepay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
USIO, Inc.	"gateway": "usio" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Valitor	"gateway": "valitor" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
value.io	"gateway": "inspirecommerce" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Vanco	"gateway": "vanco" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Vantiv	"gateway": "vantiv" "vantiv:merchantPayPageId": " `YOUR_PAY_PAGE_ID` " "vantiv:merchantOrderId": " `YOUR_ORDER_ID` " "vantiv:merchantTransactionId": " `YOUR_TRANSACTION_ID` " "vantiv:merchantReportGroup": "*web" Developer docs
Vayapay	"gateway": "vayapay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
Verestro	"gateway": "verestro" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Very Good Security	"gateway": "verygoodsecurity" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Victoriabank	"gateway": "victoriabank" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Vindicia	"gateway": "vindicia" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Viva Wallet	"gateway": "vivawallet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
VTEX	"gateway": "vtex" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Waffo	"gateway": "waffo" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Wallee	"gateway": "wallee" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Walletdoc	"gateway": "walletdoc" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Walletto	"gateway": "walletto" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WayForPay	"gateway": "wayforpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WEAT	"gateway": "weatpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WhenThen	"gateway": "whenthen" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Windcave	"gateway": "windcave" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Wirebank	"gateway" : "wirebank" "gatewayMerchantId" : " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Wirecard	"gateway" : "wirecard" "gatewayMerchantId" : " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WOOPPAY	"gateway": "wooppay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WooshPay	"gateway": "swooshtransfer" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldline (GlobalCollect)	"gateway": "globalcollect" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldline - Ingenico (WL Online Checkout)	"gateway": "worldlineingenicoogone" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldline Nordics (Worldline Online Checkout)	"gateway": "worldlineonlinecheckout" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldline Sips	"gateway": "wlsips" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldnet	"gateway": "worldnet" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Worldpay	"gateway": "worldpay" "gatewayMerchantId": " `YOUR_WORLDPAY_MERCHANT_ID` " Developer docs
Wpay	"gateway": "wpayaus" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
WSPay	"gateway": "wspay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
xMoney	"gateway": "xmoneypay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
XPATE	"gateway": "xpate" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
xpay	"gateway": "xpaycomua" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
YabandPay B.V.	"gateway": "yabandpay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
YIĞIM Payment System	"gateway": "yigim" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " No developer docs available
ЮKassa (YooKassa)	"gateway": "yoomoney" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Yuno	"gateway": "yuno" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Z-credit	"gateway": "zcredit" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Zalopay	"gateway": "zalopay" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
ZEN.com	"gateway": "zen" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Zest	"gateway": "zestpayment" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs
Zuora	"gateway": "zuora" "gatewayMerchantId": " `YOUR_GATEWAY_MERCHANT_ID` " Developer docs

Tip : example is a valid gateway name in the test environment. If you want to try out the API, you can leave the code sample above as-is. When you use the example gateway, your site doesn't receive card data capable of a transaction, but the user flow looks the same.

The PAYMENT_GATEWAY tokenization type is the most common merchant implementation of the card payment method in the Google Pay API. If your payment provider isn't supported, you might be able to accept Google Pay by a DIRECT integration. For more information, see the Direct tokenization documentation .

Step 3: Define supported payment card networks

Define the card networks accepted by your site. See the following code sample:

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

The Google Pay API might return cards on file on Google.com ( PAN_ONLY ) or a device token on an Android-powered device authenticated with a 3-D Secure cryptogram ( CRYPTOGRAM_3DS ). You can control whether both methods or just one of them can be returned.

Before you set allowedCardAuthMethods , confirm with your payment processor and acquirer on whether device tokens ( CRYPTOGRAM_3DS ) are supported in your region.

See the following code sample:

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

For more information, see CardParameters in our Object reference documentation. Also, check with your gateway or processor for the card networks that are supported, and for support for Android device tokens.

Important :

Make sure that you also apply your existing risk checks and controls for payment transactions to Google Pay transactions. Google Pay validation and fraud checks aren't intended to replace your risk management processes.
If you support PAN_ONLY , ensure that you trigger 3D Secure (step-up authentication) for Google Pay PAN PAN_ONLY transactions in the same way that you trigger 3D Secure for normal card transactions.

Step 4: Describe your allowed payment methods

To describe your allowed payment methods, complete the following steps:

Combine your supported authentication methods and supported card networks in order to describe your site's support for the CARD payment method. See the following code sample:

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

Extend the base card payment method object to describe information you expect to be returned to your application. Include a description of the tokenized payment data. See the following code sample:

 const 
  
 cardPaymentMethod 
  
 = 
  
 Object 
 . 
 assign 
 ( 
  
 { 
 tokenizationSpecification 
 : 
  
 tokenizationSpecification 
 }, 
  
 baseCardPaymentMethod 
 );

For more information about supported parameters , see CardParameters .

Google Pay currently only supports the CARD payment method type.

Step 5: Load the Google Pay API JavaScript library

To load the Google Pay API JavaScript library, complete the following steps:

Include Google's hosted JavaScript on your page. See the following code sample:

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

After the Google Pay API JavaScript library loads, initialize a PaymentsClient object. Initial development uses a TEST environment, which returns dummy payment methods that are suitable to reference the structure of a payment response. In this environment, a selected payment method isn't capable of a transaction. See the following code sample.
Note : We recommend that you only initialize paymentsClient once. Use the same instance when you invoke all of the other APIs, like CreateButton , IsReadyToPay , PrefetchPaymentData , and LoadPaymentData .
```
 const 
  
 paymentsClient 
  
 = 
  
 new 
  
 google 
 . 
 payments 
 . 
 api 
 . 
 PaymentsClient 
 ({ 
 environment 
 : 
  
 'TEST' 
 }); 
```
For more information about the requirements for a PRODUCTION environment that returns chargeable payment methods, see the Integration checklist .

Step 6: Determine readiness to pay with the Google Pay API

To determine readiness to pay with the Google Pay API, complete the following steps:

Add your allowed payment methods to your base request object. See the following code sample:

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

Call isReadyToPay() to determine if the Google Pay API is supported by the current device and browser for your specified payment methods. See the following code sample:

 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 
 ); 
  
 });

Step 7: Add a Google Pay payment button

Add a Google Pay payment button to your page to encourage shoppers to check out with payment methods that are supported by the Google Pay API and your site. For more information about available button types, colors, and display requirements, see the Brand guidelines .

See the following payment button code sample:

 const 
  
 button 
  
 = 
  
 paymentsClient 
 . 
 createButton 
 ({ 
 onClick 
 : 
  
 () 
  
 => 
  
 console 
 . 
 log 
 ( 
 'TODO: click handler' 
 ), 
  
 allowedPaymentMethods 
 : 
  
 []}); 
  
 // same payment methods as for the loadPaymentData() API call 
 document 
 . 
 getElementById 
 ( 
 'container' 
 ). 
 appendChild 
 ( 
 button 
 );

Step 8: Create a PaymentDataRequest object

To create a PaymentDataRequest object, complete the following steps:

Build a JavaScript object that describes your site's support for the Google Pay API. For a full list of supported properties, see PaymentDataRequest . See the following code sample:
```
 const 
  
 paymentDataRequest 
  
 = 
  
 Object 
 . 
 assign 
 ({}, 
  
 baseRequest 
 ); 
```
Add the payment methods supported by your app, such as any configuration of additional data that's expected in the response. See the following code sample:
```
 paymentDataRequest 
 . 
 allowedPaymentMethods 
  
 = 
  
 [ 
 cardPaymentMethod 
 ]; 
```
Define a total price and currency for a shopper to authorize. See the following code sample:
Important : Merchants that process transactions in the European Economic Area (EEA) or any other countries that are subject to Strong Customer Authentication (SCA) must include the countryCode , totalPrice , and merchantName parameters to meet SCA requirements.
```
 paymentDataRequest 
 . 
 transactionInfo 
  
 = 
  
 { 
  
 totalPriceStatus 
 : 
  
 'FINAL' 
 , 
  
 totalPrice 
 : 
  
 '123.45' 
 , 
  
 currencyCode 
 : 
  
 'USD' 
 , 
  
 countryCode 
 : 
  
 'US' 
 }; 
```
Provide a user-visible merchant name, and use our TEST merchantId value when in TEST . For more details, and for information on when to replace the TEST merchantId value, see MerchantInfo . See the following code sample of a user-visible merchant name:
```
 paymentDataRequest 
 . 
 merchantInfo 
  
 = 
  
 { 
  
 merchantName 
 : 
  
 ' Example Merchant 
' 
  
 merchantId 
 : 
  
 ' 12345678901234567890 
' 
 }; 
```
Note : Our TEST merchantId value is numeric. Your specific merchantId value can be numeric or alphanumeric. Review MerchantInfo for more details on how to obtain your specific merchantId .

Step 9: Register an event handler for user gestures

To register an event handler for user gestures, complete the following steps:

Register a click event handler for the purchase button. The event handler calls loadPaymentData() immediately after it interacts with the Google Pay, payment button.
After a Google user grants permission for your site to receive information about the user's selected form of payment and optional contact data, handle the response from the Google Pay API.

Extract the payment token from the paymentData response. If you implement a gateway integration, pass this token to your gateway without any modifications.

Note : In a TEST environment, a payment response includes summary data about the selected payment method that's suitable for display on a confirmation page. The payment response doesn't include a payment method that's capable of a transaction.

 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 
 ); 
 });

Step 10 (optional): Set up Authorize Payments

Authorize Payments is used to start the payment process and acknowledge a payment's authorization status. To set up Authorize Payments, take the following steps:

Register an onPaymentAuthorized() callback in PaymentOptions .
Call the loadPaymentData() function with the PAYMENT_AUTHORIZATION callback intent.
Implement onPaymentAuthorized() .

Register onPaymentAuthorized callbacks

The following code sample shows how to register onPaymentAuthorized callbacks:

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

Load payment data with callback intents

The following code sample shows how to initialize the payment sheet with Authorize Payments:

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

Handle onPaymentAuthorized callbacks

The onPaymentAuthorized() callback is invoked with a PaymentData object by Google after a payer approves payment through a user gesture, such as if they click Pay .

The callback returns a Promise<PaymentAuthorizationResult> value. The PaymentAuthorizationResult object has a SUCCESS or ERROR transaction state status. Upon success, the payment sheet is closed successfully. If you encounter an error, the payment sheet renders the error details returned after the payment is processed. The user can change the payment sheet’s payment data and authorize the payment again. See the following code sample:

Note: You must resolve the promise returned by onPaymentAuthorized callback within 30 seconds. If the promise isn't resolved within this timeframe, the request times out, and the Google Pay sheet displays a CALLBACK_TIMED_OUT error to the user.

 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' 
  
 } 
  
 }); 
  
 }); 
  
 }); 
 }

Step 11 (optional for shipping-enabled): Set up Dynamic Price Updates

Dynamic Price Updates allows a merchant to dynamically update shipping options and transaction information based on a chosen shipping address. Additionally, you can dynamically update transaction information based on a chosen shipping option.

To set up Dynamic Price Updates, take the following steps:

Register both the onPaymentAuthorized and onPaymentDataChanged callbacks in PaymentOptions .
Call the loadPaymentData() function with callback intents. For details, see the corresponding example .
Implement onPaymentAuthorized and onPaymentDataChanged .

Register PaymentData callback

The following code sample shows that Dynamic Price Updates requires callback functions to be registered in the PaymentsClient paymentOptions object.

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

Load payment data with callback intents

The following code sample shows how a payment sheet must be initialized with a required shipping address and shipping options configuration:

 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 
 ;

Handle onPaymentDataChanged callback

The onPaymentDataChanged callback is invoked with an IntermediatePaymentData object, which includes the shipping address and shipping option selected in the payment sheet.

The callback returns a Promise<PaymentDataRequestUpdate> . The PaymentDataRequestUpdate object has new transaction information, shipping options, and a payment data error. This data updates the payment sheet.

Handle any exception cases, such as an unserviceable shipping address or invalid shipping option, directly in the payment sheet. Set up a PaymentDataError object to highlight the reason for the error with an error message to the user. Be sure to include the related intent in the message. For details on how to set up the object and message, see the following code sample:

 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 
 ); 
  
 }); 
 }

Promo Codes allow a merchant to dynamically update shipping options and transaction information based on a provided promotional code.

To set up Promo Codes, take the following steps:

Register the onPaymentDataChanged callbacks in PaymentOptions .
Call the loadPaymentData() function with callback intents. For details, see the corresponding example .
Implement the onPaymentDataChanged callback function .

Register Offer callback

The following code sample shows that Promo Codes require callback functions to be registered in the PaymentsClient paymentOptions object.

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

Load payment data with callback intents

The following code sample shows how a payment sheet must be initialized with an OFFER callback intent:

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

Handle onPaymentDataChanged callback

The onPaymentDataChanged callback is invoked with an IntermediatePaymentData object, which includes the shipping address and shipping option selected in the payment sheet.

The callback must return a Promise<PaymentDataRequestUpdate> . The PaymentDataRequestUpdate object has new transaction information, shipping options, offer data, and a payment data error. This data updates the payment sheet.

Handle any exception cases, such as an invalid promo code, directly in the payment sheet. Set up a PaymentDataError object to highlight the reason for the error with an error message to the user. Be sure to include the related intent in the message. For details on how to set up the object and message, see the following code sample, which references an object (validPromoCodes) containing the promo code values:

 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 
 ); 
  
 } 
  
 } 
  
 }

Put it all together

The example code blocks in this section show a complete end-to-end example of the Google Pay API JavaScript library tutorial, Authorize Payments, Dynamic Price Updates, and Promo Codes.

Tutorial

 < 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 
  
 // 
  
 @ 
 note 
  
 DO 
  
 NOT 
  
 save 
  
 the 
  
 payment 
  
 credentials 
  
 for 
  
 future 
  
 transactions 
 , 
  
 // 
  
 unless 
  
 they 
 're used for merchant-initiated transactions with user 
  
 // 
  
 consent 
  
 in 
  
 place 
 . 
  
 paymentToken 
  
 = 
  
 paymentData 
 . 
 paymentMethodData 
 . 
 tokenizationData 
 . 
 token 
 ; 
 } 
 
< / 
 script 
> < script 
  
 async 
  
 src 
 = 
 "https://pay.google.com/gp/p/js/pay.js" 
  
 onload 
 = 
 "onGooglePayLoaded()" 
>< / 
 script 
>

Authorize Payments

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

Dynamic Price Updates

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

Offers

 < 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 
 % o 
 ff 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 
>

Objective : Proceed to our Integration checklist to validate your integration and request production access.

Tutorial Stay organized with collections Save and categorize content based on your preferences.

Step 1: Define your Google Pay API version

Step 2: Request a payment token for your payment provider

Step 3: Define supported payment card networks

Step 4: Describe your allowed payment methods

Step 5: Load the Google Pay API JavaScript library

Step 6: Determine readiness to pay with the Google Pay API

Step 7: Add a Google Pay payment button

Step 8: Create a PaymentDataRequest object

Step 9: Register an event handler for user gestures

Step 10 (optional): Set up Authorize Payments

Register onPaymentAuthorized callbacks

Load payment data with callback intents

Handle onPaymentAuthorized callbacks

Step 11 (optional for shipping-enabled): Set up Dynamic Price Updates

Register PaymentData callback

Load payment data with callback intents

Handle onPaymentDataChanged callback

Step 12 (optional for promo codes): Set up Promo Codes

Register Offer callback

Load payment data with callback intents

Handle onPaymentDataChanged callback

Put it all together

Tutorial

Authorize Payments

Dynamic Price Updates

Offers

Tutorial