nimheru_payment-element-placeholders | Stripe Developers | Page 1

zealous gardenBOT Apr 30, 2024, 9:54 AM

#

👋 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.

indigo trellisBOT Apr 30, 2024, 9:54 AM

#

stoic bolt Apr 30, 2024, 9:54 AM

#

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

spare parcel Apr 30, 2024, 9:55 AM

#

Can you share your full code please

stoic bolt Apr 30, 2024, 9:56 AM

#

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 Apr 30, 2024, 9:59 AM

#

Your code works fine for me:

stoic bolt Apr 30, 2024, 9:59 AM

#

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 Apr 30, 2024, 10:01 AM

#

Not today I'm afraid

stoic bolt Apr 30, 2024, 10:01 AM

#

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

spare parcel Apr 30, 2024, 10:03 AM

#

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

stoic bolt Apr 30, 2024, 10:05 AM

#

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

Stripe JS Reference

spare parcel Apr 30, 2024, 10:06 AM

#

Ah, split elements

stoic bolt Apr 30, 2024, 10:07 AM

#

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 Apr 30, 2024, 10:09 AM

#

Will share the feedback, thanks!

zealous gardenBOT Apr 30, 2024, 10:13 AM

#

nimheru_payment-element-placeholders

#nimheru_payment-element-placeholders