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

Szybka płatność 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 kontach Google. W tym laboratorium wykorzystasz bibliotekę klienta Google Pay dla internetu, aby ulepszyć proces płatności w uproszczonym przykładowym sklepie internetowym. Dzięki temu będzie on szybszy, wygodniejszy i bezpieczniejszy, co przełoży się na większą liczbę konwersji i zadowolonych klientów.

Auto T-Shirt Shop to innowacyjny sklep, który wykorzystuje najnowsze osiągnięcia w dziedzinie sztucznej inteligencji i korzysta z informacji takich jak preferencje dotyczące stylu, pogoda, pora roku i trendy w modzie, aby sugerować najbardziej odpowiedni produkt do zakupu.

Wskaźniki zaangażowania w przypadku tego sklepu są bardzo wysokie. Niestety dane odzwierciedlają też dużą liczbę porzuceń podczas procesu płatności. Jeden z właścicieli projektu postanowił to zmienić. Przypomniał sobie, że widział film pokazujący obiecujące wyniki, jakie Google Pay przynosi podobnym witrynom. Postanowił więc spróbować i powierzył Ci integrację tej usługi.

Co utworzysz

W tym samouczku dowiesz się, jak zintegrować Google Pay z istniejącą witryną, w tym jak sprawdzić, czy użytkownik może zapłacić za pomocą formy płatności obsługiwanej przez Google Pay, jak umieścić i zaprojektować przycisk płatności oraz jak przeprowadzić transakcję.

Czego się nauczysz

Integracja Google Pay z dotychczasową stroną płatności
Jak wybrać preferowaną formę płatności
Jak sprawdzić, czy użytkownik jest gotowy do płacenia za pomocą Google Pay

Wymagania

komputer z dostępem do internetu,
Podstawowa znajomość języka JavaScript

Uruchamianie przykładowej witryny na platformie glitch.com

Aby jak najszybciej rozpocząć pracę, ten codelab został udostępniony na platformie 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 udostępniania aplikacji internetowych.

Aby rozpocząć, kliknij przycisk poniżej, aby udostępnić nowe środowisko programistyczne w Glitchu, które jest już skonfigurowane z kopią tych ćwiczeń z programowania.

Uruchom środowisko programistyczne na Glitch.com

Od tego momentu możesz używać edytora kodu w Glitchu do modyfikowania plików. Aby zacząć wyświetlać aplikację, użyj menu Pokaż u góry i wybierz W nowym oknie.

Przejrzyj przykładową witrynę

Jak widać, repozytorium ma prostą strukturę plików. Głównym celem tego laboratorium jest umożliwienie Ci dostosowania tej integracji do istniejących i przyszłych aplikacji niezależnie od platformy, bibliotek lub narzędzi, z którymi zdecydujesz się pracować.

Poznawanie witryny

Ta demonstracyjna platforma została stworzona tak, aby przypominała Twoją obecną lub potencjalną aplikację przed dodaniem możliwości zakupu. Chociaż zalecamy pracę na tej aplikacji demonstracyjnej, możesz użyć tego laboratorium do zintegrowania Google Pay z dotychczasowymi aplikacjami.

Jeśli nie została jeszcze przeprowadzona, otwórz witrynę demonstracyjną w jej obecnej postaci. Aby to zrobić, kliknij przycisk Pokaż, jeśli używasz Glitcha, lub otwórz adres URL, pod którym działa Twój lokalny serwer internetowy.

Witryna demonstracyjna nie jest niczym zaskakującym, prawda? Strona szczegółów produktu ze zdjęciem, ceną, opisem, selektorami i przyciskiem, który przenosi użytkownika do fikcyjnego i zwykłego formularza płatności.

Celem tego modułu jest zastąpienie tego procesu dwoma kliknięciami obsługiwanymi przez Google Pay.

Zaplanujmy to!

Aby lepiej zrozumieć tę integrację, podzieliliśmy proces na te podstawowe kroki:

Wczytywanie biblioteki
Określanie możliwości płacenia za pomocą Google Pay
Wyświetlanie przycisku płatności Google Pay
Tworzenie i wysyłanie prośby o płatność
Zbieranie wyników

