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

1. Введение

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

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

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

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

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

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

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

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

Вариант	Необходимость	Ценности
onClick	Необходимый	Имя обработчика событий JavaScript
разрешенные методы оплаты	Необязательный	PaymentMethod[]
кнопкаЦвет	Необязательный	по умолчанию, черный, белый
кнопкаЛокаль	Необязательный	Двухбуквенный код 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
кнопкаSizeMode	Необязательный	статический, заполнить
кнопкаТип	Необязательный	забронировать, купить, оформить заказ, пожертвовать, заказать, оплатить, просто, подписаться

Найдите метод 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 и замените его этим кодом. В этой кодовой лаборатории мы собираемся реализовать все четыре намерения.

   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. Заключение

Поздравляем с завершением этой 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 .

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

• Просмотрите контрольный список интеграции

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

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