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

Question

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

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

1. Проверить, если window.PayentRequest доступно, и если да, то:
2. Метод BuildData, 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 (v 72.0.3626.109) (как на настольном, так и на мобильном устройстве) кнопка GooglePay иногда не отображается при переходе на страницу, а отображается только при обновлении пару раз. Для случаев, когда он не обнаруживается, из журналов я видел, что метод canMakePayment не разрешается вообще - он не входит в thenни catch, Я не понимаю, где оно может вызывать исключение, и куда оно пузырится, или почему оно молча терпит неудачу.

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

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

Answer 1

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

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

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