Dodaj `script` tag

Aby zacząć korzystać z interfejsu Google Pay API, musisz najpierw wczytać bibliotekę JavaScript. Aby to zrobić, w pliku HTML, z którego chcesz wywołać interfejs API, umieść tag script, w tym atrybut src, który wskazuje zewnętrzną bibliotekę JavaScript.

W tym ćwiczeniu otwórz plik index.html. Powinien w nim być już tag skryptu:

<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 asynchroniczne wczytywanie i wykonywanie skryptu wraz z pozostałą częścią strony, dzięki czemu nie wpływa na czas pierwszego wczytania dokumentu.
onload pomaga odroczyć wykonanie kodu, który zależy od tej biblioteki, do momentu załadowania skryptu. Po wykonaniu tej czynności uruchamiana jest funkcja określona w tym atrybucie. W tym przypadku funkcja to onGooglePayLoaded.

Utwórz instancję klienta API

Po załadowaniu skryptu wszystko jest gotowe do korzystania z tej biblioteki. Zacznij od utworzenia instancji obiektu klienta, 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 tym kodem.

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

Klient płatności jest inicjowany za pomocą obiektu PaymentOptions. Ustawienie wartości environment na TEST umożliwia eksperymentowanie z przykładowymi informacjami o płatnościach w całej integracji. Gdy będziesz gotowy(-a) do utworzenia operacji obsługujących rzeczywiste transakcje, możesz zmienić wartość właściwości environment na PRODUCTION.

Omówienie

Biblioteka klienta JavaScript Google Pay API została wczytana. Teraz skonfigurujmy go tak, aby wykonywał wywołania interfejsu API.

Wszystkie zmiany w kodzie w pozostałej części tego laboratorium zostaną wprowadzone w pliku index.js.

szkielet,

Za każdym razem, gdy komunikujesz się z Google Pay API, musisz uwzględniać w żądaniach szereg parametrów konfiguracji, takich jak wersja interfejsu API, z której korzystasz. Na potrzeby tego laboratorium obiekt zawiera też informacje o formach płatności akceptowanych w aplikacji. 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 dany użytkownik może zapłacić za pomocą Google Pay, wymagane są tylko właściwości type i parameters.

Konfiguracja formy płatności

W tym przykładzie akceptujesz tylko jedną konfigurację, która umożliwia płatności kartami Mastercard i Visa w formie tokenizowanej i głównego numeru konta (PAN).

Oto jak powinna wyglądać konfiguracja w index.js:

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

Mechanizmy uwierzytelniania karty: podczas dokonywania płatności karty można wybierać na podstawie sposobu uwierzytelniania informacji o transakcji w procesorze lub bramie:

W przypadku korzystania z uwierzytelniania za pomocą głównego numeru konta (PAN) do podmiotu przetwarzającego płatności przesyłany jest numer konta karty oraz miesiąc i rok utraty ważności. Dzięki temu Twoi klienci mogą używać dowolnej wcześniej zabezpieczonej karty powiązanej z ich kontami Google.
Dynamiczne uwierzytelnianie oparte na kryptogramie działa w połączeniu z tokenizacją karty, czyli mechanizmem, który zastępuje dane karty klienta losową wartością, której nikt poza wydawcą karty klienta nie może odczytać. W połączeniu z dynamicznymi kryptogramami zapewnia to, że token wysyłany do procesora jest zawsze inny w przypadku każdej transakcji, co znacznie zwiększa bezpieczeństwo tych operacji.

Podsumowanie zdobytej wiedzy

Podsumujmy.

W witrynie zdefiniowano jedną formę płatności, która ma być akceptowana, i będziesz korzystać z wersji 2.0 interfejsu API. Wynikowa konfiguracja powinna wyglądać tak:

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

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

Skoro masz już gotową konfigurację podstawową, przejdźmy do przyjemniejszej części.

Jednym z głównych celów Google Pay jest zapewnienie 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 też tych, w których nie może tego robić. Korzystanie z żądania isReadyToPay pozwala określić gotowość do płacenia za pomocą Google Pay i umożliwia odpowiednie zmodyfikowanie działania witryny.

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

