Mahesh

[regal spruce]

Hi there!

Give me a few minutes to look into this.

[modest sparrow]

Hey! Taking over for my colleague.
On which platform you are trying to achieve this? web, androidn, ios or Reactnative ?

[hoary saffron]

on web

i'm using react

i have tried this rule in appearance
rules: { '.AccordionItem': { border: '1px solid #e4eaf5', marginBottom: '10px', }, }

but it doesn't seemed to work

[modest sparrow]

For the spacing, try using variable.spacing: 10px

https://stripe.com/docs/elements/appearance-api?platform=web#commonly-used-variables:~:text=using rem units.-,spacingUnit,-The base spacing

[modest sparrow]

"margin" is not applied to AccordionItem:
https://stripe.com/docs/elements/appearance-api?platform=web#supported-css-properties:~:text=TermsText%2C Text-,margin,-Action%2C BlockAction

I just tested with this config:

const appearance = {
    theme: "stripe",
    rules: {
      ".AccordionItem--selected": {
        padding: '30px',
        border: "3px solid #000000",
      },
      ".AccordionItem": {
        padding: '30px',
        border: "3px solid #000000",
      },
    }
  };

And I get this result

[gaunt forge]

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!

[hoary saffron]

i tried with this config
`appearance: {
theme: 'stripe',
variables: {
fontFamily: "'Roboto', sans-serif",
},
rules: {
'.AccordionItem': {
border: '1px solid #e4eaf5',
padding: '30px',
},

          '.AccordionItem:hover': {
            border: '1px solid #008ce6',
          },

          '.AccordionItem--selected': {
            border: '1px solid #008ce6',
            padding: '30px',
          },
        },`

but the UI is not coming as you, the border bottom is trimmed for some reason

[modest sparrow]

So it looks like the padding is working so far

for the border, try border: "3px solid #000000", and see if it has effect in your integration and if you get same result as mine

[hoary saffron]

this is with 3px border width

as per you config if i use same color for item & selected then its looking okay, but if i use different colors for item & selected, then selected is missing border on top or bottom

[modest sparrow]

Ok great, the style is taking changes

[modest sparrow]

yes, I see, I don't thing that's something you can override further

[hoary saffron]

i'm trying to mimic this styling of different payment methods (with boxed design & hover styling and some margin around each payment method)

is there a way to mimic this using the rules?

[modest sparrow]

Not sure honestly, but I invite you to do some test. Here is the list of all supported css properties according to each supported class
https://stripe.com/docs/elements/appearance-api?platform=web#supported-css-properties

[hoary saffron]

okay, one last question is there way to avoid this ... More option, and list all payment methods by default?

[modest sparrow]

AFAIK, nope.

[hoary saffron]

okay, thanks for your time

[modest sparrow]

You're welcome!