Google Pay API for Web 201: Zaawansowane

1. Wprowadzenie

Ten warsztat jest kontynuacją Google Pay API for Web 101: Basics i wykorzystuje kod napisany w tym warsztacie. Aby ukończyć to ćwiczenie, musisz najpierw wykonać to ćwiczenie.

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 postępować z kodami wykorzystania

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.

Postępuj zgodnie z instrukcjami w Firebase Studio

Otwórz w Firebase Studio

2. Dostosowywanie przycisku

Oto krótki przegląd ButtonOptions. Aby uzyskać bardziej szczegółowe wyjaśnienie, zapoznaj się z dokumentacją

Opcja

Niezbędność

Wartości

onClick

Wymagane

Nazwa obsługi zdarzenia JavaScript

allowedPaymentMethods

Opcjonalny

PaymentMethod[]

buttonColor

Opcjonalny

domyślny, czarny, biały

buttonLocale

Opcjonalny

2-literowy kod ISO 639-1.
Obsługiwane języki: 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

book, buy, checkout, donate, order, pay, plain, subscribe

W pliku main.js odszukaj metodę renderGooglePayButton() i zastąp ją kodem podanym tutaj.

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

  1. Metoda createButton() z biblioteki korzysta z argumentu konfiguracji ButtonOptions, który pozwala określić wygląd i działanie przycisku.

3. Wywołania zwrotne dotyczące danych płatności

Klient płatności udostępnia mechanizm rejestrowania funkcji, które mają obsługiwać określone zdarzenia. Pierwszym jest autoryzacja płatności, a drugim zmiana danych do płatności.

  1. Znajdź w pliku main.js komentarz // todo: paymentDataCallbacks i zastąp go tym kodem.
    paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},
  2. Następnie odszukaj sekcję Event Handlers w pliku main.js i dodaj na jej końcu podany niżej kod.
    function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}
  3. Na koniec znajdź komentarz // todo: callbackIntents w elementach main.js i zastąp go tym kodem. W tym laboratorium programistycznym zaimplementujemy wszystkie 4 zamiary.
    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

  1. Właściwość PaymentDataCallbacks ma 2 właściwości podrzędne: jedną dla wywołania zwrotnego autoryzacji płatności i drugą dla wywołania zwrotnego zmiany danych płatności.
  2. Jeśli implementujesz wywołania zwrotne, onPaymentAuthorized jest wymagany. To wywołanie zwrotne jest wywoływane, gdy lista callbackIntents zawiera element PAYMENT_AUTHORIZATION w elementach PaymentDataRequest.
  3. onPaymentDataChanged jest opcjonalny. Ten wywoływany z powrotem kod jest wykonywany, gdy lista callbackIntents zawiera wartość OFFER, SHIPPING_ADDRESS lub SHIPPING_OPTION w polu PaymentDataRequest.
  4. Aby wywołać oba wywołania zwrotne w ramach tego ćwiczenia z programowaniem, ustaw callbackIntents w funkcji PaymentDataRequest.

4. Autoryzacja płatności

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

Znajdź w funkcji main.js, którą dodano w ostatnim kroku, funkcję onPaymentAuthorized() 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

  1. 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ć wartość true czy false. W projekcie wykorzystasz tę możliwość do przetworzenia transakcji z bramą, używając tokena znalezionego w paymentData o godz. 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 funkcji main.js, którą dodano w ostatnim kroku, funkcję onPaymentDataChanged() 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

  1. Funkcja onPaymentDataChanged() przyjmuje jako argument IntermediatePaymentData. Ta funkcja jest wywoływana, gdy w arkuszu płatności zmieni się adres dostawy lub opcje dostawy.
  2. 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.
  3. 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 Codelab. Poznasz te zagadnienia:

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 katalogu 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 swoją witrynę pod adresem http://localhost:8000.

Co dalej

Dodatkowe materiały