Samouczek

Ten samouczek pokazuje, jak zintegrować aplikację internetową z Google Pay API i skonfigurować ją tak, aby obsługiwała karty płatnicze.

Krok 1. Określ wersję Google Pay API
Krok 2. Wybierz metodę tokenizacji płatności.
Krok 3. Określ obsługiwane sieci kart płatniczych.
Krok 4. Opisz dozwolone formy płatności
Krok 5. Wczytaj bibliotekę JavaScript Google Pay API.
Krok 6. Określ gotowość do płacenia za pomocą Google Pay API.
Krok 7. Dodaj przycisk płatności Google Pay.
Krok 8. Utwórz obiekt PaymentDataRequest
Krok 9. Zarejestruj moduł obsługi zdarzeń za pomocą gestów
Krok 10 (opcjonalny). Pobierz z wyprzedzeniem dane (przed interakcją z użytkownikiem)
Krok 11 (opcjonalny): Skonfiguruj autoryzację płatności.
Krok 12 (opcjonalny w przypadku włączonej wysyłki). Skonfiguruj dynamiczne aktualizacje cen
Krok 13 (opcjonalny w przypadku kodów promocyjnych): skonfiguruj kody promocyjne
Połącz wszystkie elementy
Uwaga: obejrzyj nasz interaktywny przykład działania Google Pay.

Krok 1. Określ wersję Google Pay API

Zadeklaruj, jakiej wersji Google Pay API używa Twoja witryna. Główne i pomocnicze numery wersji są wymagane w polach każdego przekazywanego obiektu. Są one zawarte w odpowiedzi.

Poniższy przykładowy kod pokazuje zadeklarowane wersje API:

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

Krok 2. Poproś o token płatności dla Twojego dostawcy usług płatniczych

Google szyfruje informacje o wybranej przez płatnika karcie podczas bezpiecznego przetwarzania operacji przez dostawcę usług płatniczych.

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

Zastąp example i exampleGatewayMerchantId odpowiednimi wartościami dla Twojego dostawcy usług płatniczych. Znajdź w poniższej tabeli konkretne wartości gateway i gatewayMerchantId dla Twojego dostawcy:

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

Wskazówka: example to poprawna nazwa bramy w środowisku testowym. Jeśli chcesz przetestować interfejs API, możesz zostawić ten fragment kodu bez zmian. Gdy korzystasz z bramy example, Twoja witryna nie otrzymuje danych karty obsługującej płatność, ale wzorzec przeglądania jest taki sam.

Typ tokenizacji PAYMENT_GATEWAY to najpopularniejszy sposób implementacji płatności kartą w Google Pay API przez sprzedawców. Jeśli Twój dostawca płatności nie jest obsługiwany, możesz zaakceptować Google Pay przez integrację DIRECT. Więcej informacji znajdziesz w dokumentacji tokenizacji bezpośredniej.

Krok 3. Określ obsługiwane sieci kart płatniczych

Określ sieci kart akceptowane w Twojej witrynie. Obejrzyj poniższy przykładowy kod:

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

Interfejs API Google Pay może zwrócić listę kart zapisanych w Google (PAN_ONLY) lub token urządzenia z Androidem uwierzytelniany za pomocą kryptogramu 3-D Secure (CRYPTOGRAM_3DS). Obejrzyj poniższy przykładowy kod:

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

Więcej informacji znajdziesz w opisie CardParameters w naszej dokumentacji referencyjnej dotyczącej obiektów. Sprawdź też bramę lub firmę obsługującą płatności pod kątem obsługiwanych sieci kart i obsługi tokenów urządzeń z Androidem.

Krok 4. Opisz dozwolone formy płatności

Aby opisać dozwolone metody płatności, wykonaj te czynności:

Połącz obsługiwane metody uwierzytelniania i sieci kart, aby opisać obsługę formy płatności CARD w Twojej witrynie. Obejrzyj poniższy przykładowy kod:

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

Rozszerz podstawowy obiekt formy płatności, aby opisać, jakie informacje mają być zwracane do aplikacji. Dołącz opis danych płatności tokenizowanych. Obejrzyj poniższy przykładowy kod:
```
const cardPaymentMethod = Object.assign(
  {tokenizationSpecification: tokenizationSpecification},
  baseCardPaymentMethod
);
```

Więcej informacji na temat obsługiwanych parameters znajdziesz w sekcji dotyczącej CardParameters.

Google Pay obsługuje również formy płatności typu CARD oraz PAYPAL. Więcej informacji na temat dodawania typu PAYPAL jako formy płatności w Google Pay znajdziesz w dokumentacji dla programistów PayPal.

