#mttpg-paymentelement-applepay
fallow reef
Hello! What's the exact error?
If that is the exact error that's not an error coming from Stripe.
crystal oasis
"Something went wrong. Unable to show Apple Pay. Please choose a different payment method and try again. "
API requests are all 200 OK on the Stripe developer logs.
fallow reef
Yeah, that's not coming from Stripe. Can you tell me more about where that error is coming from?
Oh, wait, I think I found it.
My initial searches didn't find it because in the code it's Something went wrong. Unable to show {wallet}.
crystal oasis
I'm trying to test an integration between a WordPress plugin using Stripe payments ... normal test cards and Google Pay are both good. Apple Pay option breaks.
fallow reef
So it looks like that's coming from Stripe.js.
Are there any other errors or info in the console alongside that error?
Are you using iframes by chance?
crystal oasis
Testing on an iPhone. I don't have a Mac so no browser dev console 😦
Dont think so but will check. Google Pay is happy enough though?
fallow reef
Apple Pay has stricter requirements. You need to have the domain validated and it's picky about iframes; the origin of the top level page and all iframes involved must match.
crystal oasis
Done the validation and showing a green tick
fallow reef
Are you using Stripe Connect?
crystal oasis
Do you know of a way to emulate Mac so I can try on a device with a dev console? I'm sure it will be obvious if I can get the logs out of a browser!
Stripe payment element
I guess it's detecting it's an apple device and offering the apple pay option.. despite it then deciding it doesn't work when you try to pay
fallow reef
You could try this app to view the console on the iPhone itself: https://apps.apple.com/app/id1584825745
crystal oasis
Ooh, I will give that a go.. many thanks!
fallow reef
Another thing you can do is listen for error events and send them to your server, throw them in an element on the page, show them in an alert(), etc. https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event
crystal oasis
You could try this app to view the console on the iPhone itself: https://apps.ap...
This nearly worked very well..! Unfortunately it has masked all the important things like the js file url!
fallow reef
Do you see any additional errors or other info that might be of use?
crystal oasis
Console shows an error... "null" filename "r@webkit-masked-url://hidden/:27:166011
Etc
The only iframes are js.stripe.com ones
fallow reef
That's not much to go on. Can you link me to the page in question?
crystal oasis
Sure. I'm not going to get hammered by bot requests if I post it on here am I?
fallow reef
I mean, it is a public server, so I can't say for sure what will happen.
I think it will be fine though.
crystal oasis
Fair enough
Pop one ticket in the cart and follow the flow. Works fine with normal cards and Google, just problems with Apple.
fallow reef
Apple Pay shows up fine for me on that site:
crystal oasis
That's the one. Hit the blue button and it comes up with the error in red.
The error message I mentioned shows just above the bit you screenshotted
fallow reef
Ah, okay, here we go:
crystal oasis
I'd be less worried if Apple Pay didn't show.. the problem is that it shows and then fails to work
fallow reef
IntegrationError: show() must be called from a user gesture handler (such as a click handler, after the user clicks a button).
Hoping you know what that means 😅
fallow reef
You need to call show() from a gesture handler as the error indicates. You can't do it after a network request or something like that.
crystal oasis
Hmm OK. Time to debug someone else's wordpress plugin then!
Many thanks for the assist
🌟
fallow reef
One sec, let me find you a relevant blog post about this...
Ah, here it is: https://webkit.org/blog/13862/the-user-activation-api/
That goes into detail about the underlying security mechanisim that's driving this error.
inland loomBOT
limber spindle
mttpg-paymentelement-applepay
crystal oasis
Just trying a temporary fix of marking the apple_pay property as "never" in the elements create function, whilst I figure out how to fix it properly. Seems to have no effect?
i.e. apple pay is still visible?
limber spindle
I took over and yes I still see Apple Pay so you likely didn't pass the option
crystal oasis
I've checked in inspector and the property is set to never before calling create
limber spindle
Not sure what you mean, but on https://astondownevents.co.uk/event/fwtestevt I still see the ApplePay button
I also see GooglePay on Chrome
const settings = {
apple_pay: "never",
google_pay: "never"
};``` is this your code?No it's a WordPress plugin.. they aren't replying to my support requests so I'm trying to debug it myself. I set it to never to see if I could suppress Apple Pay for now.. didn't work. What am I doing wrong?
limber spindle
I don't know, it's hard to say without talking to someone who wrote and understands the code running
Just trying a temporary fix of marking the apple_pay property as "never" in the elements create function, whilst I figure out how to fix it properly. Seems to have no effect?
you said this, what does that mean?
I just shared that code and you said that's not yours, isn't that what you did?
crystal oasis
Indeed. My problem too 😦
No I edited the backend bit that feeds this function.. so it's set to "never" in both cases. Just seems to be ignored when the element is created
limber spindle
yeah I can't really tell you much here, I don't know what that code is supposed to do
const wallets = obj.getWallets();
obj.paymentElement = obj.stripeElements.create("payment", {
fields: {
name: "auto",
email: "auto",
phone: "auto",
address: "auto"
},
wallets: wallets
}),
obj.paymentElement.mount(obj.selectors.paymentElement)
}```Thanks. Bit of a nightmare..!
limber spindle
yeah okay that's the bug lol
crystal oasis
Whats that?
limber spindle
they do apple_pay and google_pay but it should be applePay and googlePay
so if you change those names (if you can) it should then stop offering both
crystal oasis
🤦♂️
Amazing, I'll give that a go. Spent too long looking at this now and missed the difference!
limber spindle
it's really convoluted with their getWallets() stuff that seemed internal to their own logic but then that second bit of code they just pass the value to PaymentElement
crystal oasis
Not sure how they tested this lol
limber spindle
the whole camel case versus snake inconsistency in our API is a bit tough for developers to be fair
let me know if you can try that change quickly
limber spindle
I still see Apple Pay
and google pay. How do you know it works?
yeah doesn't look like the live code changed at least
crystal oasis
Probably need to force refresh of the js
I have Google working now and Apple turned off
At least now the site works OK and I just need the plugin devs to sort out their bugs
limber spindle
yeah I don't get it you set googlePay: 'never' but then it appears anyways