Change the default placeholder for card Element

[James Kam-Radcliffe]

Does anybody know a way of changing the default placeholder in Stripe Elements card element. I don't really want the placeholder text to be '4242 4242 4242 4242'. I emailed Stripe with no response.

[Andrew]

What platform? 

I know that in iOS there is a placeholder property for the field, you can change it to whatever you want.

[James Kam-Radcliffe]

It's for a web app. I've had a response from Stripe saying that it's not possible at the moment.

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

[Andrew Reed]

Surely you could create some hacky JS to change the property.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[James Kam-Radcliffe]

I'm sure I could. I just found it hard to believe that it's not something that has been considered. 

[Jayme Davis]

It seems like this property wouldn't need to change - what would you like it to be out of curiosity?

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[Eduardo Serrano]

Hi James,

I work on Stripe Elements. To echo Jayme's message, I'm curious what you would like the placeholder to be if we allowed you to change it?

Thanks,

Eduardo

On Monday, February 27, 2017 at 7:47:00 AM UTC-8, Jayme Davis wrote:

It seems like this property wouldn't need to change - what would you like it to be out of curiosity?

On Feb 27, 2017, at 9:46 AM, James Kam-Radcliffe <j.kamradc...@gmail.com> wrote:

I'm sure I could. I just found it hard to believe that it's not something that has been considered. 

On 27 February 2017 at 14:16, Andrew Reed <ar...@nutmeg.com> wrote:

Surely you could create some hacky JS to change the property.

On 27 Feb 2017, at 14:15, James Kam-Radcliffe <j.kamradc...@gmail.com> wrote:

It's for a web app. I've had a response from Stripe saying that it's not possible at the moment.

On 27 February 2017 at 13:44, Andrew <ar...@nutmeg.com> wrote:

What platform? 

I know that in iOS there is a placeholder property for the field, you can change it to whatever you want.

On Monday, 27 February 2017 12:43:08 UTC, James Kam-Radcliffe wrote:

Does anybody know a way of changing the default placeholder in Stripe Elements card element. I don't really want the placeholder text to be '4242 4242 4242 4242'. I emailed Stripe with no response.

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

[James Kam-Radcliffe]

Something along the lines of **** **** **** ****. 

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Eduardo Serrano]

James,

If you don't mind me asking — what's your thinking here? Why do you prefer ****... over 4242... ?

Just curious to understand the context.

Thanks,

Eduardo

[Michael Gargiulo]

Eduardo,

Because it looks cleaner and is much more inline with what a customer would expect from a credit card field they are about to type their number in.

If I saw the "4242..." prefilled I would ask myself any one of the following questions as a customer.

1. What credit card number is that?
2. Whose credit card number is that?
3. Why is it there?
4. Did I some how prefill it?
5. Did someone leave it there etc

I have never seen this done. Not on Amazon, Paypal, Facebook, Google etc.. no one prefills with a random numbers (which is exactly what this is to a potential customer).

These are all bad questions for a customer to ask themselves right as they are about to checkout. The 4242 number has no association to the potential customer and by leaving it like this only opens the door to confusion and honestly less transactions because of it. 

[Eduardo Serrano]

Michael,

Thanks for the feedback!

We tested this across a wide range of sites when building Elements and found that the current placeholder converted well. We're hoping we can share more details on the types of experiments we run on Elements soon, but we'll keep your feedback in mind in the meantime.

Of course, if you have an existing site with a different placeholder and are willing to A/B test this against Elements, we'd love to see your results! 

Thank you,

Eduardo

[Michael Gargiulo]

How would we be able to test a different placeholder?

Can you please send the link for that documentation?

Thanks!

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Remi J.]

Hey Michael,

The idea here is that you would A/B test your existing payment form, with your own placeholder and design versus the new design when using Elements and our own default placeholder. This would help you confirm (or infirm) whether this placeholder is confusing customers and having a negative impact on conversion.

Hope this clarifies a little bit!

Remi

[Nathan S]

