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

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 płatności:

Brama Parametry i dokumenty
ACI
"gateway": "aciworldwide"
"gatewayMerchantId": "YOUR_ENTITY_ID"

Dokumentacja dla deweloperów

Adyen
"gateway": "adyen"
"gatewayMerchantId": "YOUR_MERCHANT_ACCOUNT_NAME"

Dokumentacja dla deweloperów

Alfa-Bank
"gateway": "alfabank"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

APPEX
"gateway": "epos"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Assist
"gateway": "assist"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Systemy rozliczeniowe
"gateway": "billingsystems"
"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

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

CardConnect
"gateway": "cardconnect"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Cathay United Bank
"gateway": "cathaybk"
"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

CloudPayments
"gateway": "cloudpayments"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Computop
"gateway": "computop"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Cybersource
"gateway": "cybersource"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Datatrans
"gateway": "datatrans"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

dLocal
"gateway": "dlocal"
"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

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

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

eSafe
"gateway": "esafe"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Brak dostępnej dokumentacji dla deweloperów

Evo Payment Gateway
"gateway": "evopaymentgateway"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Brak dostępnej dokumentacji dla deweloperów

Fat Zebra
"gateway": "fatzebra"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

First Data (Payeezy)
"gateway": "firstdata"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

FreedomPay
"gateway": "freedompay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Developer docs

Gestpay
"gateway": "gestpay"
"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

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

HiTrust
"gateway": "hitrustpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

iPay88
"gateway": "ipay88"
"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"

Developer docs

JudoPay
"gateway": "judopay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Brak dostępnej dokumentacji dla deweloperów

Kassa
"gateway": "kassacom"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Developer docs

Kineox
"gateway": "kineox"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

LogPay
"gateway": "logpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Lyra
"gateway": "lyra"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Mastercard Payment Gateway Services
"gateway": "mpgs"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

MOBI.Money
"gateway": "mobimoney"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Molpay
"gateway": "molpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Brak dostępnej dokumentacji 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

Multicarta
"gateway": "mulitcarta"
"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

MyPay
"gateway": "mypay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Brak dostępnej dokumentacji dla deweloperów

Newebpay
"gateway": "newebpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Nexi
"gateway": "nexi"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

NMI
"gateway": "creditcall"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Nuvei
"gateway": "nuvei"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

paygent
"gateway": "paygent"
"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

Paymark
"gateway": "paymark"
"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"

Developer docs

PayOnline
"gateway": "payonline"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Paysafe
"gateway": "paysafe"
"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

Payway
  "gateway": "payway"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Developer docs

Platon
  "gateway": "platon"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Developer docs

Portmone
"gateway": "portmonecom"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Przelewy24
"gateway": "przelewy24"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

RBK.money
"gateway": "rbkmoney"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Redsys
"gateway": "redsys"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Sberbank
"gateway": "sberbank"
"gatewayMerchantId": "YOUR_ORGANIZATION_NAME"

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

Spreedly
"gateway": "spreedly"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Square
"gateway": "square"
"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

TapPay (Cherri Tech)
"gateway": "tappay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Tatra banka (CardPay)
"gateway": "tatrabanka"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

No developer docs available

Tinkoff
"gateway": "tinkoff"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

theMAP
"gateway": "themap"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

TPay.com
"gateway": "tpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Tranzzo
"gateway": "tranzzo"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Uniteller
"gateway": "uniteller"
"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

Veritrans
"gateway": "veritrans"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Vindicia
"gateway": "vindicia"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

WayForPay
"gateway": "wayforpay"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Windcave
"gateway": "windcave"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Dokumentacja dla deweloperów

Wirecard
"gateway": "wirecard"
"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

Yandex.Checkout
"gateway": "yandexcheckout"
"gatewayMerchantId": "YOUR_SHOP_ID"

Dokumentacja dla deweloperów

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:

  1. 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
          }
        };
        
  2. 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
        );
        
  3. Więcej informacji na temat obsługiwanych parameters, znajdziesz w sekcji dotyczącej CardParameters.

    Google Pay obsługuje również metody płatności typu CARD oraz PAYPAL. Więcej informacji na temat dodawania typu PAYPAL jako metody 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:

  1. 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>
  2. 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. Obejrzyj poniższy przykładowy kod:
    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 odpowiednie 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:

  1. 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];
  2. 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')});
    document.getElementById('container').appendChild(button);

Krok 8. Utwórz obiekt PaymentDataRequest

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

  1. 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);
  2. 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];
        
  3. Określ łączną kwotę oraz walutę, które ma potwierdzić kupujący. Obejrzyj przykładowy kod:
    paymentDataRequest.transactionInfo = {
          totalPriceStatus: 'FINAL',
          totalPrice: '123.45',
          currencyCode: 'USD',
          countryCode: 'US'
        };
  4. 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: '01234567890123456789'
        };
        

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:

  1. Zarejestruj moduł obsługi zdarzeń kliknięcia dla przycisku zakupu. Wywołuje on loadPaymentData() natychmiast po interakcji z przyciskiem płatności Google Pay.
  2. 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.
  3. Wyodrębnij token płatności z odpowiedzi paymentData. Jeśli implementujesz integrację bramy, przekaż ten token do swojej bramy bez żadnych modyfikacji.
        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:

  1. Zarejestruj wywołanie zwrotne onPaymentAuthorized() w PaymentOptions.
  2. Wywołaj funkcję loadPaymentData() z intencją wywołania zwrotnego PAYMENT_AUTHORIZATION.
  3. 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: "01234567890123456789"
      },
      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: '01234567890123456789',
    };

    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:

  1. Zarejestruj wywołania zwrotne onPaymentAuthorized i onPaymentDataChanged w PaymentOptions.
  2. Wywołaj funkcję loadPaymentData() z intencjami wywołania zwrotnego. Szczegółowe informacje znajdziesz w odpowiednim przykładzie.
  3. 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: "01234567890123456789"
      },
      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: '01234567890123456789',
      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 poniższej próbce kodu.

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

Połącz wszystkie elementy

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 i Dynamiczne aktualizacje cen.

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