Ta strona została przetłumaczona przez Cloud Translation API.

Interfejs Google Pay API for Web – podstawy

1. Wprowadzenie

Co utworzysz

Po ukończeniu tego ćwiczenia będziesz mieć minimalną wersję witryny z działającą integracją z Google Pay. Ten projekt pobiera token płatności, który może zostać wysłany do dostawcy usług płatniczych w celu przetworzenia.

Czego się nauczysz

Jak wczytywać i konfigurować Google Pay API
Jak wyświetlać przycisk Google Pay i obsługiwać kliknięcia
Jak poprosić o token płatności z Google Pay

Czego potrzebujesz

Edytor tekstu do edycji plików HTML i JavaScript.
przeglądarka Google Chrome lub inny sposób testowania witryny lokalnej.
W przypadku wersji produkcyjnej potrzebujesz Google Pay merchantId. Rejestracja w Konsoli usług Google Pay i Portfela Google zajmuje tylko minutę, więc warto to zrobić już teraz.

Obserwowanie Project IDX

2. Tworzenie strony HTML

Tworzenie plików projektu

Utwórz na komputerze folder o nazwie gpay-web-101. W jego obrębie utwórz 2 puste pliki tekstowe o nazwach index.html i main.js. Struktura katalogów powinna wyglądać tak:
```
gpay-web-101/
  index.html
  main.js
```

Otwórz plik index.html w wybranym środowisku IDE i dodaj ten kod:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

Wyjaśnienie kodu

Do strony z identyfikatorem gpay-container zostanie dodany pusty element DIV. Ten element DOM będzie elementem nadrzędnym, do którego dodawany jest przycisk Google Pay. W stosownych przypadkach możesz umieścić ten element w schemacie witryny.
Tag skryptu main.js jest umieszczany w DOM po elemencie gpay-container. Jest to konieczne, aby DIV kontenera był obecny w DOM przed zapytaniem main.js. Dodatkowo skrypt jest synchroniczny, aby zapewnić jego załadowanie przed załadowaniem pay.js, ponieważ metoda onGooglePayLoaded() musi istnieć przed zakończeniem ładowania. Można to też osiągnąć innymi metodami, których tu jednak nie omawiamy.
Na koniec pay.js jest ładowany asynchronicznie i konfiguruje onGooglePayLoaded() jako element obsługi onload. Ta metoda zostanie zdefiniowana w main.js.

3. Konfigurowanie Google Pay

Żądanie płatności Google Pay wymaga obiektu żądania. Obiekt zdefiniowany tutaj jako baseGooglePayRequest zawiera minimalne wspólne ustawienia dla wszystkich żądań. Dodatkowe ustawienia zostaną dodane w zależności od złożonego żądania, które sprawdzimy w tym CodeLab.

Dodaj do pustego pliku main.js stałe konfiguracji Google Pay:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

Wyjaśnienie kodu

Ustaw stałą zmienną GPAY_BUTTON_CONTAINER_ID na identyfikator elementu DOM używanego na stronie HTML jako nadrzędnego kontenera przycisku Google Pay.
Utwórz obiekt konfiguracji baseGooglePayRequest z odpowiednimi ustawieniami dla aplikacji. Wszystkie właściwości i wartości znajdziesz w dokumentacji referencyjnej. Wartości podane w tym przykładzie mogą, ale nie muszą odpowiadać Twoim potrzebom, dlatego dokładnie je sprawdź.
Zaktualizuj właściwości merchantId i merchantName, podając własne wartości. Te pola są opcjonalne, gdy środowisko to TEST.

Zasoby

Post na blogu: chcesz płacić wygodniej za pomocą Google Pay? Skonfiguruj opcje płatności.
Referencje API: dokumentacja obiektów żądań interfejsu Google Pay API
Dokumentacja interfejsu API: więcej informacji o dozwolonych metodach autoryzacji, dozwolonych sieciach kart i specyfikacjach tokenizacji, w tym o odpowiedniej wartości bramy, znajdziesz w PaymentMethod.

4. Dodawanie klienta płatności

