w3ever | Stripe Developers | Page 1

real yewBOT Oct 2, 2023, 2:05 PM

#

silk rose Oct 2, 2023, 2:06 PM

#

Hello, what are you running in to?

odd patio Oct 2, 2023, 2:06 PM

#

thanks for your swift reply.

#

I'm integrating Gpay, Paypal and Appley pay using Express checkout elelement.

#

but Paypal button and Apple button don't be displayed on Safari 11. 51 (Desktop) and iPhone.

#

but it works well on Chrome.

#

Paypal and Gpay works well on Chrome.

#

I think I follow guide correctly.

#

Domain is verified correctly.

silk rose Oct 2, 2023, 2:11 PM

#

Can you send me the ID of the account that you verified this domain on?

#

Also do you see Apple Pay and PayPal in the "Try the demo" section of this doc? https://stripe.com/docs/elements/express-checkout-element

odd patio Oct 2, 2023, 2:14 PM

#

I've just open this link and I can see Paypal button and Gpay button on Safari on Demo page (safari)

#

I'm getting these error on Safari.

Screen_Shot_2023-10-02_at_4.15.20_PM.png

#

of course Paypal button won't be displayed on live but this is dev system.

#

so it is displayed on Chrome.

elder notch Oct 2, 2023, 2:17 PM

#

Hello 👋
Taking over

#

If you open this page in safari, do you see an apple pay button?
https://stripe.com/docs/stripe-js/elements/payment-request-button

Attaching a screenshot

odd patio Oct 2, 2023, 2:18 PM

#

just one second'.

elder notch Oct 2, 2023, 2:19 PM

#

Additonally,

1/ Can you share the account ID where you've registered the domain?
2/ Are you using Stripe Connect?
3/ If you're using Stripe Connect, what kind of charges are you creating?
4/ What location are you testing from?

odd patio Oct 2, 2023, 2:20 PM

#

Ok. I will provide them. but first please see this image.

#

Screen_Shot_2023-10-02_at_4.19.11_PM.png

#

I can see only Link button now. it means that Paypal and Apple pay are not available on Safari of my machine?

elder notch Oct 2, 2023, 2:22 PM

#

Thanks, you not able to see the Apple Pay button in safari on the link I shared above points to Apple Pay wallet not being correctly configured on your machine.

It either doesn't have a valid Payment Method in the wallet or Apple just doesn't support Apple Pay in the location you're testing from.

odd patio Oct 2, 2023, 2:23 PM

#

I'm Ukraine.

#

yes. understand.

elder notch Oct 2, 2023, 2:23 PM

#

Is your test site hosted? if so, can you share the URL and test credentials?
I can check if I am able to see the Button on your site or not

odd patio Oct 2, 2023, 2:24 PM

#

but why is not Paypal button available?

#

Ok.

#

https://nannyly-138bb.web.app/

#

anna@heynannyly.de

#

Olsen1!!!

#

https://www.loom.com/share/ae992167af7846eeabac0f4d5e4cb40a

Loom

heynanny - 2 October 2023

▶ Play video

#

this is video on Chrome.

#

please follow this step on Safari.

elder notch Oct 2, 2023, 2:27 PM

#

👍

odd patio Oct 2, 2023, 2:30 PM

#

I'm developer and I don't now how to get Account ID on Stripe. but Please see this image. domain is verified correctly.

Screen_Shot_2023-10-02_at_4.28.52_PM.png

elder notch Oct 2, 2023, 2:32 PM

#

if you go to profile and scroll all the way to the bottom
https://dashboard.stripe.com/settings/user

You'd find the account ID

#

it might look something like acct_xxx

odd patio Oct 2, 2023, 2:33 PM

#

ok. let me check

#

Oh. yes. ID is acct_1IQfT7EAXqGZrRbQ

elder notch Oct 2, 2023, 2:35 PM

#

Do you use Stripe Connect?

odd patio Oct 2, 2023, 2:35 PM

#

What do you mean?

elder notch Oct 2, 2023, 2:35 PM

#

Like are you building a setup like market place or something?
https://stripe.com/docs/connect

odd patio Oct 2, 2023, 2:36 PM

#

yes. our system is a platform similar to Freelancing site.

#

so we use connect accounts.

#

for the freelancers (nannies on our system).

elder notch Oct 2, 2023, 2:37 PM

#

What sort of charges are you creating? Direct charges or Destination Charges?

odd patio Oct 2, 2023, 2:38 PM

#

