Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Płać szybko w internecie dzięki Google Pay

Google Pay API umożliwia użytkownikom płacenie w dowolnym miejscu przy użyciu danych karty zapisanych na ich koncie Google. W tym module korzystamy z biblioteki klienta Google Pay na stronach internetowych, aby zwiększać wygodę płatności w uproszczonym sklepie internetowym, tworząc szybsze, wygodniejsze i bezpieczniejsze rozwiązanie, które z kolei prowadzi do większej liczby konwersji i większego zadowolenia klientów.

Auto-Koszulka to nowatorski sklep, który wykorzystuje najnowsze postępy w dziedzinie sztucznej inteligencji i wykorzystuje takie informacje jak preferencje dotyczące stylu, pogoda, pora roku i trendy w modzie, aby zaproponować Ci najbardziej odpowiedni produkt.

Dane o zaangażowaniu dla tego sklepu są dostępne przez dachu. Niestety dane te odzwierciedlają dużą liczbę porzuceń podczas procesu płatności. Jeden z właścicieli projektu decydował się na rozwiązanie tego problemu. Jeden z właścicieli projektu zauważył, że film pokazuje obiecujące wyniki, jakie dzięki Google Pay udało się uzyskać w podobnych witrynach. Zdecydował się więc z niego skorzystać i zaufać Ci, że zajmiesz się integracją.

Co utworzysz

Dzięki nim dowiesz się, jak zintegrować Google Pay z dotychczasową witryną, aby określić, czy użytkownik może płacić przy użyciu formy płatności obsługiwanej przez Google Pay, gdzie umieścić i projektować przycisk płatności oraz zrealizować transakcję.

Czego się nauczysz

Jak zintegrować Google Pay z istniejącą stroną płatności
Jak wybrać preferowaną formę płatności
Jak określić, czy użytkownik jest gotowy do płacenia za pomocą Google Pay

Czego potrzebujesz

komputera z dostępem do internetu,
Podstawowa znajomość JavaScriptu

Uruchom przykładową witrynę na glitch.com

Aby można było szybko rozpocząć pracę, te ćwiczenia z programowania zostały udostępnione na glitch.com. Glitch to bezpłatne środowisko internetowe, które udostępnia edytor kodu oraz funkcje hostingu i wdrażania, których możesz używać do tworzenia i obsługiwania aplikacji internetowych.

Aby rozpocząć, użyj przycisku poniżej. Udostępnij w Glitch nowe środowisko programistyczne z kopią tych ćwiczeń z programowania.

Zacznij tworzyć środowisko programistyczne Glitch.com

Następnie możesz modyfikować pliki w edytorze kodu w Glitch. Aby rozpocząć wyświetlanie aplikacji, użyj menu Pokaż u góry i wybierz W nowym oknie.

Przeglądaj przykładowe strony

Jak widać, repozytorium ma niekompletną strukturę. Głównym zadaniem tego ćwiczenia z programowania jest umożliwienie Ci integracji tej integracji z dotychczasowymi i przyszłymi aplikacjami niezależnie od platformy, bibliotek czy narzędzi, z którymi chcesz współpracować.

Przeglądanie witryny

Platforma demonstracyjna została zmodyfikowana w taki sposób, że przypominająca wygląd aplikacji lub obecnych aplikacji przed dodaniem sposobu zakupu. Zalecamy zapoznanie się z tą aplikacją demonstracyjną, ale możesz wykorzystać ją do integracji Google Pay z dotychczasowymi aplikacjami.

Teraz otwórz wersję demonstracyjną strony demonstracyjnej, jeśli jeszcze jej nie masz. Aby to zrobić, kliknij przycisk Pokaż, jeśli korzystasz z usługi Glitch, lub otwórz adres URL serwera, na którym działa Twój lokalny serwer WWW.

Nic nie zaskakuje – prawda? Strona ze szczegółami produktu, razem ze zdjęciem, ceną, opisem, niektórymi opcjami i przyciskiem kierującym do wymyślonej i zwykłej formy płatności.

Celem tego modułu jest zastąpienie go dwukrotnym kliknięciem dzięki Google Pay.

Zaplanujmy to!

Aby lepiej zrozumieć tę integrację, proces składa się z tych podstawowych kroków:

Wczytaj bibliotekę
Określ, czy możesz płacić za pomocą Google Pay
Pokaż przycisk, aby płacić za pomocą Google Pay
Utwórz i wyślij prośbę o płatność
Zbieraj wyniki

Dodaj tag `script`

