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

1. Введение

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

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

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

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

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

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

Откройте эту кодовую лабораторию в 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);
  });
}

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

  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