harry-mh - Appearance API | Stripe Developers | Page 1

rare abyss Aug 4, 2022, 1:51 PM

#

Good question, checking in to how you may do this

#

Also this sounds like I may need to file a bug report as I'm guessing the height difference isn't intended.

#

Can you send me the snippet of code of what you are currently doing with the Appearance API?

#

I'm having trouble finding out how to fix this and have reached out to my colleagues for help. Will get back to you with what we can find

trim marsh Aug 4, 2022, 2:04 PM

#

Here's my elements appearance config:

#

const elementsAppearance: StripeElementsOptions["appearance"] = {
  theme: "none",
  variables: {
    fontFamily: "maison_neue, sans-serif",
    fontSizeSm: "0.875rem",
    spacingUnit: "0.25rem",
    spacingGridColumn: "1rem",
    spacingGridRow: "1rem",
    colorPrimary: "#003232",
    colorDanger: "#EF4444",
    colorWarning: "#EAB308",
    colorSuccess: "#10B981",
  },
  rules: {
    ".Input": {
      border: `1.5px solid var(--colorPrimary)`,
      boxShadow: "none",
      borderRadius: "0.5rem",
    },
    ".Input:focus": {
      borderColor: "var(--colorPrimary)",
      boxShadow: "0 0 0 1px var(--colorPrimary)",
      outline: "none",
    },
    ".Input--invalid": {
      borderColor: "var(--colorPrimary)",
      boxShadow: "nonw",
    },
    ".Error": {
      fontSize: ".75rem",
      lineHeight: "1rem",
    },
    ".Label": {
      fontFamily: "maison_neue_extended, sans-serif",
    },
  },
};

rare abyss Aug 4, 2022, 2:05 PM

#

Thanks!

trim marsh Aug 4, 2022, 2:06 PM

#

The font I'm using in the input is Maison Neue

#

That's basically it. I'm using elements with @stripe/react-stripe-js but this shouldn't change anything

rare abyss Aug 4, 2022, 2:07 PM

#

Is the height difference always there that or does this height thing only happen once you have submitted the payment info?

trim marsh Aug 4, 2022, 2:07 PM

#

it's always like that

#

as soon as the payment element renders

rare abyss Aug 4, 2022, 2:09 PM

#

Thank you. Also would you happen to have a test page that we could look at? We can repro ourselves but if you already have one that would be helpful

#

And yeah, those both shouldn't cause this as far as I know

trim marsh Aug 4, 2022, 2:12 PM

#

I don't have a test page I'm afraid. I'm still working locally and standing up a test server would take some time

#

My theory as to why it's happening is because, unlike an input, a select doesn't actually have content. The selected item being displayed is not content that influences the flow of the document. I'm not sure of the best fix for this issue though aside for explicitly setting the height of elements.

rare abyss Aug 4, 2022, 2:25 PM

#

That makes sense though unfortunately I don't know of a way to mitigate that at the moment. I talked to a colleague about this and we think the best way forward would be to create a page that reproduces this when possible and report it as an issue on the Stripe.js GitHub.

Unfortunately we haven't been able to recreate it without your specific font yet. I get that spinning up a test server might be too much of an ask in the near future but that really would be the best way for us to look further in to this https://github.com/stripe/stripe-js

trim marsh Aug 4, 2022, 2:30 PM

#

ok, thanks for checking. I'll report back if/when I manage to get a test server working

rare abyss Aug 4, 2022, 2:31 PM

#

Much appreciated, thank you! Sorry we don't have a better workaround at the moment

trim marsh Aug 4, 2022, 3:32 PM

#

FWIW I can reproduce the issue on your demo page (https://stripe.com/docs/payments/payment-element) simply by opening browser devtools and changing the --fontFamily css variable for the payment element to verdana (or some other font)

#

It seems like the issue is browser dependant. Chrome is not affected but Safari and Firefox are. See screenshots

#

rare abyss Aug 4, 2022, 3:37 PM

#

Thanks for the update! That is helpful. So we can repro with just verdana. I can try to make a quick jsfiddle to repro

#harry-mh - Appearance API