Krok 5. Wczytaj bibliotekę JavaScript Google Pay API

Aby wczytać bibliotekę JavaScript Google Pay API, wykonaj te czynności:

Dodaj w swojej witrynie JavaScript hostowany przez Google. Obejrzyj poniższy przykładowy kod:

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

Po wczytaniu biblioteki JavaScript Google Pay API zainicjuj obiekt PaymentsClient. Początkowo wykorzystane zostanie środowisko TEST, które zwraca fikcyjne formy płatności. Mają one na celu zaprezentowanie struktury odpowiedzi na płatność. W tym środowisku nie można dokonać transakcji za pomocą wybranej metody. Zapoznaj się z poniższym przykładowym kodem.
Uwaga: zalecamy zainicjowanie kodu paymentsClient tylko raz. Użyj tej samej instancji podczas wywoływania wszystkich innych interfejsów API, takich jak CreateButton, IsReadyToPay, PrefetchPaymentData i LoadPaymentData.
```
const paymentsClient =
    new google.payments.api.PaymentsClient({environment: 'TEST'});
```
Więcej informacji o wymaganiach dotyczących środowiska PRODUCTION, które zwraca formy płatności możliwe do obciążenia, znajdziesz w artykule o liście kontrolnej integracji.

Krok 6. Określ gotowość do płacenia za pomocą Google Pay API

Aby określić gotowość do płacenia za pomocą Google Pay API, wykonaj te czynności:

Dodaj obsługiwane formy płatności do podstawowego obiektu żądania. Obejrzyj poniższy przykładowy kod:

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

Wywołaj isReadyToPay(), aby określić, czy obecnie używane urządzenie lub przeglądarka obsługuje Google Pay API w przypadku wybranych form płatności. Obejrzyj poniższy przykładowy kod:

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

Krok 7. Dodaj przycisk płatności Google Pay

Dodaj przycisk Google Pay, by zachęcać kupujących do realizowania płatności w formie obsługiwanej przez Google Pay API i Twoją witrynę. Więcej informacji na temat dostępnych typów i kolorów przycisków oraz wymagań związanych z ich wyświetlaniem znajdziesz we wskazówkach dotyczących marki.

Obejrzyj przykładowy kod związany z przyciskiem płatności:

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

Krok 8. Utwórz obiekt PaymentDataRequest

Aby utworzyć obiekt PaymentDataRequest, wykonaj te czynności:

Utwórz obiekt JavaScript opisujący obsługę interfejsu Google Pay API w Twojej witrynie. Pełną listę obsługiwanych właściwości znajdziesz w opisie PaymentDataRequest. Obejrzyj poniższy przykładowy kod:
```
const paymentDataRequest = Object.assign({}, baseRequest);
```
Dodaj formy płatności obsługiwane w Twojej aplikacji razem z konfiguracją i innymi danymi, które powinna zawierać odpowiedź. Obejrzyj poniższy przykładowy kod:
```
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
```
Określ łączną kwotę oraz walutę, które ma potwierdzić kupujący. Zobacz przykładowy kod:
Ważne: sprzedawcy prowadzący działalność w Europejskim Obszarze Gospodarczym lub innym kraju, w którym obowiązuje silne uwierzytelnienie klienta (SCA,) muszą uwzględnić parametry countryCode, totalPrice oraz merchantName, aby spełnić wymagania SCA.
```
paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};
```
Podaj nazwę sprzedawcy widoczną dla użytkownika i użyj naszej wartości TEST merchantId, gdy środowisko jest ustawione na TEST. Więcej informacji, a także informacje o tym, kiedy zastąpić wartość TEST merchantId, znajdziesz w MerchantInfo. Obejrzyj poniższy przykładowy kod dotyczący nazwy sprzedawcy widocznej dla użytkowników:
```
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890'
};
```
Uwaga: nasza wartość TEST merchantId jest liczbowa. Twoja wartość merchantId może być liczbowa lub alfanumeryczna. Więcej informacji o tym, jak uzyskać swoją wartość merchantId, znajdziesz w MerchantInfo.

Krok 9. Zarejestruj moduł obsługi zdarzeń za pomocą gestów

Aby zarejestrować moduł obsługi zdarzeń za pomocą gestów użytkownika, wykonaj te czynności:

