#paulc7053_api
potent vaultBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- paul_paypal-ece, 5 hours ago, 39 messages
- paulc7053_unexpected, 7 hours ago, 50 messages
muted coveBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1254936450919698574
📝 Have more to share? Add details, code, screenshots, videos, etc. below.
tidal vortex
Hello
limber void
Hi 👋
Do you have more details?
tidal vortex
Yes
I use ECE in production, but it's like a moody kid
sometimes its really slow to show up - and never does
limber void
- Do you see Apple Pay when you navigate to this page? https://docs.stripe.com/payments/link/payment-request-button-link
- Do you have a publicly accessible front end I can visit?
limber void
Damn search results. Try this one: https://docs.stripe.com/stripe-js/elements/payment-request-button
tidal vortex
its on the last step although...
limber void
That link takes me to github
tidal vortex
Damn search results. Try this one: <https://docs.stripe.com/stripe-js/elements/...
I thought that ECE is a whole different implementation, no?
Sorry, it was private
just made it public
limber void
ECE is a different implementation. But the first step is to verify your browser has a valid Apple Pay Payment Method
tidal vortex
I see
Apple Pay/GPay I use them interchangably, but I understand your point
Also, I ensured that I always show Apple Pay, even if the visitor doesnt have a wallet
limber void
Also, I ensured that I always show Apple Pay, even if the visitor doesnt have a wallet
What do you mean by this? Can you share your code? I cannot seem to see your ECE implementation
tidal vortex
Sure, I pass const expressCheckoutOptions = { layout: { overflow: "never" }, paymentMethods: { applePay: "always", }, buttonHeight: 50, paymentMethodOrder: ["google_pay", "apple_pay", "paypal"] }; to <ExpressCheckoutElement onClick={onClick} onReady={onReady} onConfirm={onConfirm} options={expressCheckoutOptions} />
limber void
But you are still not seeing Apple Pay show up?
tidal vortex
> Also, I ensured that I always show Apple Pay, even if the visitor doesnt have ...
It does show up... but it's suuper spotty
limber void
What do you mean it's super spotty? Can you define the specific conditions where it does and does not show up?
tidal vortex
I havent been able to idetify the conditions under which it does or it doesnt show up
sometimes is just stuck on loading
const onReady = ({ availablePaymentMethods }) => { if (!availablePaymentMethods) { setShowLoading(true) } else { setShowLoading(false); }; };
This is how I handle its loading state
limber void
Okay so the first step would be to log the availablePaymentMethods before any of the if..else stuff
tidal vortex
And then?
Whenever I am testing it, it works as expected
Then I watch user sessions and it doesnt resolve
limber void
The first step of logging the values is to get a clearer picture of when it fails.
If it always works for you but not when a Customer uses it, I would need more details about what the customer is doing (what browser are they using? What errors are in the console?)
tidal vortex
You have all the details there
limber void
That's a screen recording I don't have any of the details I need there
tidal vortex
Besides the browser (Mobile Safari) - you have all the console logs in there
But there is really nothing to see in the logs
no error or even warning
limber void
I am seeing this error when I attempt to load
tidal vortex
Ah, you must be on the tunneled one. I don't have Apple pay configured on that domain cause I'm using Chrome, but I can add it right now
Can you please check again
limber void
limber void
Sorry but without exact details of the situations where it doesn't work, it's hard to offer any advice.
tidal vortex
Yes, I can imagine
the only reason I realised this is a problem was that I looked at recordings
What do you recommend I do?
Just switch to the payments element?
muted coveBOT
limber void
I would definitely recommend using the Payment Element if you want to simplify the approach while bundling all possible payment methods together.
But if you want a separate wallets section, then I think the next step would be to have a test iOS device you can use to hit your production site and try to identify the exact scenarios whene Apple Pay fails
tidal vortex
Myeah... I already tried to see a pattern by using browserstack across multiple iPhones, but it worked as expected
What about creating these wallet buttons and hooking them to the payment intents API
Kind of like this (but with Apple Pay and GPay):https://docs.stripe.com/billing/subscriptions/paypal#create-product-plan-code
raw grail
Hi, taking over and catching up.
raw grail
Hi, still catching up.
tidal vortex
Okay
raw grail
So the issue now is that ApplePay is still not showing up for you? Is this your production, https://czpk6w8x-3000.euw.devtunnels.ms/purchase URL?
raw grail
This keeps working for me so it is hard to debug
tidal vortex
yep...
raw grail
Are you saying it works sometimes and it does not on the same browser?
Can you share exact reproducable steps for me?
tidal vortex
It hasnt happened to me
But I see it happeneing in user recordings
happening*
The steps are really ... the same
The browser is Mobile Safari
raw grail
Are you creating two spearate Stripe Elements?
tidal vortex
Yes, one ExpressCheckoutElementand one CardElement
raw grail
This video is still buffering
I need to be able to reproduce this to further debug the issue
raw grail
As my colleage recommended you should use the PaymentElements as the CardElement is legacy.
I am trying to see if I can reproduce this on my test page as well, hang tight
tidal vortex
Sure, will be here
The reason I avoid using the PaymentElements is beause it requires multiple clicks to pay with Apple Pay, whereas the Express one is just a click
raw grail
What I meant is, you could use PaymentElements for your other PaymentMethods and still use ECE for ApplePay
tidal vortex
I dont think I understand that, do you mean the card number input?
Does the CardElement somehow prevent the ECE from resolving?
raw grail
No, I do not think so. It should be compatible and it is working for me. However, that is just a legacy product and discourage new integrations with CardElement and upgrade to PaymentElements.
tidal vortex
I see
Will switch it
But what about the ECE?
How should I proceed?
Should I just show the ECE Buttons, and then show the Apple Pay/GPay again the a PaymentElements form (is that allowed)?
raw grail
I do not think you need to do that.
I still can't reproduce this issue
I want to look at the developer console and see if there are any error messages
Is this screenshot from your customer? Or, from someone else on your team?
If it's from your team, then can you ask them to visit https://docs.stripe.com/stripe-js/elements/payment-request-button and ask if they can see GooglePay?
tidal vortex
If it's from your team, then can you ask them to visit https://docs.stripe.com/s...
Google Pay (am on Chrome)
But yes, I can see it
how is this any different from the express checkout?
raw grail
Yes, GooglePay
tidal vortex
I want to look at the developer console and see if there are any error messages
No, no errors or warnings
raw grail
Sorry, I was helping someone else with ApplePay