darryl_50776 | Stripe Developers | Page 1

dense loomBOT Nov 21, 2023, 8:18 PM

#

worthy drift Nov 21, 2023, 8:18 PM

#

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 Nov 21, 2023, 8:29 PM

#

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 Nov 21, 2023, 8:30 PM

#

And you're seeing canMakePayment() return true?

silk remnant Nov 21, 2023, 8:32 PM

#

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 Nov 21, 2023, 8:36 PM

#

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

silk remnant Nov 21, 2023, 8:38 PM

#

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

#

Apparently I can't PM you… 😦

worthy drift Nov 21, 2023, 8:41 PM

#

I just sent a friend request

silk remnant Nov 21, 2023, 8:42 PM

#

I'm a discord n00b, 🤷‍♂️

grand jasper Nov 21, 2023, 8:44 PM

#

👋 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 Nov 21, 2023, 8:46 PM

#

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 Nov 21, 2023, 8:48 PM

#

yup

silk remnant Nov 21, 2023, 8:50 PM

#

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 Nov 21, 2023, 8:50 PM

#

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

silk remnant Nov 21, 2023, 8:51 PM

#

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 Nov 21, 2023, 8:55 PM

#

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 Nov 21, 2023, 8:58 PM

#

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

worthy drift Nov 21, 2023, 9:10 PM

#

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 Nov 21, 2023, 9:13 PM

#

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 Nov 21, 2023, 9:17 PM

#

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

Apocalypse Supplies Inc

A cool thing made with Glitch

#

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

silk remnant Nov 21, 2023, 9:18 PM

#

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

worthy drift Nov 21, 2023, 9:21 PM

#

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

dense loomBOT Nov 21, 2023, 9:45 PM

#

grand jasper Nov 21, 2023, 9:45 PM

#

Any updates @silk remnant ?

silk remnant Nov 21, 2023, 9:46 PM

#

Not yet… working on it

#darryl_50776