immy_paymentelement-dimensions

[wicked needle]

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

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

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

[limpid jay]

@frosty hull that seems like a really small width to me. But I'm not sure what your question is about?

[frosty hull]

Here is a screenshot for reference if that helps

This is the relevent code for my Payment.js file

const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className='main-swipe'>
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <PaymentForm clientSecret={clientSecret} listingType={listingType} amount={amount} />
        </Elements>
      )}
    </div>
  );

This then feeds into my PaymentForm.js

const styles = {
    layout: 'tabs',
  };

  return (
    <form onSubmit={handleSubmit} className="payment-form">
      <PaymentElement id="payment-element" options={styles} />
      <button type="submit" disabled={!stripe || isLoading} className='payment-submit'>
        {isLoading ? <div className="spinner" id="spinner"></div> : `Pay ${amount}`}
      </button>
      <span id='payment-message'>{renderMessage()}</span>
    </form>
  );

[limpid jay]

Why is the height of your UI so small?

like there's a huge blank space that isn't filled as if you're constraining PaymentElement to a much smaller width/height. This is definitely something you control

immy_paymentelement-dimensions

[frosty hull]

I'm not sure hat I do which is my issue.

I removed main-swipe from the Payment.js and unlinked my style.css to just have imported styles

const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <>
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <PaymentForm clientSecret={clientSecret} listingType={listingType} amount={amount} />
        </Elements>
      )}
    </>
  );

This is PaymentForm.js now:

const styles = {
    layout: 'tabs',
  };

  return (
    <form onSubmit={handleSubmit} className="payment-form">
      <PaymentElement id="payment-element" options={styles} />
      <button type="submit" disabled={!stripe || isLoading} className='payment-submit'>
        {isLoading ? <div className="spinner" id="spinner"></div> : `Pay ${amount}`}
      </button>
      <span id='payment-message'>{renderMessage()}</span>
    </form>
  );

Here is also the style for id='root'

Here is body:

and html:

[limpid jay]

Sorry I'm getting super lost with all your pictures. As far as I can tell your whole page has a max height right now and it has nothign to do with PaymentElement right?
For example, put a div inside your form and make it all red. Is the entire whitespace now red? Or just the thing you have the overlay on?

[frosty hull]

You want me to add a red background div within the form element, correct?

[limpid jay]

yes

[frosty hull]

Do you want me to nest the content within the red div within the form or just place the red div in the form?

[limpid jay]

It doesn't matter

[frosty hull]

Nothing shows
You can see the elements on the top right showing the red div I added

[limpid jay]

you added no dimensions/controls to your red div to fill any of the space right? I got to run but @queen swallow is going to help you once you provide more details/information. Try removing PaymentElement entirely for a sec and get your red div to fill the whole space

[frosty hull]

Thank you @limpid jay

I've gone ahead and given the red div a heigh and width and this is now on the screen

[queen swallow]

Hello! I'm taking over and catching up...

[frosty hull]

No worries, thank you for your help

[queen swallow]

Can you share a screenshot showing the styles impacting the #payment-element container?

[frosty hull]

Currently I have them disabled to just get the raw styles to work

[queen swallow]

It's going to be really difficult to figure this out via screenshots; is this online anywhere? If not, can you make a minimal test case and put that online so I can debug it directly?

[frosty hull]

It's not hosted, just local currently, I can attempt to create a test case online to see. If I'm not applying any styles of my own, should the imported elements work for mobile in my web app?

[queen swallow]

Not sure what you mean by "the imported elements"?

[frosty hull]

import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

My apologies if thats not the correc term

[queen swallow]

Oh, yeah, those should work fine in a web app on mobile.

[frosty hull]

My problem seems to just stem from how big the iframe is. Because if I give a height to either form or the div with id="payment-element' it does make the fields appear on the screen

[queen swallow]

It's really hard to tell what's happening just from those screenshots. I'm confident I can help you sort this out, but I need to be able to view and debug it directly myself.

[frosty hull]

I'll see if I can get something hosted. I'll get back with you. Thank you

Is there any thought you have as to what the issue might be?