React-stripe-elements: Add the Card icon to the CardNumberElement

[githubdoramon]

The icon is only displayed with the CardElement, but it would be nice to have it on the CardNumberElement (maybe by passing some prop to it)

[cweiss-stripe]

Hi @githubdoramon! Thank you for the suggestion.

react-stripe-elements is a a react-friendly way to use Stripe Elements, so it is limited to the features that Stripe Elements provide.
I will record this as a feature request for Stripe Elements.

[githubdoramon]

@cweiss-stripe, but he icon is already displayed in the CardElement, so isn't it already a stripe element?

[cweiss-stripe]

The card icon is only a part of the CardElement and can currently not be used outside of it or inside the CardNumberElement.

[fabiolnm]

https://jsfiddle.net/ywain/L96q8uj5/

from

https://stackoverflow.com/questions/42262887/enabling-brand-icon-in-cardnumber-type-element-in-stripe

[yinghaochan]

@cweiss-stripe has this been added to elements? The https://stripe.com/elements
page banner has it:

[atty-stripe]

@yinghaochan it has not, sorry. We'll keep you posted if we do!

[SabirAmeen]

@atty-stripe Is there any update on this?

[atty-stripe]

@SabirAmeen sorry, no updates here. We have no current plans to add the icon to the cardNumber Element. This is mostly because we want the cardNumber Element to be as vanilla as possible, allowing users to customize it as they wish. The jsfiddle above is an example of how you can add your own icons.

[chrismanderson]

I just came across this issue, and it's pretty disappointing in light of the fact that this functionality is demoed in the header image on the marketing site (as mentioned by https://github.com/stripe/react-stripe-elements/issues/74#issuecomment-363933186).

I get trying to keep elements as vanilla as possible, but if that's the case, do not advertise functionality that is not actually possible. (And yes, can implement an onchange event, but when you have a marketing page show "this is what you can do" and then you read the documentation which says "nope you cannot do this without some manual work", it's a bummer.

Everything else with Elements is so awesome, and getting this functionality in there would be even better!

[razvan-soare]

Any updates on this ? +1

[mlammert]

I completely agree with @chrismanderson.

If their marketing page and site banner/demo is going to show it working then there should be a way for it to work. I spent 3+ hours trying to figure this out and come to find out it is not possible even though it shows it.

I understand that the elements are vanilla, but it wouldn't be that hard to have a boolean setting for this.

Love Stripe, but this is very disappointing.

[cubiclesoft]

The all-in-one Card Element that Stripe seems to be proud of has major usability and display issues (i.e. it's very buggy across all of the Stripe demos). cardNumber needs an option for an icon. Since you don't want to change the existing "vanilla" Element, here's my recommendation: A new "cardNumberWithIcon" Element. In the same vein, I would also like to see a "cardCvcWithIcon" Element.

The marketing materials for Stripe Elements clearly shows a credit card icon in a cardNumber field. That's misleading/false advertising and carries penalties as per the FTC:

https://www.ftc.gov/news-events/media-resources/truth-advertising

At the very least, Stripe has clearly broken FTC regulations.

In addition, by NOT implementing this into Elements, Stripe is significantly contributing to direct violations of Visa rules regarding online sales on sites that use Stripe Elements:

https://usa.visa.com/run-your-business/accept-visa-payments/posguidelines.html

Which says:

All physical merchant locations, online merchant locations and ATMs that accept Visa products for payment or cash disbursement must display the Visa POS Graphic.

In short, any website that does NOT display the Visa POS Graphic anywhere but uses Stripe payments via the cardNumber Element is in direct violation of Visa's rules regarding acceptance of Visa cards. Most other card processors have similar rules regarding the display of their graphics. Nowhere in the documentation is this mentioned, so there are probably a lot of websites in violation. Visa, Mastercard, et al would be VERY interested in this thread to see Stripe's rather blasé response.

Finally, all the devs who find this thread expect the feature to be built into Elements since your marketing materials show the feature as existing alongside of cardNumber fields. However, it simply does not exist, so each dev who runs into this issue has to go download either a font or a bunch of icons at different sizes, possibly committing licensing violations while doing so AND what they download are most likely outdated icons or will be outdated in a couple of years, and then write and debug HTML, CSS, and JS to show the icons at the appropriate times. That is, make it themselves, which your marketing materials also clearly say that devs won't have to do! Beyond violating Federal regulations and Terms of Service with various card companies and banks, there are a variety of sensible reasons to have the feature as well mentioned elsewhere in the thread. Stripe's position is also in the wrong here as evidenced by the various downvotes against Stripe employee comments within this thread. In addition, Stripe's last valuation was around $22.5 billion USD, so Stripe has plenty of resources to accommodate us. Please make this a priority and just do it. Thanks.

[cg-rsands]

+1 - come on stripe, if the card element can handle it why can card number not?

[mbarrett-stripe]

Hi @cubiclesoft, this is a feature request that we’re aware of and tracking internally. This repository is for support for the react-stripe-elements project. For general Stripe.js and Elements support, please reach out to [email protected]. Thank you!