yes. when creating Checkout session or Payment Intent, we use transfer data and so nannies can get payment directly when customer pay for service.

#

we contacted to stripe already and Paypal will be approved for the live after a few weeks.

#

but what i'm wondering now, why paypal button is not display for dev enviroment on Safari.

elder notch Oct 2, 2023, 2:48 PM

#

Hmm actually for me, nothing shows up in safari (no paypal, no apple pay, no link)
I don't see an error either which is quite weird.

Can you share the code you're running when you click on "online payment" button?

odd patio Oct 2, 2023, 2:51 PM

#

ok. just one second./

#

📎 choose-paymentmethod-modal.zip

#

this is react component for modal when click "online payment" button

elder notch Oct 2, 2023, 2:58 PM

#

can you share code for getStripe(...) function too?

odd patio Oct 2, 2023, 2:58 PM

#

Ok.

#

import { loadStripe } from "@stripe/stripe-js";
import { appConfig } from "config/config";

let stripe: any = null;

export const getStripe = () => {
if (stripe) return stripe;
stripe = loadStripe(appConfig.stripe.publicKey!);
return stripe;
};

elder notch Oct 2, 2023, 3:01 PM

#

okay, thanks.

Can you add a console log for expressCheckoutOptions function?
want to verify what's being passed on as options to the elements

odd patio Oct 2, 2023, 3:02 PM

#

Ok. I will share log

#

Screen_Shot_2023-10-02_at_5.05.42_PM.png

#

this is log on my local.

#

not dev system.

#

so you can see unverified domain warning for Apple pay.

elder notch Oct 2, 2023, 3:07 PM

#

Gotcha, hmm interesting..

odd patio Oct 2, 2023, 3:07 PM

#

at least, I hope we can see Paypal button.

elder notch Oct 2, 2023, 3:07 PM

#

Going to ask some collegues to take a look too

odd patio Oct 2, 2023, 3:08 PM

#

thank you.

#

I will wait for you here.

tulip marlin Oct 2, 2023, 3:31 PM

#

👋

odd patio Oct 2, 2023, 3:31 PM

#

Hello.

tulip marlin Oct 2, 2023, 3:31 PM

#

I think this might have to do with the size of your div

#

Not positive but let's start there

#

Can you adjust the size of that div to make it really large for a test and see if that changes things?

#

I'm wondering if the sizing is fine for 2 wallets on Chrome (Google Pay + Paypal) but once there are 3 available then it doesn't like it.

odd patio Oct 2, 2023, 3:33 PM

#

Ok. make sense. let me try it now.

#

is the same

tulip marlin Oct 2, 2023, 3:35 PM

#

You just tested locally or you pushed to testing environment? I can't see the ability to open up the payment modal anymore

odd patio Oct 2, 2023, 3:35 PM

#

locally.

#

at least, on local, paypal button should be displayed.

tulip marlin Oct 2, 2023, 3:37 PM

#

Hmm okay but you see the same still. Did you just change something on the test site? I can't repro anymore. Having a repro link is helpful.

odd patio Oct 2, 2023, 3:38 PM

#

I didn't update dev system. just test on local.

#

https://nannyly-138bb.web.app/
anna@heynannyly.de
Olsen1!!!
https://www.loom.com/share/ae992167af7846eeabac0f4d5e4cb40a

Loom

heynanny - 2 October 2023

▶ Play video

tulip marlin Oct 2, 2023, 3:38 PM

#

Okay well there isn't a booking with a payment option anymore on your dev site

#

All 4 are "booked" or "requested"

odd patio Oct 2, 2023, 3:39 PM

#

one second

real yewBOT Oct 2, 2023, 3:44 PM

#

odd patio Oct 2, 2023, 3:44 PM

#

Hello. I've added a new booking and please test it.

tulip marlin Oct 2, 2023, 3:44 PM

#

Thanks

odd patio Oct 2, 2023, 3:45 PM

#

👍

tulip marlin Oct 2, 2023, 3:48 PM

#

Alright so I also see some Console errors on Safari that I don't see on Chrome for your site. Looks like some CSP, access control checks for your database, and an issue with minimal-ui.

#

Is it possible your code is crashing somewhere before it can render ECE on Safari?

#

And are you setting minimal-ui ?

odd patio Oct 2, 2023, 3:49 PM

#

yes. I can also see those error. so what's your opinion?

#

but I don't know about those.

#

what should i do for this?

tulip marlin Oct 2, 2023, 3:50 PM

#