I would like to also request the ability to customize this. I just did some testing with a user and they exclaimed, "Who's number is that" when they got to that part of the form. I think I would rather have "0000 0000 0000 0000" or just "Card Number" as the placeholder. I personally thought I had forgotten to turn off something when I went live as that's the main test CC number, so I was confused as well and dug into the documentation to try to figure it out. Perhaps this could be another option for `elements.create()`?

Thanks!

Nate

[Tyler Eckberg]

We're also getting similar feedback from our customers.  They are confused with the 4242 placeholder.  The ability to customize it would be nice.  Even if it was just an options flag that lets you choose from a few pre-determined placeholders instead of letting the developer type in anything.

[Jon Marus]

I've had the same feedback. It really doesn't make a lot of sense to have the number like this. 

[Eduardo Serrano]

Hi everyone,

Thank you for the feedback, and for being persistent :). 

We're going to look into this further and will post again here with an update when we have one.

Eduardo

[Matt J. Sorenson]

At the very least, please add the present constraint to the elements documentation. I just spent ~45 minutes hunting for a means to changing the placeholder, only to arrive here and be disappointed. 

[Nate Flink]

Any update on changing 4242 4242 4242 4242 to be a value that the **REST OF THE WORLD*** might understand? Either 0000 0000 0000 0000 or **** **** **** ****

[Will]

Just got the following response from Stripe:

There won't be a way to change this field, however bear in mind that this is the same across every Stripe account, and most of our users' feedback doesn't mention this being problematic for their card-using customers. However, should you like, you can most certainly add a blurb on your site that explains what's expected in this field for your customers to help avoid any potential confusion when collecting card payment information.

 

We also received bad feedback about this so we're going to implement a different platform because of a placeholder lol

[Remi J.]

Hey Will,

I'm sorry about the frustration here, you should definitely not have to move to a different platform to be able to display the form as you'd like. I've been able to sync with the engineering team working on Elements and they are working on shipping the ability to tweak the placeholder for the card number field.

I don't have an ETA to share just yet but it's in the works and I will follow up as soon as it's ready to be tested!

Hope this helps everyone else asking for this on this thread!

Cheers,

Remi

--

You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Will]

Hi Remi,

Thanks, looking forward to this

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[Daniel Reeves]

It does seem like "4242 4242 4242 4242" would be a mildly confusing placeholder for end users. If it were something more obviously placeholder-y like "1234 5678 1234 5678" I'd be surprised if that tested worse. (I'd also not be surprised if it just didn't matter one way or the other.)

In any case this seems like the kind of thing Stripe should decide for us. (Ie, maybe not cave to the pressure to make it customizable?) That's the whole beauty of Stripe Checkout/Elements -- to leave tricky UX choices like that to the experts so we don't have to worry our pretty little heads. And more customizable fields is pretty-little-head-worrying. :)

But just switching to "1234 5678 1234 5678" sounds smart unless you're convinced something else is better.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

--

http://dreev.es  --  search://"Daniel Reeves"
Quantified Self + Commitment contracts == http://beeminder.com

[Will]

I don't think "1234 5678 1234 5678" would be better. When we tested it, users thought some card number was already entered and didn't realize it was a placeholder. Not sure why anyone would use anything but "Card number" (just like "First name", or "Phone number"). What's surprising is that Stripe uses "Card number" on Stripe Checkout, but "4242 4242 4242 4242" in Elements.

[Jake Harry]

