GooglePay in not working in 1.10 version

[abereznyi]

General information

• SDK/Library version: 1.10
• Environment: Sandbox
• Browser and OS: Chrome on Windows and Android, Firefox on Windows

Issue description

When googlePay option is included in braintree.dropin.create() parameters, like googlePay: { // merchantId: null, // not needed for sandbox totalPriceStatus: 'FINAL', totalPrice: payAmount, currencyCode: currency }, the drop-in Chrome on Windows fails to load and spinner spins forever due to JavaScript load errors:

https://payments.developers.google.com/js/apis/pay.js net::ERR_BLOCKED_BY_CLIENT

At least some error handling is needed.

In Firefox on Windows drop-in does not load googlePay at all and shows no errors

On Android Chrome drop-in loads, but fails to work:

[crookedneighbor]

the drop-in Chrome on Windows fails to load and spinner spins forever due to JavaScript load errors:

I am unable to reproduce this behavior.

On Android Chrome drop-in loads, but fails to work:

I'm also unable to reproduce this behavior.

Can you provide specific versions of the browsers you are using and a staging site where I can reproduce it? If you're not comfortable posting a public URL here, you can contact our support team https://articles.braintreepayments.com/forms/contact

[abereznyi]

Here is a staging URL:

https://east-epay-alexb.azurewebsites.net//api/SecurePay/3EC8135885916BB477E4848B1DA0C0592438AC12BC51C184DB29D2B4F38863D1

Click Next button on this page.

The browser: Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)

The Error (probably due to some Chrome extension) - spinner never stops:

My idea that this error needs to be handled somehow.

That is probably happening in Firefox, as it shows no error and Google Pay just does not show there:

Thanks, Alex Tel. 724-484-3457

On Mon, Apr 2, 2018 at 10:11 AM, Blade Barringer notifications@github.com wrote:

the drop-in Chrome on Windows fails to load and spinner spins forever due to JavaScript load errors:

I am unable to reproduce this behavior.

On Android Chrome drop-in loads, but fails to work:

I'm also unable to reproduce this behavior.

Can you provide specific versions of the browsers you are using and a staging site where I can reproduce it? If you're not comfortable posting a public URL here, you can contact our support team https://articles. braintreepayments.com/forms/contact

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/braintree/braintree-web-drop-in/issues/379#issuecomment-377937650, or mute the thread https://github.com/notifications/unsubscribe-auth/AAb_q2tziz5qA9Dg3ue8NjNXSGMssSYhks5tkjGtgaJpZM4S_V6i .

[crookedneighbor]

The reason it's failing in Android Chrome is because you have:

googlePay: {
  // merchantId: null, // not needed for sandbox
  totalPriceStatus: 'FINAL',
  totalPrice: payAmount,
  currencyCode: currency
},

When it should be:

googlePay: {
  // merchantId: null, // not needed for sandbox
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPrice: payAmount,
    currencyCode: currency
  }
},

See https://developers.braintreepayments.com/guides/google-pay/client-side/javascript/v3#requesting-a-payment

As for why it's getting an error in Desktop Chrome, I think your assertion about it being caused by a Chrome extension is correct.

We definitely need to add a catch here. We'll work on that and update here when it's ready.

[abereznyi]

Hi Blade,

thanks for pointing my JS error, I fixed it and Google Pay option is now works in Chrome on Android with sandbox payment.

Firefox (latest) on desktop and Android both just does not show Google Pay option and I see no errors in desktop browser console (it does not block any JS). Any idea why?

I am looking forward to the next version of your code with the 'catch' added :)

BTW, I am using latest Braintree C# API ( https://github.com/braintree/braintree_dotnet) to submit transactions and get merchant account details. I don't any way to get Google Pay merchantId needed for live payments with this API or even see if merchant has Google Pay configured. Any idea how I can get merchantId(s)? I have to support a large number of merchants in my system...

Thanks, Alex Tel. 724-484-3457

On Mon, Apr 2, 2018 at 10:38 AM, Blade Barringer notifications@github.com wrote:

