baris-paymentelement | Stripe Developers | Page 1

pseudo sonnet Feb 8, 2022, 1:32 PM

#

let me look into this but I think it just uses the style of the DOM element you are mounting the PaymentElement to, so that's where you'd set the background

shadow junco Feb 8, 2022, 1:36 PM

#

Oh I see, I have set color-scheme: dark; on the root <html>, just found out that was caused by that. By removing it the white background disappeared.

#

Bildschirmfoto_2022-02-08_um_14.36.40.png

#

now it looks like this, is there any workaround for the css property color-scheme?

pseudo sonnet Feb 8, 2022, 1:37 PM

#

hmm

#

to clarify, what do you mean by workaround? sorry, getting confused

shadow junco Feb 8, 2022, 1:44 PM

#

My application has light and dark mode themes and by toggling the darkmode Im setting color-scheme: dark at the root level of the DOM. This seems to break the background of the PaymentElement.

pseudo sonnet Feb 8, 2022, 1:44 PM

#

ah ok yeah I see

#

hmm

#

I can't get this to work

shadow junco Feb 8, 2022, 1:46 PM

#

a better visualization of it.

pseudo sonnet Feb 8, 2022, 1:50 PM

#

can you clarify if you actually intend to change the color scheme dynamically?

#

but I agree this seems like a bug

#

I'll work with the relevant team on trying to fix this or find a workaround

shadow junco Feb 8, 2022, 1:58 PM

#

Oh thank you! Should I open a github issue in the react-stripe-jsjs for that?

pseudo sonnet Feb 8, 2022, 2:01 PM

#

you could do that, but let me keep this thread open for a bit and see if my colleagues have any input first

pseudo sonnet Feb 8, 2022, 2:37 PM

#

one thing that at least works for me is
<div id="payment-element" class="element-container">
+

  color-scheme: dark;
}

.element-container{
  background-color: black;
  color-scheme: normal;
}

const appearance = {
    theme: 'night',
  };
  elements = stripe.elements({ appearance, clientSecret });

(not React but you get my meaning I'm sure). i..e applying the normal scheme to the containing div for the PaymentElement and then manually setting background color.

It's really not ideal though.

#baris-paymentelement