#Srujan-paymentrequest
dense siren
Sure. Here's the link https://a408-2601-281-8000-25c-60d7-f1df-341c-b04a.ngrok.io/checkout just enter name and phone and open up the bottom sheet by clicking Continue to Payment. The google pay button is setup to render inside that first screen
Well actually, use this link https://a408-2601-281-8000-25c-60d7-f1df-341c-b04a.ngrok.io/menu
And add a cart item and follow the steps to go to checkout
scarlet portal
Interesting... yeah nothing is immediately standing out to me but let me dig in a bit more
and you were saying this previously worked, right?
dense siren
Yeah I didn't change anything in the component thats rendering the google pay button
Which is why I'm confused
gusty orbit
Hi 👋 I'm stepping in for @scarlet portal.
Let me take a look at these URLs
Okay looking at the second URL I think canMakePayment may be returning null due to insufficient security configuration on this site. Chrome shows this warning on attempting to navigate to it.
dense siren
Yeah I thought so too...only thing is it worked before so I'm not entirely sure if its the security or not. Definitely a possibility. Stripe recommend using ngrok to run my localhost over https with SSL, is there additional configuration to make it secure?
Also, possibly related(or unrelated), I intermittently get these errors from stripe in my console:
Sometimes it'll be a CORS error as well but its intermittent and goes away sometimes
gusty orbit
And this is all occurring in the Chrome browser, correct?
dense siren
Yes
gusty orbit
I know you are serving over ngrok but when I examine the SSL status of the link it shows up as insecure
dense siren
Is there a way to setup SSL? This is a react app server over localhost:3000
gusty orbit
I think you will need to review how you have configured ngrok. You should be able to visit your site and see something like this
dense siren
So even though the site is marked as dangerous, it shows me this when I clicked on the warning icon so it seems that the certificate is valid right?
Even still though, seems like a rabbit hole too because I had the google pay button showing up over ngrok before, it was the only way it would show up since I can't run it in localhost without a valid SSL and https (Stripe error thrown)
gusty orbit
The Google Pay button is loaded/controlled through a JavaScript file that is loaded from Google. That is what makes debugging this more difficult
dense siren
I've narrowed down that calling pr.canMakePayment() returns a result that is null, what else can I check?
I can also share code snippets if that would help
gusty orbit
canMakePayment() is a call to check the browser's capability to make a payment. This checks that there are either digital wallets or saved cards and that the browser is secure enough. Another thing that makes this tricky to debug is those parts are not controlled by Stripe.
On your first site I noticed several WebSocket client errors as well. Also that the browser could not fetch r.stripe.com or js.stripe.com
dense siren
Yeah those last errors I've been getting intermittently but someone earlier said that it might be a backend stripe issue and shouldn't affect payments. Websocket errors also I believe are irrelevant right now, might just be a timeout connection b/t ngrok and my localhost
gusty orbit
Not being able to fetch js.stripe.com would prevent any Stripe.js related functions from working correctly from what I understand. That would include rendering the Payment Request Button.
dense siren
Ah I see
When does that error occur? I don't see it on refresh
Thanks for your help btw this is a hard one for me 🙂
gusty orbit
I do not either. It seems to be intermittent to me.
dense siren
Before I was having trouble rendering it within the drawer but I just had to set a container for it, but now even if I render it outside separately somewhere it doesn't show...I wonder if I should push to my dev server just to see if it shows there since thats a secure https ssl link