desa-paymentelement-react

[humble elm]

Hello 👋
Give me a moment to take a look

[muted heath]

Thanks 🙂

[solar snow]

desa-paymentelement-react

@muted heath sorry taking over for hanzo. Can you clarify what you're trying to do and what and isn't working? I didn't understand the sentence

is working to do anything but set the layout props.

[muted heath]

I meant to say 'isnt', sorry.

basically, i just want to apply styles to the PaymentElement, but none are applying . The example i saw did it like this, but it's not working in our instance. style: { base: { backgroundColor: '#F5F4EE', fontSize: '16px', color: '#F5F4EE', '::placeholder': { color: '#aab7c4', }, }, invalid: { color: '#9e2146', }, },

[solar snow]

where did you find that example? Can you show the exact page you're looking at?

[muted heath]

Might be referencing the wrong doc here, but this looked to be the one. Closed a bunch of tabs and circled back to this, sorry.
https://stripe.com/docs/js/appendix/style#style_object-backgroundColor

[solar snow]

that doc clearly says

In other cases, consider setting the background color on the Element's container instead.
so that's what you need to do in that case

is that what's confusing you?

[muted heath]

Here's what happens by applying it to the div that contains the paymentElement. so I think sure, that might be what's confusing. I want to change the white parts of the actual paymentelement here.

[solar snow]

The white parts are due to your own container/page. You have an HTML element that you mount the PaymentElement inside of and that's where you need to apply the CSS, outside of PaymentElement

[muted heath]

That doesn't seem to be entirely accurate, because my understanding was that the element is rendered in an iframe..

Or maybe I'm still not quite understanding here.

and within said iframe is a class called root that applies a colorBackground to white.

[solar snow]

Have you tried?

[muted heath]

I just put it in a div, so yeah. <div className="bg-sand"> <PaymentElement id="payment-element" options={paymentElementOptions} className="bg-sand" onChange={(e) => { setPaymentMethodType(e.value.type); }} /> </div>

[solar snow]

          <div id="payment-element" style="width: 400px;background-color: red;">
            <!-- Elements will create form elements here -->
          </div>
        </label>
      </div>``` I did this to mine and I see this

so clearly the background thing works simply by setting it on the parent, does that make sense?

[muted heath]

Doing this: ```const appearance = {
theme: 'light',
variables: {
colorBackground: '#FFFBF2',
}
};

const options = {
clientSecret,
appearance,
};```

and then passing the options value worked instead.

Thanks for your help though.