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

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

Минут осталось: 21

Google Pay API для Web 101:

Основы

О практической работе

Последнее обновление: мая 21, 2025

Авторы: James O’Reilly

1. Введение

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

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

Чему вы научитесь

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

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

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

Продолжайте использовать Firebase Studio

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

Создать файлы проекта

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

Откройте index.html в предпочитаемой вами среде разработки и добавьте следующий код:

<!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 добавляется на страницу с идентификатором 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. Заключение

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

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

Тест с 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 .

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

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

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

Сообщить об ошибке