Google Pay API for Web 201: Zaawansowane

1. Wprowadzenie

Te ćwiczenia są kontynuacją ćwiczeń Google Pay API for Web 101: Basics i korzystają z kodu napisanego w ramach tamtych ćwiczeń. Aby ukończyć to ćwiczenie, najpierw wykonaj poprzednie.

Czego się nauczysz

Jak dostosować przycisk Google Pay
Jak rozpocząć proces płatności
Jak potwierdzić stan autoryzacji płatności
Jak obsługiwać zmiany adresu dostawy
Jak obsługiwać kody wykorzystania

Czego potrzebujesz

edytor tekstu do edytowania plików HTML i JavaScript;
Przeglądarka Google Chrome lub inny sposób na przetestowanie lokalnej witryny.
W przypadku środowiska produkcyjnego potrzebujesz merchantId Google Pay. Rejestracja w Konsoli usług Google Pay i Portfela Google zajmuje tylko minutę, więc warto to zrobić od razu.

Korzystanie z Firebase Studio

2. Dostosowywanie przycisków

To krótkie omówienie ButtonOptions. Szczegółowe wyjaśnienie znajdziesz w dokumentacji

Opcja	Konieczność	Wartości
onClick	Wymagane	Nazwa modułu obsługi zdarzeń JavaScript
allowedPaymentMethods	Opcjonalny	`PaymentMethod[]`
buttonColor	Opcjonalny	domyślny, czarny, biały
buttonLocale	Opcjonalny	Dwuliterowy kod ISO 639-1. Obsługiwane ustawienia regionalne to m.in. en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk i zh.
buttonRadius	Opcjonalny	Od 0 do 100
buttonRootNode	Opcjonalny	HTMLDocument lub ShadowRoot
buttonSizeMode	Opcjonalny	statyczne, wypełnienie
buttonType	Opcjonalny	rezerwować, kupować, płacić, przekazywać darowizny, zamawiać, płacić, zwykły, subskrybować

W pliku main.js znajdź metodę renderGooglePayButton() i zastąp ją kodem podanym poniżej.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

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

Wyjaśnienie kodu

Metoda createButton() biblioteki przyjmuje argument konfiguracyjny ButtonOptions, który pozwala określić wygląd i działanie przycisku.

3. Wywołania zwrotne danych płatności

Klient płatności udostępnia mechanizm rejestrowania funkcji, które mają być wywoływane w przypadku wystąpienia określonych zdarzeń. Pierwszy to autoryzacja płatności, a drugi to zmiana danych płatności.

Znajdź komentarz // todo: paymentDataCallbacks w pliku main.js i zastąp go tym kodem.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Następnie znajdź sekcję Event Handlers w main.js i dopisz na jej końcu ten kod:

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Na koniec znajdź komentarz // todo: callbackIntents w main.js i zastąp go tym kodem. W tym laboratorium kodu zaimplementujemy wszystkie 4 intencje.

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free 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: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

Wyjaśnienie kodu

Usługa PaymentDataCallbacks ma 2 usługi podrzędne: jedną do wywołania zwrotnego autoryzacji płatności, a drugą do wywołania zwrotnego zmiany danych płatności.
Jeśli wdrażasz wywołania zwrotne, parametr onPaymentAuthorized jest wymagany. To wywołanie zwrotne jest wywoływane, gdy lista callbackIntents zawiera PAYMENT_AUTHORIZATION w PaymentDataRequest.
onPaymentDataChanged jest opcjonalny. To wywołanie zwrotne jest wywoływane, gdy lista callbackIntents zawiera OFFER, SHIPPING_ADDRESS lub SHIPPING_OPTION w PaymentDataRequest.
Ustaw wartość callbackIntents w PaymentDataRequest, aby wywołać oba wywołania zwrotne w tym ćwiczeniu.

4. Autoryzacja płatności

Autoryzacja płatności służy do rozpoczęcia procesu płatności i potwierdzenia statusu autoryzacji płatności.

Znajdź w main.js funkcję onPaymentAuthorized() dodaną w ostatnim kroku i zastąp ją tym kodem.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Wyjaśnienie kodu

Funkcja wywołania zwrotnego onPaymentAuthorized() jest wywoływana z argumentem PaymentData i musi zwracać obietnicę. W tym przykładzie funkcja losowo wybiera, czy zwrócić sukces, czy błąd. W projekcie wykorzystasz tę możliwość do przetworzenia transakcji za pomocą bramy przy użyciu tokena znalezionego w paymentData o godzinie paymentData.paymentMethodData.tokenizationData.token.

5. Zmiana danych karty

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.

Znajdź w main.js funkcję onPaymentDataChanged() dodaną w ostatnim kroku i zastąp ją tym kodem.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

Wyjaśnienie kodu

Funkcja onPaymentDataChanged() przyjmuje argument IntermediatePaymentData. Ta funkcja jest wywoływana, gdy w arkuszu płatności zmieni się adres dostawy lub opcje dostawy.
Funkcja onPaymentDataChanged() musi zwracać obietnicę, która rozwiązuje obiekt PaymentDataRequestUpdate określający nowe informacje o transakcji, opcje dostawy i błąd. O te dane ma być zaktualizowany arkusz płatności.
redemptionCodes to zestaw kodów promocyjnych wpisanych w arkuszu płatności. Obejmuje kody, które zostały już zatwierdzone.

6. Podsumowanie

Gratulujemy ukończenia tego ćwiczenia! Dowiedziałeś(-aś) się, jak ...

Uruchamianie projektu

Testowanie w Google Chrome

W przeglądarce Google Chrome otwórz plik index.html, klikając Plik > Otwórz plik... w menu głównym Chrome. Chrome wykona main.js, gdy projekt zostanie otwarty w ten sposób. Inne przeglądarki mogą nie zezwalać na wykonywanie kodu JavaScript.

– lub –

Testowanie za pomocą lokalnego serwera WWW

Jeśli masz zainstalowany język Python, uruchom polecenie python3 -m http.server w wierszu poleceń terminala 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 otwórz witrynę pod adresem http://localhost:8000.

Co dalej

Sprawdź listę kontrolną integracji

Dodatkowe materiały

Dołącz do rozmowy na kanale#payments w Discordzie
Obserwuj @GooglePayDevs na X
Oglądaj filmy związane z Google Pay w YouTube