Эта страница переведена с помощью Cloud Translation API.

Google Pay API для Web 101: основы

1. Введение

Что ты построишь

По завершении этой лабораторной работы у вас будет минимально жизнеспособный веб-сайт с работающей интеграцией Google Pay. Этот проект получает платежный токен, который может быть отправлен поставщику платежных услуг для обработки.

Что вы узнаете

Как загрузить и настроить Google Pay API
Как отобразить кнопку Google Pay и обрабатывать клики
Как запросить платежный токен из Google Pay

Что вам понадобится

Текстовый редактор по вашему выбору для редактирования файлов HTML и JavaScript.
Веб-браузер Google Chrome или другой способ протестировать локальный веб-сайт.
Для производства вам понадобится merchantId Google Pay. Регистрация в консоли Google Pay & Wallet займет всего минуту, так что можете позаботиться об этом прямо сейчас.

Следуйте инструкциям, используя Project IDX.

2. Создайте HTML-страницу.

Создание файлов проекта

Создайте на своем компьютере папку с именем gpay-web-101 и внутри этой папки создайте два пустых текстовых файла с именами index.html и main.js Структура каталогов должна выглядеть следующим образом:
```
gpay-web-101/
  index.html
  main.js
```

Откройте index.html в выбранной вами IDE и добавьте следующий код:

<!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>

Объяснение кода

На страницу с идентификатором gpay-container добавляется пустой DIV. Этот элемент DOM будет родительским элементом, в который будет добавлена кнопка Google Pay. Вы можете разместить этот элемент в макете вашего сайта там, где это необходимо.
Тег сценария main.js размещается в DOM после элемента gpay-container . Это необходимо для обеспечения присутствия контейнера DIV в DOM до того, как main.js запросит его. Кроме того, скрипт является синхронным, чтобы обеспечить его загрузку до загрузки pay.js , поскольку метод onGooglePayLoaded() должен существовать до завершения загрузки. Есть и другие способы добиться того же эффекта, но они не будут здесь обсуждаться.
Наконец, pay.js загружается асинхронно и настраивает onGooglePayLoaded() в качестве обработчика onload . Этот метод будет определен в main.js

3. Настройте Google Pay

Для запроса платежа Google Pay требуется объект запроса. Объект, определенный здесь как baseGooglePayRequest содержит минимальные общие настройки для всех запросов. Дополнительные настройки будут добавлены в зависимости от сделанного запроса, который мы рассмотрим в этой лаборатории кода.

Добавьте константы конфигурации Google Pay в пустой файл main.js :

//=============================================================================
// 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);

Объяснение кода

Задайте для постоянной переменной GPAY_BUTTON_CONTAINER_ID идентификатор элемента DOM, используемого на странице HTML в качестве родительского контейнера для кнопки Google Pay.
Создайте объект конфигурации baseGooglePayRequest с соответствующими настройками для вашего приложения. Каждое из свойств и значений можно найти в справочной документации . Значения, показанные в этом примере, могут полностью соответствовать вашим потребностям, а могут и не соответствовать им, поэтому внимательно изучите их.
Обновите свойства merchantId и merchantName указав свои собственные значения. Эти поля являются необязательными, если используется среда TEST .

Ресурсы

Сообщение в блоге : Хотите упростить оплату покупок с помощью Google Pay? Настройте способы оплаты!
Справочник по API : документация по объектам запросов Google Pay API
Справочник по API . Дополнительную информацию о разрешенных методах авторизации, разрешенных сетях карт и спецификациях токенизации, включая правильное значение шлюза, см. в разделе PaymentMethod .

4. Добавьте платежный клиент

Платежный клиент используется для отправки запросов на оплату и регистрации обратных вызовов. В этой кодовой лаборатории мы будем делать только запросы на оплату. Кроме того, вы можете настроить PaymentDataCallbacks для обработки изменений платежных данных или авторизации. Однако эти сложные темы не рассматриваются в этой лаборатории кода.

Добавьте этот клиентский код в конец 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;
}

Объяснение кода

Переменная paymentsClient будет хранить экземпляр для клиента после его создания. Наш код не обращается к этой переменной напрямую, а всегда с помощью метода getGooglePaymentsClient() .
Метод getGooglePaymentsClient() проверяет, был ли уже создан экземпляр клиента, и возвращает этот экземпляр. Если экземпляр ранее не был создан, он создается, сохраняется и возвращается. Этот метод гарантирует, что на протяжении всего срока службы этого сценария будет создан и использован только один экземпляр.
Для создания экземпляра клиента вызывается метод PaymentsClient() . В этом примере мы сообщаем клиенту, что находимся в TEST среде. Альтернатива – PRODUCTION . Однако TEST используется по умолчанию и может быть опущен.

5. Добавьте помощников

Следующие вспомогательные функции используются позже в сценарии и были добавлены исключительно с целью улучшения читаемости и удобства обслуживания кода.

Добавьте вспомогательные функции в конец 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);
}

Объяснение кода

deepCopy() — это утилита, которая использует сериализацию и десериализацию JSON для создания глубокой копии предоставленного объекта. Это удобный способ клонировать объекты, не беспокоясь об общих ссылках.
renderGooglePayButton() — это утилита, которая вызывает библиотечный метод createButton() для отображения кнопки Google Pay. Передаваемый аргумент представляет собой набор параметров , которые определяют, как должна вести себя кнопка, например, регистрация функции onGooglePaymentButtonClicked() для обработки нажатий кнопок.

6. Добавьте обработчики событий

В этом скрипте мы настраиваем два обработчика событий. Первый вызывается, когда библиотека pay.js завершает загрузку, а второй вызывается при нажатии кнопки Google Pay.

Добавьте обработчики событий в конец 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);
}

Объяснение кода

onGooglePayLoaded() вызывается, когда скрипт pay.js завершил загрузку, как определено в файле HTML. Метод isReadyToPay() вызывается, чтобы определить, показывать или нет кнопку Google Pay. Если потребитель готов заплатить (то есть он добавил способ оплаты в свой Google Кошелек), отображается кнопка Google Pay.
onGooglePaymentButtonClicked() вызывается при нажатии кнопки Google Pay. Этот метод вызывает библиотечный метод loadPaymentData() , который используется для получения платежного токена. Получив платежный токен, вы отправите его на свой платежный шлюз для обработки транзакции. transactionInfo описывает транзакцию, которая должна быть обработана нажатием этой кнопки.

7. Заключение

Поздравляем с завершением этой Codelab! Вы узнали, как интегрировать API Google Pay в веб-сайт.

Запустить проект

Протестируйте с помощью Google Chrome

В веб-браузере Google Chrome откройте index.html , выбрав «Файл» > «Открыть файл...» в главном меню Chrome. Chrome выполнит main.js , когда проект будет открыт таким образом. Другие веб-браузеры могут не разрешать выполнение JavaScript.

- или -

Тестирование на локальном веб-сервере

Если у вас установлен Python, запустите python3 -m http.server из командной строки терминала в корневой папке pay-web-101 .

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

Затем посетите свой сайт по адресу http://localhost:8000 .

Куда идти дальше

Дополнительные ресурсы

Присоединяйтесь к обсуждению на канале #pays в Discord.
Подпишитесь на @GooglePayDevs на X
Посмотрите видеоролики о Google Pay на YouTube.