elena-k_code

[ruby relic]

👋 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/1417963311504425012

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

[wheat haven]

Hi there

I'm not sure I understand what you mean here. Can you elaborate on the issue?

It sounds like you are saying your Elements aren't rendering?

[peak elbow]

Card entry bow doesnt allow any data to be entered there, it's kind of static, and no display for card exp date or security code on card,

by card elements I meant card entry boxes - provided by stripe because stripe securily stores such data, not us

Hi, so happy you are here

[wheat haven]

Are you using Stripe Elements here?

Can you share your relevant code?

[ruby relic]

🧑‍💻 How to format code on Discord

Inline code: wrap in single backticks (`)

This:

The variable `foo` contains the value `bar`.

Will turn into this:

The variable foo contains the value bar.

Code blocks: wrap in three backticks (```)

Also, you can specify the language after the first three backticks to get syntax highlighting.

This:

```javascript
function foo() {
return 'bar';
}
```

Will turn into this:

function foo() {
  return 'bar';
}```

Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
  - If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
  - Once you end the code block `Return`/`Enter` works normally again

You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)

[peak elbow]

Thank you for your response.

You are correct. The issue is that the Stripe Elements are not rendering.

The secure form fields (the card element) are not being injected into the div with the ID card-element. The container remains blank and does not allow for card information to be entered.

I have confirmed that the Stripe.js library is loaded, and the page is hosted on a whitelisted domain (https://dentalsocialfundspayback.web.app/billing.html) with a live Publishable Key.

I suspect there is an issue with the initialization of the elements or card object that is failing silently.

[wheat haven]

Looks like a styling issue on your #card-element div

When I inspect the page and disable the styling on that div then the Card Element shows up

It is rendering just fine but is being hidden due to the styling