darryl_50776

[worthy drift]

thanks! for other readers, this is forked from https://discord.com/channels/841573134531821608/1176606801257570425

Ok, can I access this page you shared?

And can you share a snippet of how you're integrating ECE?

[silk remnant]

We removed Google Pay from production but I can share a test environment privately if needed. Here are some snippets (slightly paraphrased, but I hope this gets the important bits across):

import { loadStripe } from '@stripe/stripe-js/pure';

      stripe = await loadStripe(canadaPublishableKey);
// <snip>
      paymentRequest =  stripe.paymentRequest({
        country: cartInfo.countryCode,
        currency: CountryUtils.getCurrencyByCode(cartInfo.countryCode),
        total: StripeUtils.createTotal(cartInfo),
        displayItems: StripeUtils.createDisplayItems(cartInfo, shippingOptions),
        shippingOptions: shippingOptionResult,
        requestShipping: true,
        requestPayerName: true,
        requestPayerEmail: true,
        requestPayerPhone: true,
      });
// <snip>
          this.paymentRequest.on('paymentmethod', this.checkout);
          this.paymentRequest.on('shippingaddresschange', this.stripeShippingAddressChange);
          this.paymentRequest.on('shippingoptionchange', this.stripeShippingOptionChange);
          await this.paymentRequest.canMakePayment();
// <snip>

      if (this.paymentRequest && this.paymentRequestEnabled && this.active) {
        this.paymentRequest.show();
      }

Here's the screen recording…

[worthy drift]

And you're seeing canMakePayment() return true?

[silk remnant]

Yes, we have this elsewhere and it's returning googlePay: true:

    if (paymentRequest) {
      const canMakePayment = await paymentRequest.canMakePayment();
      if (canMakePayment && canMakePayment.applePay) {
        return { applePay: true };
      }
      if (canMakePayment && BrowserUtils.isChrome()) {
        return { googlePay: true };
      }
    }

[worthy drift]

Is this something you're observing yourself consistently? You mentioned sharing access to a test page, are you able to do that?

[silk remnant]

I'm able to reproduce consistently, yes. I'll PM you the link and steps

Apparently I can't PM you… 😦

[worthy drift]

I just sent a friend request

[silk remnant]

I'm a discord n00b, 🤷‍♂️

[grand jasper]

👋 if you can, please share the link here as I'll be taking over for synthrider in a bit
You can delete it right after

[silk remnant]

Oh that would work. link (to a product page, need to add to cart, checkout, then click Google Pay): <removed>

@grand jasper , let me know when you've got it

[grand jasper]

yup

[silk remnant]

What we know:

• Only affects Desktop
• Our site only supports Google Pay on Chrome (for some reason, we can probably change that)
• When User-Agent is desktop-related, we see the problem
• Opening up dev tools in responsive mode with Android-related User-Agent , then refreshing the checkout page, seems to be fine

[grand jasper]

Are you using some sort of modal library in your app?

[silk remnant]

probably, but likely custom… that's before my time.

I believe the grey background comes from Stripe's JS:

                    n._backdrop.show(),
                    n._backdrop.fadeIn())

[worthy drift]

That's not behavour i see in my test integration, eg: https://asi-express-checkout-element.glitch.me/checkout/

But its possible

Sorry, my mistake, you're using payment request button, not express checkout element 🤦

[silk remnant]

Our fault for putting an "express checkout" heading on it 🤯

[worthy drift]

Ok, so briefly we see the same result but can't really say why.

But there are several console errors surfaces during init of the page, hard to say whether any might be involved

Can you try simplifying a hardcoded payment request creation? ie, hard-coded values and just the minimum without shipping etc

[silk remnant]

Those console errors (particularly "Payment requests failed to load - No shipping options were provided while initialising") can be ignored; those happen way earlier before we show the button.

I'll try some simplified requests.

[worthy drift]

For example, you likely won't see the same issue in this test integration: https://apocalypse-supplies.glitch.me/prb

So we need to figure out what might be different interfering with your PRB displaying the payment ui

[silk remnant]

You're right, I can buy all the Apocalypse Supplies I could ever want just fine 🤔

[worthy drift]

Another thing here could be the event handlers, so I'd suggest temporarily disabling those too

For example this.paymentRequest.on('shippingaddresschange', this.stripeShippingAddressChange);

The UI can hang if you fail to call event.updateWith in those handlers

[grand jasper]

Any updates @silk remnant ?

[silk remnant]

Not yet… working on it