All - I've been following this one and quietly eating my popcorn since it was raised by James in Feb. After Will's latest e-mail I was itching for the 'correct answer'  from a UX perspective (because to be frank I haven't seen one proposed yet) , and decided to start the discussion on stack exchange. There has already been some good feedback and suggestions. http://ux.stackexchange.com/questions/106902/credit-card-field-placeholder-text

I am sure Stripe have UX researchers of their own, but there may be something to learn here from the UX community on SE...

Jake.

Cheers,
Jake

[K d]

I think Stripe should really consider giving the customer an option to either use the default : 4242 42424 42424 42424" or a number of our choice. The 42424 number can be a bit confusing

On Monday, February 27, 2017 at 6:43:08 AM UTC-6, James Kam-Radcliffe wrote:

[Matt J. Sorenson]

With this thread, this point of contention, I am reminded of Jeremy Keith's "Priorities of constituencies"...

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

(so, yes, give us a placeholder override please) 

--

Matt

[Alexandre Lemay]

I do understand that the title states that this would apply to all elements' placeholder, but there is a lot of talk about credit cards and I would like to put emphasis on the post code placeholder too. Most of my clients are in Canada and we have an alpha-numeric system for post codes, 90210 is more confusing than helping in this case.

Thanks 

[Emily Ring]

Not a great solution but a workaround I think we're going with:

https://jsfiddle.net/btyy77c/Loe4wpns/

[John]

Emily,

An elegant solution, thanks for sharing it.

Stripe,

Why is this still needed? There should be a way of changing the default placeholders. If '4242 4242 4242 4242' is the best placeholder, why does Stripe Checkout use 'Card number'?

It seems to me that the selection of a placeholder, if any, is a decision that the developer and/or developer's client should make, it shouldn't be dictated by Stripe.

[Alejo Arias]

Waiting for a placeholder setting too.

Migrating from checkout to elements today and found this unfortunate obstacle.

My bosses definitely don't want 4242 4242 4242 4242 as a placeholder in our payment form.

[Sameer Siruguri]

I don't know if I started with your solution Emily, but I seem to have tried that and then also, found this to work:

<code>

 window.card_no = stripe_elements.create('cardNumber', {hideIcon: false, style: style, placeholder: ''})

</code>

What I do know is that earlier I had set placeholder to JavaScript "false" and it didn't throw an error, but somewhere between 5/25/17 and today, it did. But changing it to a blank string works now.

Ah, the mysteries of Stripe...

On Tuesday, May 23, 2017 at 12:32:26 PM UTC-7, Emily Ring wrote:

[Alejo Arias]

Can confirm what Sameer said.

Even this works as expected:

placeholder: '**** **** **** ****'

It's great to finally be able to change the placeholder!

Sameer: I see you are using 'hideIcon' set to false in the 'cardNumber' element. Do you get the card icon? As far as I can tell, for me that setting only works with the 'card' element, not 'cardNumber'. Would be great to get it in cardNumber too.

[Sameer Siruguri]

Alejo - No, I don't get the card icon. I didn't realize it was in there - obviously, this whole portion of the code was somewhat experimental, and I should perhaps remove it.

The fact that Stripe added type checking to one of the options which broke my app indicates that use of any of these options is not recommended by Stripe.

-- 
Sameer Siruguri
President, Digital Strategies
http://www.dstrategies.org/
@digstrategies
cell: 650 996 0998
-- 

--

You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Eduardo Serrano]

Hi all,

Eduardo here from Stripe.

It looks like some of you discovered this already, but we've just
released the ability to customize the placeholder on the `cardNumber`,
`cardExpiry`, `cardCvc` and `postalCode` Elements. This is now
documented and fully supported:
https://stripe.com/docs/stripe.js#element-options

Thank you again for all your feedback.

- eduardo

>> email to api-discuss...@lists.stripe.com.

>> To post to this group, send email to api-d...@lists.stripe.com.
>> Visit this group at
>> https://groups.google.com/a/lists.stripe.com/group/api-discuss/.
>
>

> --
> You received this message because you are subscribed to a topic in the

> Google Groups "Stripe API Discussion" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/a/lists.stripe.com/d/topic/api-discuss/k7A1JEVvpCU/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> api-discuss...@lists.stripe.com.

[Lajos Cser]

Hi Eduardo,

I haven't read the entire thread and there might be an explanation in one of the replies, but "4242..." is potentially the worst placeholder text I've ever come across, and it's really disappointing that the recommended (and actually, nice-looking and well-working) "card" element still does not support that customisation option, or, at least, does not read simply "Card Number" instead of a fake Visa card.

