#huncsuga_code
ocean sundialBOT
👋 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/1427603730622054483
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
scenic ferry
The full code:
return {
theme: 'flat',
variables: {
fontFamily: '"Source Sans 3", system-ui, sans-serif',
fontWeightNormal: '400',
fontSizeBase: '14px',
fontLineHeight: '20px',
spacingUnit: '4px',
borderRadius: '8px',
focusBoxShadow: 'none',
colorPrimary: '#FFFFFF',
colorBackground: COLORS.secondary[200],
colorText: COLORS.secondary[800],
colorTextSecondary: COLORS.secondary[700],
colorTextPlaceholder: COLORS.secondary[300],
},
rules: {
'.AccordionItem': {
padding: '0 16px 24px 16px'
},
'.Input': {
backgroundColor: '#FFFFFF',
border: '1px solid ' + COLORS.secondary[400],
color: COLORS.secondary[800],
padding: '8px 12px',
},
'.Input:focus': {
border: '1px solid ' + COLORS.primary[500],
boxShadow: '0 0 0 1px ' + COLORS.primary[500]
},
'.Input--invalid': {
border: '1px solid #FCA5A5'
},
'.Input::placeholder': {
color: COLORS.secondary[300]
},
'.Label': {
color: COLORS.secondary[700],
fontSize: '14px',
lineHeight: '20px',
fontWeight: '500',
marginBottom: '4px',
},
'.Error': {
color: '#EF4444',
fontSize: '12px',
lineHeight: '16px',
marginTop: '6px',
},
},
};
sour flame
👋 Yes, please share the screenshots
scenic ferry
The part in the red frame is the stripe form, which can be modified with the appearance API.
sour flame
Where's the dropdown that you're trying to style?
scenic ferry
Here, with the accordion layout. And I need to hide the blue icon and text above — or at least hide the icon and change the text. The reason it’s not visible in the previous screenshot is that the primary color was white, but that’s not a good fix since the .AccordionItem also adds unwanted bottom padding to that section.
sour flame
Is there a live URL I can go to to see what you've currently got?
scenic ferry
Unfortunately not
sour flame
Why do you want to hide the label? How would you know what's selected, and how would you toggle?
scenic ferry
I don’t need to toggle between payment methods — I only use card payments.
I just need the three card input fields (card number, expiry date, and CVC).
So, the label and icon above aren’t necessary in my case.
sour flame
Do you have an example payment intent ID created with your example?
scenic ferry
Yes,
pi_3SI3ZMGfmZNO7VNh1nKcFhW3
pi_3SI3gAGfmZNO7VNh0JPdAnFc
pi_3SI3grGfmZNO7VNh12Wcq16o
sour flame
I think the best approach would actually be to set the layout type to tabs instead of accordion - this will mean the label won't show when you just have one payment method: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type
scenic ferry
It's work, and I have on more question
ocean sundialBOT
scenic ferry
Why not working the backgroundColor?
return {
theme: 'flat',
variables: {
fontFamily: '"Source Sans 3", system-ui, sans-serif',
fontWeightNormal: '400',
fontSizeBase: '14px',
fontLineHeight: '20px',
spacingUnit: '4px',
borderRadius: '8px',
focusBoxShadow: 'none',
colorBackground: '#F3F4F6',
colorText: COLORS.secondary[800],
colorTextSecondary: COLORS.secondary[700],
colorTextPlaceholder: COLORS.secondary[300],
},
rules: {
'.AccordionItem': {
padding: '0 16px 24px 16px'
},
'.Input': {
backgroundColor: '#FFFFFF',
border: '1px solid ' + COLORS.secondary[400],
color: COLORS.secondary[800],
padding: '8px 12px',
},
'.Input:focus': {
border: '1px solid ' + COLORS.primary[500],
boxShadow: '0 0 0 1px ' + COLORS.primary[500]
},
'.Input--invalid': {
border: '1px solid #FCA5A5'
},
'.Input::placeholder': {
color: COLORS.secondary[300]
},
'.Label': {
color: COLORS.secondary[700],
fontSize: '14px',
lineHeight: '20px',
fontWeight: '500',
marginBottom: '4px',
},
'.Error': {
color: '#EF4444',
fontSize: '12px',
lineHeight: '16px',
marginTop: '6px',
},
},
};
faint temple
I just tested colorBackground: 'red' on my end and it worked.
for a test, can you simplify your code with just colorBackground: 'red' and see if it works?
scenic ferry
Not working.
My full relevant code:
return {
theme: 'flat',
variables: {
fontFamily: '"Source Sans 3", system-ui, sans-serif',
fontWeightNormal: '400',
fontSizeBase: '14px',
fontLineHeight: '20px',
spacingUnit: '4px',
borderRadius: '8px',
focusBoxShadow: 'none',
colorBackground: 'red',
colorText: COLORS.secondary[800],
colorTextSecondary: COLORS.secondary[700],
colorTextPlaceholder: COLORS.secondary[300],
},
rules: {
'.AccordionItem': {
padding: '0 16px 24px 16px'
},
'.Input': {
backgroundColor: '#FFFFFF',
border: '1px solid ' + COLORS.secondary[400],
color: COLORS.secondary[800],
padding: '8px 12px',
},
'.Input:focus': {
border: '1px solid ' + COLORS.primary[500],
boxShadow: '0 0 0 1px ' + COLORS.primary[500]
},
'.Input--invalid': {
border: '1px solid #FCA5A5'
},
'.Input::placeholder': {
color: COLORS.secondary[300]
},
'.Label': {
color: COLORS.secondary[700],
fontSize: '14px',
lineHeight: '20px',
fontWeight: '500',
marginBottom: '4px',
},
'.Error': {
color: '#EF4444',
fontSize: '12px',
lineHeight: '16px',
marginTop: '6px',
},
},
};
faint temple
Not working.
did you simplify your code to only include the background color like I suggested?