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

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

1. Введение

Что вы построите

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

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

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

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

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

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

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>

пояснение к коду

На страницу добавляется пустой DIV с ID gpay-container . Этот 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 : документация по объектам запросов API Google Pay.
Справочник 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 Wallet), то кнопка Google Pay отображается.
Метод onGooglePaymentButtonClicked() вызывается при нажатии кнопки Google Pay. Этот метод вызывает метод библиотеки loadPaymentData() , который используется для получения платежного токена. Получив платежный токен, вы отправляете его в свой платежный шлюз для обработки транзакции. transactionInfo описывает транзакцию, которая должна быть обработана при нажатии этой кнопки.

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

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

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

Протестировано в Google Chrome

В браузере Google Chrome откройте index.html , используя меню «Файл» > «Открыть файл...» . 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 .

Что делать дальше?

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

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