nathan-react

[surreal bane]

Hello Nathan, I was wondering if there are any error messages within your inspector logs?

[frail fossil]

Let me check it

These are the warnings in the console log

[surreal bane]

Is there a specific guide you are following for your implementation?
Are you defining the width within style?

[frail fossil]

I was following this.
https://www.youtube.com/watch?v=IhvtIbfDZJI&list=PLy1nL-pvL2M6HFApWUDSGA4Y7btyKx7cE&index=2

[surreal bane]

This is the old guide with reference to Card Element, the new recommended guide is Payment Element, which allows multiple payment methods to be handled automatically, please find the guide: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet

I was wondering if you are wrapping the Card Element in anything else?

[frail fossil]

import React from 'react';
import {withRouter} from 'react-router-dom';
import {CardElement, useStripe, useElements} from '@stripe/react-stripe-js';

const Card = () => {
    const handleSubmit = async (e) => {
        e.preventDefault();
    }

    return (
        <>
            <h1>Card</h1>
            <form id="payment-form" onSubmit={handleSubmit}>
                <label htmlFor="card-element">Card</label>
                <CardElement id="card-element" />

                <button>Pay</button>
            </form>
        </>
    )
}

export default withRouter(Card);

I wrap it in a form element

Just like the tutorial

[burnt meadow]

Hi, I'm taking over this thread. This looks like a CSS issue to me. Do you have a link to your page so I can have a look? Or could you share the CSS applied to this form?

[frail fossil]

I am using localhost right now. Let me send you the css file.

[burnt meadow]

Thanks! Could you try to increase the width of your main element to see what happens? For example:

main {
  width: 960px;
}

[frail fossil]

Nothing changes, the card is still collapsed

[burnt meadow]

Is the width of the form larger now? Or its exactly the same as before?

[frail fossil]

Exactly the same

[burnt meadow]

OK. Could you completely remove the CSS then, so we can confirm that this issue is coming from the CSS?

[frail fossil]

It becomes something like this

[burnt meadow]

Great, so here the card element has the full width. So the issue does come from the CSS!

Is the CSS file the only one you are using on this page (no bootstrap or something similar)?

[frail fossil]

Yes, only CSS

[burnt meadow]

Could you share your App.js file?

[burnt meadow]

Thanks, this file looks correct.
Earlier when I asked you to change the width of the CSS file, it should have changed the width of the card element of you page. Since it didn't, I'm thinking you might have edited the wrong CSS file.
So can you add back your css, and try again to change the width? Make sure you are editing the correct file.

[frail fossil]

Ok, let me try it again

I add the width attribute in #payment-form and the box turns normal.

But I want to make it flexible

[burnt meadow]

You can set the width of the #payment-form directly in the CSS, but you need to make sure you are editing the correct CSS file.

[frail fossil]

I think that's the correct CSS file since that's the only css file in the src folder.

[burnt meadow]

What do you mean exactly by "But I want to make it flexible"?

[frail fossil]

Like the size of the form will change to fit the size of the browser

[burnt meadow]

In this case a simple solution would be to do something like this:

main {
  max-width: 960px;
  width: 100%;
}

[frail fossil]

How about in #payment-form?

[burnt meadow]

Making the main element responsive (like in my example above) should make the #payment-form also responsive, assuming there's no hardcoded width set on the #payment-form.

[frail fossil]

So don't set any fixed width in #payment-form?

[burnt meadow]

Yes exactly

[frail fossil]

The box collapsed again

[sinful torrent]

hard to say much without seeing your exact CSS file! happy to help but this is not completely Stripe-related really, it's just the same as styling any other component of the web page you're building.

[frail fossil]

I just added the attributes above in main and remove any fixed width in #payment-form

[sinful torrent]

I'm using that code + CSS and it seems fine

[frail fossil]

Can you send me the app.js and card.js you use?

[sinful torrent]

they're identical to the ones you shared in this thread(just I uncommented import './App.css'; from your App.js).

[frail fossil]

How about the index.js?

[sinful torrent]

haven't touched it(it's just from our sample project you're using)

although you have clearly changed some things about the project(like you completely changed the App and Card components so hard to say what might have happened overall!)

[frail fossil]

I don't think I have changed anything in App and Card.

But at least I can change the width of the card right now. I am fine with that. Thank you for your help.