nimheru_payment-element-placeholders

[zealous garden]

👋 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/1234805088384712745

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[stoic bolt]

As an aside; is there a way for us to hide or customise the postal code placeholder?

[spare parcel]

Can you share your full code please

[stoic bolt]

elements = stripe.elements({
    clientSecret: response.client_secret,
    fonts: [
      {
        cssSrc: 'https://fonts.googleapis.com/css?family=Poppins:400',
      }
    ],
    appearance: {
      theme: 'flat',
      labels: 'floating',
      variables: {
        borderRadius: '0.25rem',
        fontFamily: 'Poppins, sans-serif',
        fontLineHeight: '1.4',
        fontSizeBase: '16px',
        fontSmooth: 'always',
        colorIconMenu: '#eb601a',
        iconColor: '#eb601a',
        tabIconColor: '#eb601a',
        tabIconSelectedColor: '#eb601a',
      },
      rules: {
        '.Input': {
          backgroundColor: '#fefefe',
          border: '1px solid #555555',
          padding: '0.7rem 0.5rem',
        },
        '.Input::placeholder': {
          color: '#fefefe',
        },
        '.TabIcon--selected': {
          fill: '#eb601a',
        },
        '.AccordionItem--selected': {
          color: '#444444',
        },
      }
    }
  });

Having a real post code as a placeholder is causing confusion with our users

[spare parcel]

Your code works fine for me:

[stoic bolt]

hmm ok let me do a clean compile and double check

ideally we wouldnt want to hide it for all inputs, are we able to just target the post code specifically?

or even better customise the placeholder value?

[spare parcel]

Not today I'm afraid

[stoic bolt]

with the old elements you could pass in a placeholder option when creating them so this seems like a regression

[spare parcel]

You mean pre-fill the values? Slightly different to a placeholder

[stoic bolt]

no you could actually set the placeholder too https://docs.stripe.com/js/elements_object/create_element?type=cardNumber#elements_create-options-placeholder

[spare parcel]

Ah, split elements

[stoic bolt]

so i've recompiled and the current "hide everything" method is now working for me thanks. Please could you feedback to the relevant teams that it would be desirable:

• to be able to customise the placeholders for inputs in the same way we can provide defaultValues
• to be able to target specific inputs with the appearance API
• to not have the default UK placeholder for postal_code be a real post code!

(on that last point, the placeholders provide no example value for expiry date or cvc so why postal code?)

and at least card number is an obvious fake

[spare parcel]

Will share the feedback, thanks!

[zealous garden]

nimheru_payment-element-placeholders