Google Pay API для Web 201: расширенный уровень

Google Pay API для Web 201: Расширенный

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

Google Pay API для Web 201:

Расширенный

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

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

Авторы: James O’Reilly

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

1. Введение

Эта кодовая лаборатория является продолжением Google Pay API for Web 101: Basics и опирается на код, написанный в этой кодовой лаборатории. Чтобы выполнить эту кодовую лабу, обязательно сначала выполните ее.

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

Как настроить кнопку Google Pay
Как начать процесс оплаты
Как подтвердить статус авторизации платежа
Как обрабатывать изменения адреса доставки
Как обращаться с кодами погашения

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

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

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

2. Настройка кнопок

Это краткий обзор ButtonOptions . Более подробное объяснение см. в документации.

Вариант	Необходимость	Ценности
onClick	Необходимый	Имя обработчика событий JavaScript
разрешенныеСпособыОплаты	Необязательный	`PaymentMethod[]`
Цвет кнопки	Необязательный	по умолчанию, черный, белый
кнопкаLocale	Необязательный	Двухбуквенный код ISO 639-1. Поддерживаемые локали включают en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk и zh.
кнопкаРадиус	Необязательный	от 0 до 100
кнопкаRootNode	Необязательный	HTMLDocument или ShadowRoot
buttonSizeMode	Необязательный	статический, заполнять
Тип кнопки	Необязательный	забронировать, купить, оформить заказ, пожертвовать, заказать, оплатить, простой, подписаться

Найдите метод renderGooglePayButton() в файле main.js и замените его кодом, указанным здесь.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

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

Метод библиотеки createButton() принимает аргумент конфигурации ButtonOptions , который позволяет вам определить, как должна выглядеть и вести себя кнопка.

3. Обратные вызовы платежных данных

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

Найдите комментарий // todo: paymentDataCallbacks в main.js и замените его этим кодом.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Затем найдите раздел « Event Handlers » в файле main.js и добавьте следующий код в конец раздела.

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Наконец, найдите комментарий // todo: callbackIntents в main.js и замените его этим кодом. В этой кодовой лаборатории мы реализуем все 4 намерения.

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

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

Свойство PaymentDataCallbacks имеет два подсвойства: одно для обратного вызова авторизации платежа, а второе для обратного вызова изменения платежных данных.
При реализации обратных вызовов требуется onPaymentAuthorized . Этот обратный вызов вызывается, когда список callbackIntents содержит PAYMENT_AUTHORIZATION в PaymentDataRequest .
onPaymentDataChanged не является обязательным . Этот обратный вызов вызывается, когда список callbackIntents содержит OFFER , SHIPPING_ADDRESS или SHIPPING_OPTION в PaymentDataRequest .
Установите callbackIntents в PaymentDataRequest для запуска обоих обратных вызовов для этой кодовой лаборатории.

4. Авторизация платежа

Авторизация платежей используется для запуска процесса оплаты и подтверждения статуса авторизации платежа.

Найдите функцию onPaymentAuthorized() в main.js , которую вы добавили на последнем шаге, и замените ее следующим кодом.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

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

Функция обратного вызова onPaymentAuthorized() вызывается с аргументом PaymentData и должна возвращать обещание. В этом примере функция случайным образом выбирает, возвращать ли успех или ошибку. В вашем проекте вы будете использовать эту возможность для обработки транзакции с вашим шлюзом, используя токен, найденный в paymentData в paymentData.paymentMethodData.tokenizationData.token .

5. Изменение платежных данных

Dynamic Price Updates позволяет торговцу динамически обновлять параметры доставки и информацию о транзакции на основе выбранного адреса доставки. Кроме того, вы можете динамически обновлять информацию о транзакции на основе выбранного варианта доставки.

Найдите функцию onPaymentDataChanged() в main.js , которую вы добавили на последнем шаге, и замените ее следующим кодом.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

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

Функция onPaymentDataChanged() принимает IntermediatePaymentData в качестве аргумента. Эта функция вызывается, когда адрес доставки или параметры доставки изменяются в платежном листе.
Функция onPaymentDataChanged() должна возвращать обещание, разрешающее объект PaymentDataRequestUpdate , который указывает новую информацию о транзакции, параметры доставки и ошибку для обновления платежного листа.
redemptionCodes — это набор промокодов, введенных в платежный лист. Включает коды, которые уже были одобрены.

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

Поздравляем с завершением этой Codelab! Вы узнали, как ...

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

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

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