Aby zacząć korzystać z Google Pay API, musisz najpierw załadować bibliotekę JavaScript. Aby to zrobić, umieść w pliku HTML tag script, skąd chcesz wywołać interfejs API. Dołącz atrybut src wskazujący zewnętrzną bibliotekę JavaScript.

Otwórz plik index.html z tym ćwiczeniem. Tag skryptu powinien być już widoczny dla Ciebie:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

Oprócz atrybutu src dodano 2 inne atrybuty.

async umożliwia ładowanie i uruchamianie skryptu asynchronicznie wzdłuż reszty strony, dzięki czemu czas pierwszego ładowania dokumentu nie ulegnie zmianie.
onload pozwala opóźnić wykonywanie kodu zależnego od tej biblioteki, dopóki skrypt nie zostanie wczytany. Gdy to zrobisz, funkcja określona w tym atrybucie będzie uruchamiana. W tym przypadku jest to onGooglePayLoaded.

Tworzenie instancji klienta interfejsu API

Po załadowaniu skryptu wszystko jest gotowe do używania tej biblioteki. Najpierw utwórz instancję obiektu klienckiego, którego będziesz później używać do wywoływania Google Pay API.

Edytuj plik index.js, który jest już częścią struktury plików w tym projekcie. Zastąp funkcję onGooglePayLoaded poniższym kodem.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

Klient płatności inicjuje się za pomocą obiektu PaymentOptions. Ustawienie environment na TEST umożliwia eksperymentowanie z przykładowymi danymi karty w całej integracji. Gdy uznasz, że możesz już utworzyć operacje obsługujące prawdziwe transakcje, możesz zmienić właściwość environment na PRODUCTION.

Przegląd

Wczytaliśmy bibliotekę klienta JavaScript Google Pay API. Skonfigurujmy go tak, aby wywoływał dla nas wywołania interfejsu API.

Pozostałe zmiany w kodzie programowania zostaną wprowadzone w pliku index.js.

Szkielet

Za każdym razem, gdy komunikujesz się z Google Pay API, w żądaniach należy podać kilka parametrów konfiguracyjnych, takich jak wersja interfejsu API, na który kierujesz reklamy. Na potrzeby tych ćwiczeń obiekt zawiera dodatkowo informacje o formach płatności akceptowanych w Twoim zgłoszeniu. Ostateczna struktura wygląda tak:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

Właściwość allowedPaymentMethods przyjmuje listę form płatności. W przypadku każdej formy płatności musisz podać te właściwości:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Aby określić, czy użytkownik może płacić za pomocą Google Pay, tylko właściwości type i parameters są wymagane.

Konfiguracja formy płatności

W tym przykładzie zaakceptujesz tylko jedną konfigurację, która pozwoli na dokonywanie płatności kartą Mastercard i Visa, zarówno w formie formularza tokenowanego, jak i głównego numeru konta (PAN).

Oto jak skonfigurować konfigurację w index.js:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

Informacje o mechanizmach uwierzytelniania kart: podczas dokonywania płatności można wybrać kartę na podstawie sposobu uwierzytelniania informacji o transakcji względem firmy przetwarzającej płatności lub bramy:

Gdy używane jest uwierzytelnianie numeru głównego konta (PAN), numer konta karty oraz data ważności i miesiąc ważności są wysyłane do podmiotu obsługującego płatności. Dzięki temu Twoi klienci będą mogli korzystać ze wszystkich wcześniej zabezpieczonych kart powiązanych z ich kontami Google.
Dynamiczne uwierzytelnianie oparte na kryptogramach działa w połączeniu z tokenizacją kart, mechanizmem zastępującym dane karty klienta losową wartością, której nie zna nikt z wystawcy karty klienta. Dzięki temu w połączeniu z dynamicznymi kryptogramami token wysyłany do procesora jest zawsze inny dla każdej transakcji, co znacznie zwiększa bezpieczeństwo tych operacji.

Podsumowanie zdobytej wiedzy

Podsumowanie.

Zdefiniowano jedną formę płatności do akceptowania w witrynie, a Ty zaczniesz korzystać z interfejsu API w wersji 2.0. Tak powinna wyglądać konfiguracja:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Teraz, gdy masz już podstawową konfigurację, przejdźmy do części zabawnej.

Jednym z głównych celów Google Pay jest umożliwienie użytkownikom szybszego i wygodniejszego procesu płatności. Dotyczy to nie tylko sytuacji, w których użytkownik może korzystać z Google Pay, ale również wtedy, gdy jest to niemożliwe. Żądanie isReadyToPay pozwala określić gotowość do płacenia za pomocą Google Pay i pozwala odpowiednio zmodyfikować sposób korzystania z witryny.

