Stripe: Could not find a mounted element to create a payment method from

Hi,

I'm using the Stripe integration on one of my forms, and I'm encountering the following error when users try to submit a payment.

"Integration error: Could not find a mounted element to create a payment method from."

From what I understand, this typically means the Stripe card input field isn't fully loaded or mounted before submission, causing the payment to fail.

I've already tried:

• Ensuring the Stripe field is visible and not conditionally hidden
• Re-adding the Stripe payment field
• Testing in different browsers

But the issue persists.

Could you please help me resolve this? Let me know if there’s a recommended fix or if this is a known issue with certain conditions or browsers.

Thanks!

Hi Stevin,

Thanks for reaching out to Jotform Support. It looks like the payment field has been removed from your form. Could you integrate the Stripe payment field again so we can check what is happening?

Also, could you provide the website URL where the form is embedded? From the screenshot you provided, it appears that the form is embedded on a website, and having the URL will help us investigate further.

Once we hear back from you, we'll be able to help you with this.

Thanks for getting right back! Here is a link to the form, but that's the best I can do for a url as on my end I am logged into jotform.com to edit the form. On our end, the payment field is there. I will include screenshots of that. Thank you!

https://form.jotform.com/243404713353046

Hi Stevin,

I cloned your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results: Can you try deleting the Stripe Payment Integration, adding it back, and seeing how it goes? Let me show you how:

1. In Form Builder, click on the Stripe Payment intregation field and select the Trash icon.
2. Click on the Add Element menu on the top left side of the page and go to the Payments tab.
3. Drag and drop the Stripe into your form.

Click on the Payment Connection button and select your account.Give it a try and let us know if you have any other questions.

We will try this, thank you. If it doesn't work, is it possible that this is a Stripe issue?

Hi Stevin,

This error typically means the Stripe card element hasn’t fully loaded or mounted before the form is submitted. If re-adding the Stripe field doesn’t resolve it, there’s a chance the issue could be related to how the form is embedded. If the form is embedded on a website, make sure you're using the full iframe embed code. Script-based embeds can sometimes interfere with Stripe’s mounting process.

Embedding your form on a webpage is really easy. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the menu on the left side of the page, click on Embed.
3. Now, select the iFrame embed option.
4. Paste your code into your webpage's embed area, and that’s it.

Reach out again if you have any other questions.

This is not working. On the backend/form builder we can see all the necessary fields to input card/payment info but on the published form it disappears. The name field is there but not the card information fields. This is preventing our students from submitting the form. Stripe tells me this is not an issue on their end.

Hi Stevin,

Can you share the URL of the website where your form is embedded? This will help us take a closer look and better understand what might be causing the issue.

Once we hear back from you, we'll be able to help you with this.

We have several forms that get emailed out, but our applications are here: https://www.daoisttraditions.edu/apply

Hi Stevin,

I took a look at your website and noticed there are several forms embedded. Can you share with us which specific form is giving you trouble so we can check it directly? Also, share a screenshot of the browser console log showing the error when accessing the payment form. That will help us diagnose the issue more efficiently.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Every form/link on that page is having the same issue. However, it will not show up now because we had to remove the payment option for now so our students could apply and register. This is a busy season for us and we are not able to have those options disabled/down for any length of time during business hours. Here is a screenshot though! Thanks.

Here are more screenshots of a form I cloned and left the payment/stripe integration on:

Hi Stevin,

Once you’re able to re-enable the Stripe payment field on your form, we recommend using the iFrame embed method we mentioned earlier to ensure the payment element mounts properly. iFrame is the most reliable option, especially for complex widgets like Stripe, since it isolates the form from any external script conflicts that could interfere with loading.

After you’ve re-added the payment integration and updated the embed method using the iFrame, test the form again and let us know if the issue is still happening. If it does, share a screenshot of the browser’s console log again with the error showing. That will help us dig deeper and pinpoint the source.

As soon as we hear back from you, we can move forward with a solution.

Hi Stevin,

I just saw your reply after submitting mine. Based on your screenshot, it looks like the CORS-related errors and failed resource loads might be preventing Stripe’s card element from mounting properly. We recommend switching to the iFrame embed method as a solution. This approach helps isolate the form from external scripts and improves how Stripe loads.

Give it a try and let us know if you have any other questions.

The issue does not have to do with our website, though, so I'm afraid it's not about embedding. This also happens when we share our registration links, which go out via email.

Thank you for continuing to work with me on this.

Re the cors possibility, I have this failure message, as you probably saw:
"Access to XMLHttpRequest at 'https://events.jotform.com/action?actor=Westcott_Stevin&action=initial_landing&target=form&ref=https:%2F%2Fwww.jotform.com%2Fbuild%2F251814211051139&project=organizationLogo' from origin 'https://www.jotform.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I tried to change the header myself but I guess this is something you all have to do on your end. Can we try that?

