xqprtzcv | Stripe Developers | Page 1

subtle oliveBOT May 26, 2023, 6:22 PM

#

placid hedge May 26, 2023, 6:23 PM

#

Hello! I don't think we have an existing theme for that, but you should be able to do that (or get close) with the appearance API: https://stripe.com/docs/elements/appearance-api

cold root May 26, 2023, 6:24 PM

#

OK, I will mess around with it more.

#

Thank you

#

I believe I would need to do something like this to hide the labels, but it doesn't seem to be working, any Idea what is wrong with that?

rules: {
  '.Label': {
      display: "none"
  }
}

placid hedge May 26, 2023, 6:27 PM

#

display isn't a supported property: https://stripe.com/docs/elements/appearance-api?platform=web#supported-css-properties

#

You can set the opacity on Label though.

cold root May 26, 2023, 6:35 PM

#

As I am looking through this another, unrelated question arose. Is there some stripe element for saved addresses like the one displayed here:

Screenshot_2023-05-26_at_11.33.45_AM.png

placid hedge May 26, 2023, 6:36 PM

#

No, there isn't.

cold root May 26, 2023, 6:36 PM

#

OK, thats what I thought, just checking.

subtle oliveBOT May 26, 2023, 6:47 PM

#

cold root May 26, 2023, 7:13 PM

#

Is it possible with the appearance api to get a border radius on only the top corners and bottom corners of the address element (like in the first checkout screen shot I sent)?

pale delta May 26, 2023, 7:16 PM

#

Hi taking over for Rubeus as they had to step out

#

Can you describe a little more what you're trying to achieve?

#

You just want rounded corners around the address element?

cold root May 26, 2023, 7:17 PM

#

Yes, but only on the first and last element like in the checkout screenshot above. Right now I am getting this:

#

Screenshot_2023-05-26_at_12.17.35_PM.png

#

With:

  '.Block': {
      borderRadius: "100px"
  }

pale delta May 26, 2023, 7:22 PM

#

Looks like we support borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius: https://stripe.com/docs/elements/appearance-api?platform=web#supported-css-properties. Should be able to control it that way I believe

Elements Appearance API

Customize the look and feel of Elements to match the design of your site.

cold root May 26, 2023, 7:26 PM

#

I believe I would need some child selector to get just the first and the last, because it is still showing up on all of them.

Screenshot_2023-05-26_at_12.25.13_PM.png

#

to get that I added borderTopLeftRadius to the '.Input' rule

pale delta May 26, 2023, 7:35 PM

#

Can you share your current css?

#

Tbh not sure if you can just do it for the first and last input fields

cold root May 26, 2023, 7:36 PM

#

Yeah, I don't think it is possible at this point, but this is what I have for my appearance object:

let appearance={
      theme: 'stripe',
        // labels: 'floating',
      variables: {
        colorPrimary: hexColors["green"],
        colorBackground: "white",
        colorText: hexColors["black"],
        colorDanger: hexColors["red"],
        // fontFamily: 'Futura, "Trebuchet MS", Arial, sans-serif',//'Ideal Sans, system-ui, sans-serif',
        fontFamily: 'futura-pt, Arial, sans-serif',//'Ideal Sans, system-ui, sans-serif',
        spacingUnit: px+'px',
        borderRadius: 0*px/10+'px',
        spacingGridColumn: 0,
        spacingGridRow: 0,
        // See all possible variables below
  },
rules: {
  '.Label': {
      fontSize: "0",
      lineHeight: "0",
      margin: "0",
    // fontWeight: '700',
  },
  '.Input': {
      margin: "0",
      // borderTopLeftRadius: "50px"
    // fontWeight: '700',
  }
}
};

pale delta May 26, 2023, 7:39 PM

#

Oh ok yeah won't be possible: ```.Tab .TabLabel, ancestor-descendant relationships in selectors are unsupported

From https://stripe.com/docs/elements/appearance-api?platform=web#all-rules

#

Ancestor descendent rules just aren't supported

cold root May 26, 2023, 7:45 PM

#

Ok, thanks for your help

#xqprtzcv