Google Pay (через API запроса платежа) - canMakePayment () не разрешает

Я перешел по этой ссылке в качестве руководства по реализации и официальное руководство W3C.

Вот моя логика для отображения кнопки Google Pay на нашем сайте:

  1. Проверьте, доступен ли window.PayentRequest, и если да, то:
  2. Сборка methodData, paymentDetails и paymentOptions. Создайте с ними новый объект PaymentRequest.
  3. Позвоните paymentRequest.canMakePayment().then((result)=>{ //if result is true, display the GPay the button }).catch(()=>{}}
  4. Когда отображается кнопка, обработчик onClick создает новый объект PaymentRequest с methodData, paymentDetails и paymentOptions и вызывает .show()

Наше приложение находится в React, и я делаю шаги 1-3 в componentDidMount. В большинстве случаев это работает отлично - страница завершает загрузку, проверяет, доступен ли PaymentRequest и поддерживается ли PaymentMethod, а затем устанавливает состояние для отображения кнопки Google Pay, и щелчок запускает собственный платежный лист браузера.

Вот проблема, которую я пытался решить:

В Google Chrome (версия 72.0.3626.109) (как на компьютере, так и на мобильном устройстве) кнопка GooglePay иногда не отображается, когда я перехожу на страницу, и появляется только после того, как я обновляюсь несколько раз. В тех случаях, когда он не отображается, из журналов я видел, что метод canMakePayment вообще не разрешается - он не входит ни в then, ни в catch. Я не понимаю, где может быть выбрано исключение, и где это исключение всплывает, или почему оно не работает тихо.

Любая информация будет полезна - если canMakePayment() вернет обещание, почему и когда оно не разрешится? Где я могу проверить наличие ошибок?

Вот сценарий того, что я делаю - и я мог бы воспроизвести проблему и на этой скрипке: https://jsfiddle.net/soham_scratchpad/bzsyrjaf/5/


javascript google-pay payment-request-api
person Soham Bhattacharjee    schedule 21.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что нужно искать в своей скрипке? Я попробовал его на рабочем столе, и он всегда отображает текст «Показать кнопку оплаты», который, кажется, указывает на то, что canMakePayment () разрешено в true.

В реализации Chrome canMakePayment () может преобразовываться в логическое значение или вызывать ряд исключений в соответствии с spec. Если у вас есть оба обработчика .then и .catch, один из них всегда должен срабатывать.

В противном случае это может быть ошибка в Chrome. Было бы полезно, если бы вы могли отправить отчет об ошибке здесь с инструкциями по воспроизведению, и используйте Blink> Payments как компонент.

person Danyao Wang    schedule 01.03.2019
comment
Прежде всего, спасибо, что посмотрели. Мне удалось воспроизвести проблему в скрипке, но это было очень редко, извините, если это не передает проблему правильно. На своей веб-странице я вижу проблему более последовательно. Однако у меня есть другие платежные решения на моей веб-странице, такие как PayPal и Visa checkout, которые вводят свой собственный скрипт и вызывают PaymentRequest.canMakePayment. Я думаю, что есть условие гонки, которое не позволяет моей кнопке отображаться (canMakePayment не разрешает / не генерирует исключение DOMException). Все еще работаю над этим, обновлю здесь. - person Soham Bhattacharjee; 12.03.2019