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

1. Введение

Данный практический урок является продолжением урока «Google Pay API для веб-разработки: основы» и основан на коде, написанном в этом уроке. Для выполнения этого урока обязательно сначала выполните тот.

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

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

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

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

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

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

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

Вариант	Необходимость	Ценности
onClick	Необходимый	Название обработчика событий JavaScript
разрешенные методы оплаты	Необязательный	PaymentMethod[]
buttonColor	Необязательный	по умолчанию, черный, белый
buttonLocale	Необязательный	Двухбуквенный код 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.
buttonRadius	Необязательный	от 0 до 100
buttonRootNode	Необязательный	HTMLDocument или ShadowRoot
buttonSizeMode	Необязательный	статический, заполнение
buttonType	Необязательный	забронировать, купить, оформить заказ, пожертвовать, заказать, оплатить, простой, подписаться

Найдите метод 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);
}

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

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

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

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

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

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

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

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

3. Наконец, найдите комментарий // 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.'
       },
     ],
   },
   

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

1. Свойство PaymentDataCallbacks имеет два подсвойства: одно для обратного вызова авторизации платежа, а второе — для обратного вызова при изменении данных платежа.
2. При реализации коллбэков требуется onPaymentAuthorized . Этот коллбэк вызывается, когда список callbackIntents содержит PAYMENT_AUTHORIZATION в объекте PaymentDataRequest .
3. onPaymentDataChanged является необязательным . Этот коллбэк вызывается, когда список callbackIntents содержит OFFER , SHIPPING_ADDRESS или SHIPPING_OPTION в PaymentDataRequest .
4. Установите параметры 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);
  });
}

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

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

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

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

Найдите функцию 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);
  });
}

Функция обратного вызова INITIALIZE может срабатывать несколько раз в рамках одного вызова loadPaymentData() , поэтому необходимо убедиться, что вы можете обрабатывать несколько вызовов этой функции. Например, когда пользователь меняет учетную запись, onPaymentDataChanged() вызывается снова с INITIALIZE и данными из новой учетной записи.

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

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

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

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

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

Протестировано в 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.