dux_applepay-verification | Stripe Developers | Page 1

agile cedarBOT Oct 3, 2024, 4:51 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always 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/1291442548367163432

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

karmic ridge Oct 3, 2024, 4:52 PM

#

dux_applepay-verification

hot lintel Oct 3, 2024, 4:52 PM

#

Screen_Shot_2024-10-03_at_12.51.51_PM.png

Screen_Shot_2024-10-03_at_12.51.58_PM.png

#

our domains are registered

#

and enabled

#

Screen_Shot_2024-10-03_at_12.52.36_PM.png

karmic ridge Oct 3, 2024, 4:53 PM

#

Sure but it's likely something is configured wrong! Can you please give me a clear summary, all in one message (not multiple short messages one after the other) of how you integrate.
Please explain the exact integration (PaymentElement, ExpressCheckoutElement, other), what your code look like, explain if Connect is or isn't involved, confirm if anything is done in an iframe or not and what exact URL you are on.

hot lintel Oct 3, 2024, 4:56 PM

#

i'm on staging3.beginlearning.com
using PaymentElement

code looks like this (not exactly because there is other business logic):

<Elements
    key={clientSecret}
    options={options}
    stripe={stripePromise}
>
    <PaymentElement
        id="payment-element"
        options={{
            layout: {
                type: 'accordion',
            },
        }}
        onChange={e => {
            if (e.complete) onComplete?.();
            else onIncomplete?.();
        }}
    />
</Elements>

i'm not sure if there is an iframe, we're using the react stripe elements.
i dont think connect is on

using a client secret for setupIntent

karmic ridge Oct 3, 2024, 4:58 PM

#

Okay, can you share a URL where I can see this live?

#

I looked at our logs and in the past 24 hours that exact domain has been attempted 5 times in Test mode and each time it was found in our systems at least

hot lintel Oct 3, 2024, 5:03 PM

#

go here: https://staging3.beginlearning.com/?featureId=stripeDropinForm
then click 'take the quiz' in the top right hand corner
select 'my child' -> next
add any nickname -> next
select any month, for year, select 2020
select 'critical thinking'
select 'playing independently'
select any option
you'll see a page that says 'Our Recommended Stage', scroll down a little until you see 'what we recommend', then click 'choose plan'
select 12 month plan
fill out account creation form and click continue to shipping
fill out shipping form (you need a real state + zip code, try Connecticut + 06512), click continue to payment
on this page, the stripe form appears, and you can select apple pay, then click 'confirm subscription'

and you'll see the error

karmic ridge Oct 3, 2024, 5:04 PM

#

It's all staging, can you fix it so that I get straight to the payment page without the 15 steps? 😅

hot lintel Oct 3, 2024, 5:05 PM

#

what do you mean by 'its all staging'?

#

the prod version is also the same 15 steps

#

hold on let me see if another page has less steps

#

ok go here: https://staging3.beginlearning.com/settings-user?featureId=stripeDropinForm
you will get redirected to a login screen, use this account:
abdul+9424-125@beginlearning.com / Testing123

scroll down to where you see the payment method. there will be an edit button to the right side, click it and the stripe form should load

karmic ridge Oct 3, 2024, 5:09 PM

#

Perfect, give me a few minutes to try and repro/debug

#

#

I see ApplePay right there

hot lintel Oct 3, 2024, 5:14 PM

#

yea you need to use it

#

it shows up

agile cedarBOT Oct 3, 2024, 5:15 PM

#

hot lintel Oct 3, 2024, 5:16 PM

#

it fails after you try to use it

karmic ridge Oct 3, 2024, 5:16 PM

#

what does "use it" mean? Sorry but that domain error is usually only ever fired before we show ApplePay as an option, not way later.
I think we need a clearer step by step explanation of what is going on and what is or isn't working.
Unfortunately we can't test for real otherwise you would get our real identity

hot lintel Oct 3, 2024, 5:17 PM

#

i'll send you a video then

#

because i'm getting that error after i use the apply pay option

#

not sure how good the video quality is because i had to compress it

wispy briar Oct 3, 2024, 5:25 PM

#

Hi 👋

I'm stepping in as my colleague needed to go

hot lintel Oct 3, 2024, 5:25 PM

#

ok

wispy briar Oct 3, 2024, 5:26 PM

#

Hmmm the Apple Pay modal is showing an invalid billing address error

hot lintel Oct 3, 2024, 5:26 PM

#

is that the source of the error?

#

i can fix that and check

#

but my colleague tried the same thing and got the same error, not sure if she had an invalid billing error

#

also thats a test apple card

#

from here: https://developer.apple.com/apple-pay/sandbox-testing/

wispy briar Oct 3, 2024, 5:29 PM

#