Well we will need to troubleshoot each one and see if those are blocking ECE from rendering

#

Let's start with minimal-ui since I feel like that may be the primary issue here in terms of ECE loading.

#

Where are you setting that?

odd patio Oct 2, 2023, 3:50 PM

#

No setting.

tulip marlin Oct 2, 2023, 3:50 PM

#

Okay wasn't sure if this was implicit from something else.

#

I'm not too familiar with that -- let me see what I can find on how to handle that error.

odd patio Oct 2, 2023, 3:51 PM

#

thank you.

tulip marlin Oct 2, 2023, 3:53 PM

#

Hmm wait it does seem like it is set in your header meta but actually that shouldn't matter if it is just being ignored.

#

Since you don't need that for ECE at all

#

If you want to make sure of that, you could remove from your meta tag and then test again real quick on both Chrome and Safari and make sure you see same behavior

odd patio Oct 2, 2023, 3:54 PM

#

let me see

#

do you mean this meta tag?

#

tulip marlin Oct 2, 2023, 3:55 PM

#

Yep

odd patio Oct 2, 2023, 3:56 PM

#

removed it and tested but is the same on Safari and Chorme.

tulip marlin Oct 2, 2023, 3:56 PM

#

I think the issue is with the other errors though. Like when I put a breakpoint where you render ECE that code never runs.

#

So yeah let's focus on those other errors

odd patio Oct 2, 2023, 3:56 PM

#

ok.

tulip marlin Oct 2, 2023, 3:59 PM

#

https://stackoverflow.com/questions/63141448/safari-fetch-api-cannot-load-due-to-access-control-checks-after-reload seems worth trying

#

Can you see if adding a forward slash to the end of your fetch URL makes any difference?

odd patio Oct 2, 2023, 4:00 PM

#

let me see

#

but we don't call any API to display buttons on this modal.

tulip marlin Oct 2, 2023, 4:01 PM

#

Sure but this is something much earlier in your flow

odd patio Oct 2, 2023, 4:02 PM

#

so do you think we should add slash to all api endpoints?

tulip marlin Oct 2, 2023, 4:03 PM

#

One sec actually.

#

Checking something

odd patio Oct 2, 2023, 4:04 PM

#

Ok. thank you.

tulip marlin Oct 2, 2023, 4:11 PM

#

Alright so with breakpoints and stepping through I can see that it is indeed trying to load and I can even get a sliver of a button where I can pop up the Apple Pay payment modal:

Screenshot_2023-10-02_at_12.10.44_PM.png

#

So I think those other errors are red herrings here

#

And it really is something about the viewport

odd patio Oct 2, 2023, 4:14 PM

#

wow. so what should i do?

tulip marlin Oct 2, 2023, 4:14 PM

#

Can you try just simplifying as much as possible. Let's remove (or comment out) this part: {loading && ( <div className="d-flex justify-content-center align-items-center height-50px"> <HeyCircularProgress size={30} /> </div> )}

odd patio Oct 2, 2023, 4:15 PM

#

ok

tulip marlin Oct 2, 2023, 4:16 PM

#

Let's also remove the maxColumns and maxRows and let it just handle via auto right now

odd patio Oct 2, 2023, 4:16 PM

#

ok

#

is the same

#

chrome still works.

tulip marlin Oct 2, 2023, 4:19 PM

#

Kk can you remove the class settings from the outer div?

odd patio Oct 2, 2023, 4:19 PM

#

ok

#

is the same

tulip marlin Oct 2, 2023, 4:21 PM

#

K thanks for testing. I'm working on trying to repro from my side

#

One sec

odd patio Oct 2, 2023, 4:22 PM

#

thank you.

#

Hello. I've just move Express checkout form from modal to main page.

Screen_Shot_2023-10-02_at_6.23.18_PM.png

#

it works now.

tulip marlin Oct 2, 2023, 4:24 PM

#

Yeah that doesn't surprise me

odd patio Oct 2, 2023, 4:24 PM

#

so I think it is modal issue.

tulip marlin Oct 2, 2023, 4:25 PM

#

Right it is something with the sizing or scroll of the modal I think

odd patio Oct 2, 2023, 4:25 PM

#

Ok. I will find solution

#

Thank you very much for your help.

tulip marlin Oct 2, 2023, 4:25 PM

#

Sure

#

Let us know if we can help further

odd patio Oct 2, 2023, 4:25 PM

#

👍 👍 👍

#

sure. thanks again. bye.

#w3ever