Klient płatności służy do wysyłania żądań płatności i rejestrowania wywołań zwrotnych. W tym ćwiczeniu będziemy tylko wysyłać prośby o płatność. Dodatkowo możesz skonfigurować PaymentDataCallbacks, aby obsłużyć przypadki, gdy zmieniły się dane płatności lub autoryzacja. Jednak w tym CodeLab nie omawiamy tych zaawansowanych tematów.

Dodaj ten kod klienta na końcu pliku main.js:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

Wyjaśnienie kodu

Zmienna paymentsClient będzie przechowywać instancję klienta po jej utworzeniu. Nasz kod nie uzyskuje dostępu do zmiennej bezpośrednio, ale zawsze za pomocą metody getGooglePaymentsClient().
Metoda getGooglePaymentsClient() sprawdza, czy klient został już zainicjowany, i zwraca tę instancję. Jeśli nie został wcześniej utworzony, zostanie utworzony, zapisany i zwrócony. Dzięki temu w trakcie działania skryptu będzie używana tylko jedna instancja.
Aby utworzyć instancję klienta, wywoływana jest metoda PaymentsClient(). W tym przykładzie informujemy klienta, że jesteśmy w środowisku TEST. Alternatywą jest PRODUCTION. Jednak TEST jest domyślną wartością i może zostać pominięty.

5. Dodawanie pomocników

Podane niżej funkcje pomocnicze są używane później w skrypcie i zostały dodane tylko po to, aby ułatwić czytelność i utrzymanie kodu.

Dodaj funkcje pomocnicze na końcu funkcji main.js:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Wyjaśnienie kodu

deepCopy() to narzędzie, które używa serializacji i deserializacji JSON do tworzenia głębokiej kopii podanego obiektu. Jest to wygodny sposób klonowania obiektów bez obaw o wspólne odwołania.
renderGooglePayButton() to narzędzie, które wywołuje metodę biblioteki createButton(), aby wyświetlić przycisk Google Pay. Przekazany argument to zestaw opcji, które określają sposób działania przycisku, np. rejestrowanie funkcji onGooglePaymentButtonClicked() do obsługi kliknięć przycisku.

6. Dodawanie modułów obsługi zdarzeń

W tym skrypcie konfigurujemy 2 moduły obsługi zdarzeń. Pierwszy jest wywoływany po zakończeniu wczytywania biblioteki pay.js, a drugi – po kliknięciu przycisku Google Pay.

Dodaj moduły obsługi zdarzeń na końcu pliku main.js:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

Wyjaśnienie kodu

Funkcja onGooglePayLoaded() jest wywoływana po zakończeniu wczytywania skryptu pay.js, zgodnie z definicją w pliku HTML. Metoda isReadyToPay() jest wywoływana, aby określić, czy wyświetlić przycisk Google Pay. Jeśli konsument jest gotowy do dokonania płatności (czyli dodał formę płatności do Portfela Google), wyświetla się przycisk Google Pay.
onGooglePaymentButtonClicked() jest wywoływany po kliknięciu przycisku Google Pay. Ta metoda wywołuje metodę biblioteki loadPaymentData(), która służy do pobierania tokena płatności. Gdy otrzymasz token płatności, wyślij go do bramki płatności w celu przetworzenia transakcji. transactionInfo opisuje transakcję, która powinna zostać przetworzona po kliknięciu tego przycisku.

7. Podsumowanie

Gratulujemy ukończenia tego ćwiczenia Codelab. Wiesz już, jak zintegrować interfejs API Google Pay z witryną.

Uruchamianie projektu

Testowanie w Google Chrome

W przeglądarce Google Chrome otwórz plik index.html, korzystając z menu głównego Chrome Plik > Otwórz plik…. Gdy otworzysz projekt w ten sposób, Chrome wykona main.js. Inne przeglądarki mogą nie zezwalać na wykonywanie kodu JavaScript.

– lub –

Testowanie z lokalnym serwerem WWW

Jeśli masz zainstalowany Python, uruchom python3 -m http.server w terminalu w folderze głównym pay-web-101.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Następnie wejdź na swoją witrynę pod adresem http://localhost:8000.

Co dalej

Dodatkowe materiały

Dołącz do rozmowy w kanale#payments w Discordzie.
Obserwuj konto @GooglePayDevs na X
Oglądanie filmów związanych z Google Pay w YouTube