Okay but I'm telling you what I saw in the video. I think you should eliminate all clear errors to ensure we aren't chasing our tails.

hot lintel Oct 3, 2024, 5:29 PM

#

fixed the billing issue but still seeing same error

wispy briar Oct 3, 2024, 5:29 PM

#

I have another question about your integration:

Is your code doing anything before attempting to confirm the payment when the user clicks a button?

hot lintel Oct 3, 2024, 5:29 PM

#

let me check

#

as far as i remember, we just confirm the setup intent

#

which happens after talking with stripe

wispy briar Oct 3, 2024, 5:30 PM

#

Sorry that isn't clear to me.

What is the exact code that is responding to the click event?

hot lintel Oct 3, 2024, 5:31 PM

#

const handleSubmit = React.useCallback(async () => {
    try {
        if (!stripe || !elements) {
            return {};
        }
        const response = await stripe.retrieveSetupIntent(clientSecret);
        if (clientSecret) {

            // - if there's already a payment method on the setupIntent,
            //   that means it was already confirmed
            if (response?.setupIntent?.payment_method) {
                return {
                    paymentMethodId: response?.setupIntent?.payment_method || '',
                };
            }
        }

        const res = await stripe.confirmSetup({
            elements: elements,
            redirect: 'if_required',
        }, {
            expand: ['customer'],
        });

        const paymentMethodId = res?.setupIntent?.payment_method || '';
        return { paymentMethodId };
    } catch (e) {
        return {};
    }
}, [clientSecret, stripe, elements]);```

wispy briar Oct 3, 2024, 5:33 PM

#

Why are you retrieving the Setup Intent at this point?

#

Shouldn't you already have it?

hot lintel Oct 3, 2024, 5:33 PM

#

no i dont have it. we supply the ~~setup intent~~ client secret from a backend service thats shared with other teams

#

and the setup intent resource is not sent along with that

#

does that cause a problem with apple pay?

wispy briar Oct 3, 2024, 5:37 PM

#

Yes

#

The time it takes for that response is enough to Apple Pay to consider the session invalid

hot lintel Oct 3, 2024, 5:38 PM

#

how does that work exactly?

wispy briar Oct 3, 2024, 5:38 PM

#

If you need the payment method information, you should supply that from your back-end

hot lintel Oct 3, 2024, 5:38 PM

#

so its a timing issue?

wispy briar Oct 3, 2024, 5:38 PM

#

Apple Pay has strict requirements about how a session is generated

#

It must have a direct relationship to the button click event by the customer

#

event a very short (100ms) delay can cause Apple Pay to consider a session as unlinked to the button press

hot lintel Oct 3, 2024, 5:39 PM

#

gotcha, ok

wispy briar Oct 3, 2024, 5:39 PM

#

They don't publish any firm timing because they don't want people to be able to game the system

hot lintel Oct 3, 2024, 5:39 PM

#

hmmm

#

ok, so basically i need to confirm the setup right away

wispy briar Oct 3, 2024, 5:43 PM

#

Yeah, pretty much. So if you returned a response from your backend that had both the Setup Intent client secret and a value to indicate if a payment method already exists, you could use that instead of pinging Stripe again.

E.g. ```
response = {
client_secret: XXXXXX
hasPaymentMethod: true|false
}


Then you could just check the `response.hasPaymentMethod` property to handle your logic

hot lintel Oct 3, 2024, 5:44 PM

#

great, thanks

wispy briar Oct 3, 2024, 5:44 PM

#

Happy to shed what 💡 I can 🙂

hot lintel Oct 3, 2024, 5:45 PM

#

could this be added to the docs. i didnt see any references to timing constraints

#

here: https://docs.stripe.com/apple-pay#web.

Apple Pay

Allow customers to securely make payments using Apple Pay on their iPhone, iPad, or Apple Watch.

wispy briar Oct 3, 2024, 5:49 PM

#

I will raise that internally

hot lintel Oct 3, 2024, 5:50 PM

#

awesome. thanks again for the help

wispy briar Oct 3, 2024, 5:50 PM

#

Sure thing! It's why we're here

hot lintel Oct 3, 2024, 5:50 PM

#

actually, let me test this first before i let you go

wispy briar Oct 3, 2024, 5:51 PM

#

Okay, sounds good. You can hard code some values to skip the lookup logic

hot lintel Oct 3, 2024, 5:51 PM

#

well. that might take like 20 minutes because i have to deploy

#

if 20 minutes is fine with you, then i'll do that now

wispy briar Oct 3, 2024, 5:52 PM

#

Sure thing

hot lintel Oct 3, 2024, 6:16 PM

#

ok. i'll have to look further into this because its still not working.
i just realized that the button that we click + the click handler has a few layers of code in between so i'll need to sort those out

i'll reach out again if anything else comes up, thanks

#dux_applepay-verification