#rocky_code
gray skiffBOT
👋 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/1400726328822730783
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
proud geyser
Oh hi Alex, nice name
gray skiffBOT
proud geyser
Hello 👋
regal rover
Customizing the colors of inputs on the checkout form
Are you using Payment Elements, Checkout Sessions or ...?
proud geyser
it's the payment elements
self hosted form on my url, I'm just struggling bc I can't figure out how to change this background color (the First Name input box)
regal rover
That actually looks like the Address Element to me
you could be targeting the wrong element
maybe you could provide some code snippets of how you implemented your page?
proud geyser
oh yea possibly, I thought all the elements were affected by vars?
export const stripeAppearance: Appearance = {
theme: "night",
variables: {
// CRITICAL: This should make ALL inputs use stone-800 background
colorBackground: "oklch(0.14 0.008 250)", // --stone-800 (EXACT SAME AS EMAIL INPUT)
colorPrimary: "oklch(0.7 0.05 85)", // --brand-400
colorText: "oklch(0.8 0.008 250)", // --text-primary
colorTextSecondary: "oklch(0.62 0.008 250)", // --text-secondary
colorTextPlaceholder: "oklch(0.54 0.008 250)", // --text-tertiary
colorDanger: "#dc3545",
colorSuccess: "#28a745",
colorWarning: "#f59e0b",```...etccould you also include the part where stripeAppearance is passed in?
proud geyser
<Elements
stripe={stripePromise}
options={{ clientSecret, appearance: stripeAppearance }}
>
<CheckoutForm
clientSecret={clientSecret}
email={email}
setEmail={setEmail}
setShipping={setShippingInfo}
setNewsletter={setNewsletter}
onRequestClose={handleModalClose}
/>
</Elements>```sorry for the bad spacing, I'll paste my checkout form as well
atleast the jsx give me a sec
{/* ADDRESS */}
<div className={styles.fieldGroup}>
<h3 className={styles.sectionTitle}>Shipping address</h3>
<div className={styles.stripeElementWrapper}>
<AddressElement
options={{
mode: "shipping",
fields: { phone: "never" },
display: {
name: "split",
},
}}
onChange={(e) => {
setAddressComplete(e.complete);
if (e.complete && e.value) {
const { name, address } = e.value;
setShipping({ name, address });
}
}}
/>
</div>
</div>
{/* PAYMENT */}
<div>
<h3 className={styles.sectionTitleWithMargin}>Payment details</h3>
<div className={styles.stripeElementWrapper}>
<PaymentElement
options={{
layout: {
type: "accordion",
defaultCollapsed: false,
radios: false,
spacedAccordionItems: true,
},
fields: {
billingDetails: "never",
},
terms: {
card: "never",
},
}}
onChange={(e) => {
setPaymentComplete(e.complete);
}}
/>
</div>
</div>
that's the payment form atleast the stripe elements in it
regal rover
Ah, thanks for the code snippets
proud geyser
yea, I'm pretty sure the appearance is getting passed correctly, is that the proper rule to set those backgrounds? the docs say this but it doesn't seem to be working so am I doing it wrong or do I need to look closer at my vibe coded POS?
regal rover
give me a while to look into this
proud geyser
cool thank you, I appreciate it teddy thank you
regal rover
I tried on my end and the colors seem to be working as expected. Could you share with me what seems to not be working?