Along these lines?

⚠️ You cannot set Access-Control-Allow-Origin: * in your HTML.

That header must be set on the server that's hosting the resource you're trying to access, not in your HTML or JavaScript.

Hi Stevin,

It seems that your screenshots doesn't match the form link you sent to us. Can you confirm if this form is where you're having issues with? I checked the form, but I don't see the product list field and payment integration in it. I also cloned the form to replicate the issue, but it seems to be working properly. See screencast:

I've gone ahead and cleared your form caches. Since we're unable to replicate the issue on a cloned form, can you try to clone your form and test it and see if it works? This will help us isolate the issue. If the issue persists, try switching to Stripe Checkout to see if the issue only happens on Stripe integration.

Keep us updated and let us know if you need any more help.

I am working from a clone of that form. https://form.jotform.com/251814211051139

It is still not working for me on the published or testing end. Stripe checkout works for us as a link but not as a form integration.

Is there a way to escalate this issue and communicate with someone via phone?

Thank you!

Hi Stevin,

Unfortunately, we don't offer live phone support. You can reply to this thread instead, so we can assist you. Regarding your issue, I was able to replicate it when I cloned your form. When I tried switching to Test mode, it seems to have worked properly. See screenshot:

Can you try switching to Test mode and see if it works? See screenshot:

It this works, you can switch back to Live mode again, and it should resolve the issue.

Give it a try and let us know how it goes.

Unfortunately this is not an option on my end. When I hover over "live" it is not clickable and cannot be changed. Do you all have the ability to change the CORS header or would that be stripe? I think we need to try that and I suspect it's something you all would handle since our forms are where any code-related issues could be fixed.

Hi Stevin,

Regarding your question about the CORS header, this is controlled on the server side and unfortunately cannot be changed from your end or by Stripe.

I checked the form you previously shared, but it is now disabled. Could you provide us with another test form where your Stripe account is connected so we can investigate the issue further and escalate if necessary?

Alternatively, would you be able to create a simple test form integrated with Stripe? This will help us check what's happening more effectively.

Once we hear back from you, we'll be able to help you with this.

Yes, thank you so much. My apologies, I was actually creating a more simple form for us to use and had deleted the other. Here is a cloned, simplified version of one of our forms. https://form.jotform.com/251823878073162

I think this screenshot will hopefully be helpful. As you can see, the card information partially shows up under "credit card details" but only to input a name. More sensitive info suddenly disappears when we go from "build" to "preview."

I am including another screenshot which may contain some key info. I tried using Stripe Checkout instead and got the error I captured in the screenshot which implies that some kind of access/permissions may have been revoked.

Thank you for continuing to work on this!

Hi Stevin,

That Stripe error typically means there's a problem with the API key or account permissions used in your Jotform integration. This suggests one of the following:

• The Stripe API key used in the integration is invalid, expired, or revoked.
• The Stripe account linked to the key no longer exists or has been disconnected.
• Application access was manually revoked from the Stripe dashboard.

Try to disconnect Stripe and then reconnect again in Test mode to test. If everything is working fine, you can switch to Live mode. Take a look at the screenshot below:

Give it a try and let us know how it goes.

Hi! It does feel like API could be the issue! However, test mode will not show up for me. Actually, my interface and buttons look a little different than yours. Screenshots attached.

Hi Stevin,

You need to create a new Payment Connection with the Test Mode. Let me show you how to do this:

1. In Form Builder, click on the Credit Card icon on the upper right side of the page.
2. Click on the Plug in icon on the upper right side of the page and click on Add New Connection.
3. Select Stripe and click on Next.
4. Toggle Test Mode.
5. Enter your preferred Connection Name and click on the Connect with Stripe button.
6. Once done, click on Save.
7. From the Payment Connections, select Stripe on test mode.
8. Click on Use.

Give it a try and let us know how it goes.

Thank you for walking me through this! I did create a test mode. When I preview the form in test mode, all the info shows up as it should/as needed. When I switch it back to live, it goes away again. How should we proceed from here?

Hi Stevin,

I checked your live form, and I can now see the Credit Card fields appearing correctly. Check out the screencast below:

Are you still in Test Mode? If yes, can you give it another try in adding a new live payment connection and ensuring you're using the correct Stripe credentials? This will help re-authenticate the Stripe integration. You can follow the workaround previously shared by my colleague Lorevie, but just make sure to select Live Mode during the setup this time.

If you're still having the same issue, we'll do a more in-depth investigation and work on finding a solution.

Give it a try and let us know how it goes.

That seems to have finally done it. Thank you so much!!!