Enabling brand icon in `cardNumber` type element in Stripe

Question

When using Stripe elements, is there a way to not use the card element, but still get the auto brand icon show up somewhere (preferably in the cardNumber input field)?

Answer 1

In 2020+, you can use the showIcon option.

const cardNumber = elements.create('cardNumber', {
  showIcon: true,
  placeholder: 'Card Number',
});

Answer 2

At the moment, no, there isn't. But Elements is still a very new product and we're very open to feedback! Please write to Stripe support at https://support.stripe.com/email to request this feature -- I can't promise it'll be implemented, but it'll certainly be considered.

edit: There isn't an option to have the cardNumber field show the brand icon automatically, but it's possible to implement this yourself by using the brand attribute in the element's change event. Here's an example: https://jsfiddle.net/ywain/L96q8uj5/.

Answer 3

showIcon isn't a top level property - it's nested under options, so you'd have to do something like this:

    const OPTIONS = {
  showIcon: true,
};

return (
    <div className="App">
        <CardNumberElement options={OPTIONS} />
    </div>
  );

and it's only available for CardNumberElement, so you shouldn't be setting it for CardExpiryElement or CardCvcElement

• Direct from Stripe Discord Moderators.