The reason it's failing in Android Chrome is because you have:

googlePay: { // merchantId: null, // not needed for sandbox totalPriceStatus: 'FINAL', totalPrice: payAmount, currencyCode: currency },

When it should be:

googlePay: { // merchantId: null, // not needed for sandbox transactionInfo: { totalPriceStatus: 'FINAL', totalPrice: payAmount, currencyCode: currency } },

See https://developers.braintreepayments.com/guides/ google-pay/client-side/javascript/v3#requesting-a-payment

As for why it's getting an error in Desktop Chrome, I think your assertion about it being caused by a Chrome extension is correct.

We definitely need to add a catch here https://github.com/braintree/braintree-web-drop-in/blob/701424505b035cf9337bd994f1d2505a3d32957c/src/dropin-model.js#L258-L261. We'll work on that and update here when it's ready.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/braintree/braintree-web-drop-in/issues/379#issuecomment-377943578, or mute the thread https://github.com/notifications/unsubscribe-auth/AAb_qzqW-Xx_ofOSvwMeO-JrIFSfqa3hks5tkjfkgaJpZM4S_V6i .

[crookedneighbor]

Firefox (latest) on desktop and Android both just does not show Google Pay option

Google Pay is only supported in Android Chrome, so I would not expect it to show up for you on Firefox, regardless of the platform.

and I see no errors in desktop browser console (it does not block any JS). Any idea why?

No, I was never able to reproduce this behavior. I expect you are right that it is do to some extension you have installed. If you open the page in Incognito Mode, I expect it will work just fine.

I'm going to attempt to reproduce the error by installing an extension to block the JS asset from loading (which is the error you described in your original issue) to be sure the fix catches this problem.

[abereznyi]

You are right, in incognito mode desktop Chrome does not show any errors.

Thanks a lot for telling me that all desktop browsers and all mobile browsers but Chrome are not supported in Google Pay drop-in option. I somehow missed that important fact. Maybe it needs to be stressed in the docs...

Does the same applies to Venmo and Apple Pay - no desktop support? I suppose, Apple Pay is only supported in some IOS browses only?

Thanks, Alex Tel. 724-484-3457

On Mon, Apr 2, 2018 at 12:06 PM, Blade Barringer notifications@github.com wrote:

Firefox (latest) on desktop and Android both just does not show Google Pay option

Google Pay is only supported in Android Chrome, so I would not expect it to show up for you on Firefox, regardless of the platform.

and I see no errors in desktop browser console (it does not block any JS). Any idea why?

No, I was never able to reproduce this behavior. I expect you are right that it is do to some extension you have installed. If you open the page in Incognito Mode https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=en, I expect it will work just fine.

I'm going to attempt to reproduce the error by installing an extension to block the JS asset from loading (which is the error you described in your original issue) to be sure the fix catches this problem.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/braintree/braintree-web-drop-in/issues/379#issuecomment-377964950, or mute the thread https://github.com/notifications/unsubscribe-auth/AAb_q7WDbOwelghXgBBnx8lJ1vjIMLQ6ks5tkkycgaJpZM4S_V6i .

[crookedneighbor]

Venmo is only supported in mobile browsers.

Apple Pay has select desktop Safari support, depending on the version of Safari and how the iOS device with the Apple Pay card that is bluetooth connected to the mac is configured.

[simeyla]

GooglePay is now available even on Safari, although I had a super hard time finding any vendors that had it implemented properly. BHPhotoVideo was the only place I managed to find - even some of the vendors mentioned in Google's own docs didn't show the GooglePay button.

[simeyla]

For anyone else testing this it appears that the GooglePay button may not appear without https.

Works, even in Safari on iOS now :-)

The Google Pay API supports Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, and UCWeb UC Browser.

https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist

[ptvce]

Is it right? crookedneighbor: "Google Pay is only supported in Android and Chrome, so I would not expect it to show up for you on Firefox, regardless of the platform?"

[crookedneighbor]

@ptvce Google Pay is supported natively in Chrome (Desktop or Android), but now supported via popups in other browsers like Safari and Firefox as well.