Zarejestruj moduł obsługi zdarzeń kliknięcia dla przycisku zakupu. Wywołuje on loadPaymentData() natychmiast po interakcji z przyciskiem płatności Google Pay.
Przetwórz odpowiedź z Google Pay API po tym, jak użytkownik Google zezwoli witrynie na dostęp do wybranej formy płatności oraz opcjonalnych danych kontaktowych.
Wyodrębnij token płatności z odpowiedzi paymentData. Jeśli implementujesz integrację bramy, przekaż ten token do swojej bramy bez żadnych modyfikacji.
Uwaga: w środowisku TEST zwracana odpowiedź dotycząca płatności zawiera dane podsumowujące dotyczące wybranej formy płatności, które są dostosowane do wyświetlenia na stronie potwierdzenia. Odpowiedź dotycząca płatności nie zawiera informacji o formie płatności, której można użyć do dokonania transakcji.
```
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);
});
```

Krok 10 (opcjonalny). Pobierz z wyprzedzeniem dane (przed interakcją z użytkownikiem)

Aby skrócić czas operacji, pobierz z wyprzedzeniem konfigurację płatności w witrynie z Google Pay API przed wywołaniem loadPaymentData(). Przyjrzyj się temu przykładowi:

paymentsClient.prefetchPaymentData(paymentDataRequest);

Krok 11 (opcjonalny). Skonfiguruj autoryzację płatności

Autoryzacja płatności służy do rozpoczęcia procesu płatności i potwierdzenia statusu autoryzacji płatności. Aby skonfigurować autoryzację płatności, wykonaj te czynności:

Zarejestruj wywołanie zwrotne onPaymentAuthorized() w PaymentOptions.
Wywołaj funkcję loadPaymentData() z intencją wywołania zwrotnego PAYMENT_AUTHORIZATION.
Wdróż onPaymentAuthorized().

Rejestrowanie wywołań zwrotnych onPaymentAuthorized

Poniższy przykładowy kod pokazuje, jak rejestruje się wywołania zwrotne onPaymentAuthorized:

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

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Poniższy przykładowy kod pokazuje, jak inicjuje się arkusz płatności z autoryzacją płatności:

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

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

Obsługa wywołań zwrotnych onPaymentAuthorized

Wywołanie zwrotne onPaymentAuthorized() jest wywoływane przez Google z obiektem PaymentData po zatwierdzeniu płatności gestem przez płatnika, na przykład przez kliknięcie Zapłać.

Wywołanie zwraca wartość Promise<PaymentAuthorizationResult>. Obiekt PaymentAuthorizationResult ma ustawiony stan transakcji SUCCESS lub ERROR. Po pomyślnym zakończeniu arkusz płatności zostaje zamknięty. Jeśli wystąpi błąd, w arkuszu płatności pojawiają się szczegóły błędu zwróconego po przetworzeniu płatności. Użytkownik może zmienić dane płatności w arkuszu płatności i ponownie autoryzować płatność. Obejrzyj poniższy przykładowy kod:

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

Krok 12 (opcjonalny w przypadku włączonej wysyłki). Skonfiguruj dynamiczne aktualizacje cen

Dzięki funkcji Dynamiczne aktualizacje cen sprzedawcy mogą dynamicznie aktualizować opcje dostawy i informacje o transakcjach na podstawie wybranego adresu dostawy. Mogą także dynamicznie aktualizować informacje o transakcjach na podstawie wybranej opcji dostawy.

Aby skonfigurować dynamiczne aktualizacje cen, wykonaj te czynności:

Zarejestruj wywołania zwrotne onPaymentAuthorized i onPaymentDataChanged w PaymentOptions.
Wywołaj funkcję loadPaymentData() z intencjami wywołania zwrotnego. Szczegółowe informacje znajdziesz w odpowiednim przykładzie.
Wdróż onPaymentAuthorized i onPaymentDataChanged.

Rejestracja wywołania zwrotnego PaymentData

Poniższy fragment kodu pokazuje, że funkcja Dynamiczne aktualizacje cen wymaga zarejestrowania funkcji wywołań zwrotnych w obiekcie PaymentsClient paymentOptions.

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

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Poniższy fragment kodu ilustruje, w jaki sposób należy zainicjować arkusz płatności wymaganym adresem dostawy i konfiguracją opcji dostawy.

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;

Obsługa wywołania zwrotnego onPaymentDataChanged

Wywołanie zwrotne onPaymentDataChanged jest wywoływane z obiektem IntermediatePaymentData. Zawiera on adres dostawy i opcję dostawy wybrane w arkuszu płatności.

Wywołanie zwraca wartość Promise<PaymentDataRequestUpdate>. Obiekt PaymentDataRequestUpdate zawiera nowe informacje o transakcji, opcje dostawy i błąd danych o płatności. Te dane aktualizują arkusz płatności.

