Icons for payment method types

[PoojMenon]

Hello,

We're making some changes to the payment methods page under Billing.

1. Below is a snapshot of our proposed solution. These icons in the first column are the brand icons for Visa, Mastercard, Amex and Paypal. We would prefer to use these rather than the outline-style icons available on streamline. Is there guidance on how to go about adding these icons?

2. On the card details page, we would also like to display the card type to the user once they've entered the card number. During usability tests, we received feedback from nearly all users that they would like to see that information. Below is a snapshot of what I'm trying to do. I'm using an input box with a suffix icon, but is there a better way to show this in your opinion.

3. We also need to add a Paypal button as per the Paypal brand guidelines. Any guidance here?

Thank you!

[corinne-nagel]

Hey @PoojMenon

1. For the icons/logos, please reach out to the Brand team. They will be able to help you get icons that match our styles and will look good in the UI.

2. I think the way you used the Visa logo in the suffix is fine, just be sure to use the correct colors so that it matches the styles of the other icons in the suffix/prefix.

3. Since these are things that are pretty specific to Billing, the logos/buttons aren't something that we will add to Paste and your developer will need to import (PayPal buttons etc.), this should should be fairly easy based on the doc you sent.

Let us know if you have any other questions!

[PoojMenon]

Thanks Corinne. I'll get in touch with the brand team for the icons.

On 2. Is there an initial state pattern for what the suffix should be before the user enters their credit card number? I tried using an 'information' icon but that makes it look like its clickable. Would you have any recommendations/suggestions?

Would it make sense to not have the suffix at all initially?

[aayushpi]

@PoojMenon I have a differing perspective here, but I don't think the form input suffixes might be the right direction here. Given that the credit card type validates to any of [visa, mastercard, etc, unknown, invalid], I would recommend adding this information as validation on the form input.

The prefix/ suffix text, as per the docs isText that can be used as a prefix and/or suffix to the value that is entered. Use prefix/suffix to help users format text. In this case the suffix is not helping you format the text but instead reflecting what has been entered and that can become an anti-pattern for the UI if you use it in line with more traditional usage.

[PoojMenon]

Hi @aayushpi,

I agree with you that the suffix is probably not the best location for these logos.

From the usability sessions, the users expect to see immediate feedback when they start entering their card numbers and these logos are familiar to them and it is what they expected to see.

What we're trying to achieve is similar to what's shown in the first option in this Stripe component. As you start entering 4242 or 5555 or 3782, the feedback is immediate where it recognises the card type. We'd like to offer a similar experience to users. We could try something similar to the first and second options on there, but that would provide feedback only on error.

The other concern is also that we could like to display the card type on the details page. Here, the card number is read-only but we would like to indicate to the users the card type.

Would you have any recommendations for ways we could achieve this?

[SiTaggart]

Hi

Seems this thread got lost in the teams inbox, sorry about that.

I think you have two options to display, that result in potentially two different ways to handle the empty state.

Option 1

Use a Suffix. Visually this might be the best even though it doesn't quite match up to the guidelines we provide. I will say they are guidelines though, and you can get creative with them. If it works for you, you should do it.

To handle the state where you don't know the card type you could just not render the suffix at all, and only add it when you know the type. It doesn't always have to be there.

Secondly you could create an "empty credit card" that is the same size and shape as the known credit card types, but is just an outline to recent some layout shift.

Option 2

Render the credit card outside of the input, inline with it so they are next to each other.

Same options for handling the unknown state, but not rendering a card image here would cause some very visible layout shift when it gets added, shrinking the input length. Rendering an "unknown card" image might be better here until you know the type.

[SiTaggart]

Rounding out link to Office hours https://www.loom.com/share/8b6a519fd2a344dfb94dc966e59a18e6 (password in slack)