Najpierw musisz sprawdzić, czy konkretny użytkownik, który ma dokonać płatności w Twojej witrynie, może użyć do tego Google Pay. W tym celu musisz określić wersję Google Pay API i dozwolone formy płatności w Twojej witrynie. Zawiera on dokładnie to samo, co obiekt konfiguracji podstawowej zdefiniowany w poprzednim kroku.

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

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 połączenie się nie powiedzie lub zwróci nieudaną odpowiedź, w kontekście Google Pay nie trzeba podejmować żadnych dalszych działań. W takiej sytuacji najbardziej odpowiednim kolejnym krokiem byłoby wyświetlenie dodatkowego interfejsu, który obsługuje inne formy płatności.

Jeśli odpowiedź jest pozytywna, możesz zezwolić użytkownikom na korzystanie z Google Pay. W tym celu dodaj przycisk, który będzie inicjować proces płatności po aktywacji przez użytkownika (np. po kliknięciu przycisku).

Dodawanie przycisku płatności Google Pay

Do rozpoczęcia procesu płatności możesz użyć dowolnego przycisku zgodnego z wytycznymi dotyczącymi marki Google Pay, ale zalecamy wygenerowanie go za pomocą Google Pay API. W ten sposób nie tylko zapewnisz prawidłowe stosowanie wytycznych dotyczących marki, ale też skorzystasz z innych ulepszeń wbudowanych bezpośrednio w przycisk, 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 kod:

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ą podczas korzystania z createButton jest onClick, która jest niezbędna do określenia obiektu lub funkcji wywołania zwrotnego, która ma być uruchamiana za każdym razem, gdy użytkownicy aktywują przycisk. buttonColor i buttonType umożliwiają dostosowanie wyglądu przycisku. Dostosuj je do wymagań motywu i interfejsu aplikacji.

Po utworzeniu przycisku wystarczy dodać go do odpowiedniego węzła w DOM. W tym przykładzie do tego celu użyto węzła div oznaczonego jako buy-now.

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

Przygotuj prośbę o płatność

W tym momencie interfejs Google Pay API jest już załadowany i ustalono, że użytkownik Twojej witryny może używać Google Pay do dokonywania płatności. W rezultacie w interfejsie wyświetlony został przycisk płatności Google Pay i użytkownik jest gotowy do zainicjowania transakcji. Teraz należy wczytać końcowy arkusz płatności zawierający formy płatności dostępne dla różnych zalogowanych użytkowników.

Podobnie jak w przypadku definicji żądania isReadyToPay, to wywołanie również wymaga właściwości z wcześniej zdefiniowanego obiektu konfiguracji podstawowej (apiVersion, apiVersionMinor i allowedPaymentMethods) oraz kilku nowych właściwości. Tym razem w formach płatności znajdują się nowa właściwość tokenizationSpecification i dodatkowe parameters, które są istotne dla tego żądania. Dodatkowo należy dodać transactionInfo i merchantInfo.

Dodawanie dodatkowych wymaganych informacji do form płatności

Zacznij od utworzenia kopii podstawowej formy płatności kartą, która była używana wcześniej. Ta forma płatności kartą wymaga teraz właściwości tokenizationSpecification, która określa sposób obsługi danych związanych z wybraną formą płatności, a także dalsze wymagania dotyczące danych potrzebnych do przeprowadzenia transakcji: w tym przykładzie pełny adres rozliczeniowy i numer telefonu.

Usługa `tokenizationSpecification`

Specyfikacja tokenizacji określa, jak wybrana przez klientów forma płatności jest obsługiwana i używana do realizacji transakcji.

Obsługiwane są 2 rodzaje strategii obsługi. Jeśli przetwarzasz transakcję płatniczą na serwerach zgodnych ze standardem PCI DSS, użyj typu specyfikacji DIRECT. W tym przykładzie do przetwarzania płatności używasz bramy płatności, dlatego ustawiasz typ specyfikacji PAYMENT_GATEWAY.