controller-5fd27e2….js:2 This Element (card) does not support custom placeholders.

	t	@	controller-5fd27e2….js:2
	value	@	controller-5fd27e2….js:1
	(anonymous)	@	controller-5fd27e2….js:2

Thanks for the lovely warning message though.

Regards,

Lajos

[Timothy Pearson]

Is Stripe working on a way to change the placeholder on the card element widget?  The default "42424242" is confusing our users.

Thanks!

[Remi J.]

Hey Timothy,

We've already released the ability to change the fields placeholders when you use the split fields option. You can see an example here: https://jsfiddle.net/kc6mh6tb/

We do not plan to release the option for the single line element for now though. The placeholder is 4242424242424242 though we are looking into potentially replacing this in the future. We will update the thread if this changes but at the moment you need to use the split fields if you want to control this behaviour.

Best,

Remi

On Tue, Aug 8, 2017 at 5:27 AM, Timothy Pearson <tpearso...@gmail.com> wrote:

Is Stripe working on a way to change the placeholder on the card element widget?  The default "42424242" is confusing our users.

Thanks!

--

You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Douglas Jardine]

Stripe sure is stubborn about this one  ;)  Give the people what they want. I too found this to be a little confusing at first in addition to our testing team. I think one option might be to set the placeholder color to a much lighter gray (not sure how easy or hard this is to do). People are usually familiar with the fact that very faded text is placeholder text. 

On Tuesday, August 8, 2017 at 8:02:58 AM UTC-4, Remi J. wrote:

Hey Timothy,

We've already released the ability to change the fields placeholders when you use the split fields option. You can see an example here: https://jsfiddle.net/kc6mh6tb/

We do not plan to release the option for the single line element for now though. The placeholder is 4242424242424242 though we are looking into potentially replacing this in the future. We will update the thread if this changes but at the moment you need to use the split fields if you want to control this behaviour.

Best,

Remi

On Tue, Aug 8, 2017 at 5:27 AM, Timothy Pearson <tpearso...@gmail.com> wrote:

Is Stripe working on a way to change the placeholder on the card element widget?  The default "42424242" is confusing our users.

Thanks!

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.

[Andre Marcelo-Tanner]

I dont think its about that they cant but they have not probably agreed on a way to allow you to customize all the different fields using the React App that is Elements.JS. The Single field is nice, but I'd prefer a whole creditcard.js thing :)

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Eduardo Serrano]

Hi all,

Quick update on this one…

After a lot of research, more in-depth testing and many discussions
with the team, with end customers, and with users (including some of
you!), we’ve made a couple of changes to placeholders in Elements.

(1) The `card` Element now uses “Card number” and “ZIP” (and their
localized equivalents) as placeholders. As mentioned above, we decided
to make this change after testing revealed that “Card number” was more
likely to result in successful payments than “4242 4242 4242 4242”.

(2) The `cardNumber`, `cardCvc`, `cardExpiry` & `postalCode` Elements
now accept a `placeholder` option that allow you to set a custom (or
empty) placeholder, as previously reported. If our default options do
not fit your needs, we want to make sure you have the flexibility to
build exactly the form you’d like.

Thank you all for pushing on this, for your patience, and for your
suggestions along the way.

- eduardo

> You received this message because you are subscribed to a topic in the

> Google Groups "Stripe API Discussion" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/a/lists.stripe.com/d/topic/api-discuss/k7A1JEVvpCU/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[Eduardo Serrano]

Also, just a note (for Douglas and others) that you can indeed set the
placeholder color. Details (and an example) can be found here:
https://stripe.com/docs/stripe.js#element-options, e.g.,

const style = {
base: {
color: '#303238',
'::placeholder': {
color: '#ccc',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
const cardElement = elements.create('card', {style})
- eduardo

[Jake Harry]

Hi Eduardo - I have been watching this thread for a long time. Thanks to you and the whole team for listening to the users.

Cheers,
Jake