Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Removing input labels from Stripe Payment Element

I am using the Stripe Payment Element in my react app. How can I remove the labels above the inputs:

enter image description here

Using the appearance API I have tried these rules:

'.Label': {
display: 'none',
visibility: 'hidden',
},
'.Label--empty': {
display: 'none',
visibility: 'hidden',
},

EDIT:
Found a solution that worked in my case. Using the appearance API you can set Label to ‘floating’ and the labels will be put inside the inputs:

code:

appearance: {
      labels: 'floating',

How it looks:

enter image description here

Tags:

2

Answers


  1. 0

    Neither display or visibility are supported CSS properties in the Appearance API. I have tested a number of options and I don’t think you can remove the label text entirely.

    The form is rendered inside an iframe so the Appearance API is the only way you have to apply styling to it.

    Login or Signup to reply.
  2. 0

    You can set the font-size of the label to 0 if you’d prefer to not show the labels visually and only have the placeholders visible.

    appearance: {
  rules: {
    '.Label': {
      fontSize: '0'
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search