Demoox | Stripe Developers | Page 1

obtuse treeBOT Dec 12, 2022, 6:11 PM

#

tulip shoal Dec 12, 2022, 6:12 PM

#

Hi 👋

How are you mounting the payment element?

#

We provide a good amount of details for this integration in our Accept a Payment doc here:
https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-collect-payment-details

midnight cape Dec 12, 2022, 6:15 PM

#

Hi,

Only with a div, like this:
<div id="payment-element" class="col-sm-6 mb-3"></div>

I followed the documentation but I don't see the problem

tender bison Dec 12, 2022, 6:18 PM

#

👋 stepping in as Snufkin needs to step away

#

Are you seeing this locally? Is there somewhere I can reproduce that warning?

midnight cape Dec 12, 2022, 6:25 PM

#

Hi Bismarck

Yes I'm local but I opened an access point for you with ngrok,

here is the link :
https://e456-2a01-e34-ec31-2040-146b-7718-f950-b2df.eu.ngrok.io/signin
E-mail : thomas.client@test.com
pass: azerty

To see the error:
https://e456-2a01-e34-ec31-2040-146b-7718-f950-b2df.eu.ngrok.io/client/charge-card.php

tender bison Dec 12, 2022, 6:28 PM

#

Thanks looking

#

Hmm I'm not seeing Payment Element

#

I just see a pre-filled 3184 card?

#

Can you give me exact steps?

midnight cape Dec 12, 2022, 6:30 PM

#

Yes you have to click on it and the error will appear

tender bison Dec 12, 2022, 6:30 PM

#

Click on what?

midnight cape Dec 12, 2022, 6:30 PM

#

submit button

tender bison Dec 12, 2022, 6:33 PM

#

Hmm okay I see the error warning but I don't see Payment Element? I just see an "Authenticate purchase" button? Is this expected? The warning does indicate that your div also has children which can affect the layout and performance. But that shouldn't really stop Payment Element from rendering and is likely a red-herring

#

I see other errors in Console about failing to retrieve dependencies

#

Let's back up though

#

Why would Payment Element be rendering at this point when you are in an Authenticate Purchase step?

midnight cape Dec 12, 2022, 6:37 PM

#

You must also click on authenticate the purchase, I am sorry for my lack of details.

Then the payment-element will be displayed correctly, but with this small error on the console.

Is it unimportant?

#

ahh sorry !!!

#

wait

#

I got the wrong test card, added the new one...sorry

#

you can retest

tender bison Dec 12, 2022, 6:49 PM

#

Thanks looking

#

Hmm okay

#

I don't see any children

#

Do you have any hidden divs or anything ?

midnight cape Dec 12, 2022, 7:05 PM

#

Absolutely none, I made sure to delete the comments which could possibly be a problem as I have seen on posts from people encountering this error, but it still persists.

If you think it's not a problem, maybe I should just ignore it, right?

tender bison Dec 12, 2022, 7:06 PM

#

Checking

#

Okay

#

looks like you are calling mount twice in your JS code

#

So that's triggering the warning

midnight cape Dec 12, 2022, 7:17 PM

#

Yes I called twice. I'll take it off and see it

tender bison Dec 12, 2022, 7:17 PM

#

Yep you should only call it once

#

If you have it call mount twice then the second time there will already be children due to the first mount and you'll see that warning

midnight cape Dec 12, 2022, 7:22 PM

#

Indeed, Bismarck, that was the problem.

The error no longer appears.

Thank you very much for taking the time to help me solve this problem. 🙂

#Demoox