Czy użytkownik może płacić za pomocą Google Pay?

Najpierw sprawdź, czy dany użytkownik, który chce zapłacić w Twojej witrynie, może używać Google Pay. W tym żądaniu musisz określić wersję Google Pay API i dozwolone formy płatności w Twojej witrynie. Właśnie to jest podstawowy obiekt konfiguracji skonfigurowany w poprzednim kroku.

W polu index.js w funkcji onGooglePayLoaded() wklej ten fragment:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

Jeśli wywołanie nie powiedzie się lub zostanie zwrócone z nieudaną odpowiedzią, nie musisz nic więcej robić w kontekście Google Pay. W takiej sytuacji najlepiej użyć dodatkowego interfejsu, który obsługuje inne formy płatności.

Jeśli jednak odpowiedź się powiedzie, możesz umożliwić użytkownikom korzystanie z Google Pay, dodając przycisk, który umożliwi rozpoczęcie procesu płatności po aktywacji użytkownika (na przykład kliknięcie przycisku).

Dodawanie przycisku do płacenia za pomocą Google Pay

Możesz użyć dowolnego przycisku zgodnego ze wskazówkami dotyczącymi marki, aby rozpocząć proces płatności, ale zalecamy wygenerowanie go przy użyciu Google Pay API. Dzięki temu nie tylko uzyskasz dokładne wskazówki dotyczące korzystania z marki, ale także skorzystasz z innych ulepszeń, takich jak lokalizacja.

Aby wygenerować przycisk, użyj metody createButton w obiekcie PaymentsClient, w tym ButtonOptions, aby skonfigurować przycisk.

W polu index.js w funkcji createAndAddButton() wklej ten fragment:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

Jedyną wymaganą właściwością w przypadku createButton jest onClick, która jest wymagana do określenia obiektu wywołania lub funkcji wywołania zwrotnego za każdym razem, gdy użytkownik aktywuje przycisk. Elementy buttonColor i buttonType pozwalają dostosować wygląd przycisku. Dostosuj do nich swój motyw i wymagania interfejsu.

Po jego utworzeniu wystarczy tylko dodać go do odpowiedniego węzła w DOM. W tym przykładzie użyto węzła div określonego za pomocą buy-now.

Zwróć uwagę, że masz też zdefiniowaną funkcję obsługi zdarzeń kliknięcia przycisku. W następnej sekcji użyjesz tej funkcji, by poprosić o formę płatności.

Przygotowanie prośby o płatność

Na tym etapie załadowano Google Pay API i stwierdziłeś, że użytkownik Twojej strony może używać Google Pay do dokonywania płatności. W efekcie przycisk płatności Google Pay jest widoczny w interfejsie, a użytkownik jest gotowy do zainicjowania transakcji. Czas wczytać ostatni arkusz zawierający formy płatności dostępne dla różnych zalogowanych użytkowników.

Tak jak poprzednio, podczas definiowania żądania isReadyToPay wywołanie to wymaga też właściwości w podstawowym obiekcie konfiguracji (wcześniej, apiVersion, apiVersionMinor i allowedPaymentMethods), a nie tylko niektórych nowych. Tymczasem mamy nową formę płatności, tokenizationSpecification i dodatkową parameters, które są powiązane z Twoją formą płatności. Musisz też dodać transactionInfo i merchantInfo.

Podaj dodatkowe wymagane informacje w formach płatności

Zacznij od utworzenia kopii podstawowej formy płatności kartą. Aby można było użyć tej formy płatności, karta musi mieć właściwość tokenizationSpecification, aby określić sposób obsługi danych powiązanych z wybraną formą płatności, a także dodatkowe wymagania związane z danymi transakcji: w tym przykładzie pełny adres rozliczeniowy i numer telefonu.

Właściwość `tokenizationSpecification`

Specyfikacja tokenizacji określa, w jaki sposób korzysta z metody wybranej przez klientów i wykorzystuje ją do realizacji transakcji.

Obsługiwane są 2 rodzaje strategii obsługi. Jeśli przetwarzasz transakcję płatności na serwerach zgodnych ze standardem PCI DSS, użyj typu specyfikacji DIRECT. W tym przykładzie korzystasz z bramy płatności, aby przetwarzać płatności, w związku z czym ustawiasz typ specyfikacji PAYMENT_GATEWAY.