Wyjątkowe przypadki, takie jak bezużyteczny adres dostawy czy nieprawidłowa opcja dostawy, należy uwzględnić bezpośrednio w arkuszu płatności. Skonfiguruj obiekt PaymentDataError, aby wyróżnić przyczynę błędu za pomocą komunikatu o błędzie, który pojawi się użytkownikowi. Pamiętaj, by komunikat zawierał powiązaną intencję. Szczegółowe informacje o tym, jak skonfigurować obiekt i komunikat, znajdziesz w przykładowym kodzie poniżej.

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

Kody promocyjne pozwalają sprzedawcom dynamicznie aktualizować opcje dostawy i informacje o transakcjach na podstawie przesłanego kodu promocyjnego.

Aby skonfigurować kody promocyjne, wykonaj te czynności:

Zarejestruj wywołania zwrotne onPaymentDataChanged w PaymentOptions.
Wywołaj funkcję loadPaymentData() z intencjami wywołania zwrotnego. Szczegółowe informacje znajdziesz w odpowiednim przykładzie.
Zaimplementuj funkcję onPaymentDataChanged callback function.

Rejestrowanie wywołania zwrotnego oferty

Poniższy przykładowy kod pokazuje, że kody promocyjne wymagają zarejestrowania wywołań zwrotnych w obiekcie PaymentsClient paymentOptions.

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

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Poniższy przykładowy kod pokazuje, jak zainicjować arkusz płatności przy użyciu intencji wywołania zwrotnego OFERTY:

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

paymentDataRequest.callbackIntents = ["OFFER"];

Obsługa wywołania zwrotnego onPaymentDataChanged

Wywołanie zwrotne onPaymentDataChanged jest wywoływane z obiektem IntermediatePaymentData. Zawiera on adres dostawy i opcję dostawy wybrane w arkuszu płatności.

Wywołanie zwrotne musi zwrócić wartość Promise<PaymentDataRequestUpdate>. Obiekt PaymentDataRequestUpdate zawiera nowe informacje o transakcji, opcje dostawy, dane oferty i błąd danych o płatności. Te dane aktualizują arkusz płatności.

Wyjątkowe przypadki, takie jak nieprawidłowy kod promocyjny, należy uwzględnić bezpośrednio w arkuszu. Skonfiguruj obiekt PaymentDataError, aby wyróżnić przyczynę błędu za pomocą komunikatu o błędzie, który pojawi się użytkownikowi. Pamiętaj, by komunikat zawierał powiązaną intencję. Szczegółowe informacje o tym, jak skonfigurować obiekt i komunikat, znajdziesz w tym przykładowym kodzie powiązanym z obiektem (validPromoCodes), który zawiera wartości kodu promocyjnego:

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

Łączenie wszystkich elementów

Przykładowe bloki kodu w tej sekcji zawierają kompletny samouczek dotyczący użycia biblioteki JavaScript Google Pay API oraz funkcji Autoryzacja płatności, Dynamiczne aktualizacje cen i Kody promocyjne.

Samouczek

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

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

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

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

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

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

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

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

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

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}

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

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

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

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

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

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

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

Autoryzacja płatności

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

Dynamiczne aktualizacje cen

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

Oferty specjalne

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

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

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

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

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

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

Samouczek

Krok 1. Określ wersję Google Pay API

Krok 2. Poproś o token płatności dla Twojego dostawcy usług płatniczych

Krok 3. Określ obsługiwane sieci kart płatniczych

Krok 4. Opisz dozwolone formy płatności

Krok 5. Wczytaj bibliotekę JavaScript Google Pay API

Krok 6. Określ gotowość do płacenia za pomocą Google Pay API

Krok 7. Dodaj przycisk płatności Google Pay

Krok 8. Utwórz obiekt PaymentDataRequest

Krok 9. Zarejestruj moduł obsługi zdarzeń za pomocą gestów

Krok 10 (opcjonalny). Pobierz z wyprzedzeniem dane (przed interakcją z użytkownikiem)

Krok 11 (opcjonalny). Skonfiguruj autoryzację płatności

Rejestrowanie wywołań zwrotnych onPaymentAuthorized

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Obsługa wywołań zwrotnych onPaymentAuthorized

Krok 12 (opcjonalny w przypadku włączonej wysyłki). Skonfiguruj dynamiczne aktualizacje cen

Rejestracja wywołania zwrotnego PaymentData

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Obsługa wywołania zwrotnego onPaymentDataChanged

Krok 13 (opcjonalny w przypadku kodów promocyjnych): skonfiguruj kody promocyjne

Rejestrowanie wywołania zwrotnego oferty

Wczytywanie danych płatności z intencjami wywołania zwrotnego

Obsługa wywołania zwrotnego onPaymentDataChanged

Łączenie wszystkich elementów

Samouczek

Autoryzacja płatności

Dynamiczne aktualizacje cen

Oferty specjalne