1443042 - Labels for Credit Cards

Status: RESOLVED WORKSFORME

(Toolkit :: Form Autofill, enhancement, P3)

Description

[Steffan Mejia]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180206200532

Steps to reproduce:

Add a credit card
Prompts for credit card number, expiration, and name on card


Actual results:

In Saved Credit Cards dialog, ****  nnnn, Firstname Lastname  is shown

Due to cards with identical last-four & expiration month/year, it can be difficult to distinguish between saved cards solely by last-four and expiration.


Expected results:

An [optional] label should be available for users to distinguish between very similar cards [same  last-four and expiration].   This label should display in all dropdowns and dialogs from which a user may select a saved credit card (including the Saved Credit Cards dialog)

Comment 1

[Matthew N. [:MattN]]

Hmm… interesting problem… I would guess and hope that this is somewhat rare. Are the first six digits also the same?

Comment 2

[Sam Foster [:sfoster] (he/him)]

This is something we are considering, but we'll need UX and product input.

Comment 3

[Jim Mathies [:jimm]]

• Displayed in autofill drop down and in the management view.
• Full card numbers are encrypted so we can't access that data until user authentication.
• Need to figure out how many identifying elements we current display (including card brand icon)
• We may still end up with identical entries
• Future - wait for testing

Comment 4

[Steffan Mejia]

Encryption of credit card details shouldn't impact this; if the user is allowed to provide a label at card creation time, the label can be associated with a hash or a prefix or suffix of the encrypted card number (or the entire encrypted value). The sole purpose of the label would be user disambiguation.

Comment 5

[lrionth]

Attachment: firefox credit card autofill

It would be useful to add a label/nickname for cards even if they have a different card numbers. If you have multiple credit cards types saved to firefox, you need to reference the last 4 digits to differentiate them. If you can add a label (such as name of lender "citi", "chase", or label a card for its purpose like groceries or utilities or something), it would make it easier to select a particular card.

Comment 7

[Teal Bauer [:teal]]

Chiming in, I don't think this case is particularly rare these days. I currently have 12 cards stored in Firefox - one for each major provider (Visa, MC, Amex) because not everyone accepts everything, two cards for business accounts, and then cards specifically for good FX rates, in other currencies, etc. The current listing format is a bit useless because I only remember the last-4 for the main ~3 accounts I use, but always have to look up another reference for e.g. business purchases (which happen more rarely). With neobanks pushing niche credit and debit card solutions left and right, I imagine I'm not the only one. Having an optional label feels like a low-cost way of solving this for the people who need it without impacting the people who don't.

Comment 8

[Teal Bauer [:teal]]

Attachment: Bug 1443042 - Add custom label to saved credit cards r=sgalich

Basic functionality to allow adding custom labels to saved credit cards.

Currently does:

• In Preferences, when editing saved credit cards, user can now add a
  custom label
• Custom label is preserved in settings
• Custom label is added to autocomplete popup for credit cards in the
  primary label

Still open:

• Tests
• Potentially sync changes?
• Visual fixes for cut off custom label in autocomplete popup

Comment 9

[Teal Bauer [:teal]]

I'm not sure if all those changes are needed, especially around the sync version. Sync seems to handle unknown properties just fine, so we could just add it and older versions should just pass it through.

Comment 12

[Alex]

7 years in, I'd like to bump this request.

For people that have multiple cards (consider credit and debit cards, personal and company/business) the current implementation is all but useless, especially if most (or all) the cards are from the same provider.

Here's a sample scenario:

• The user gets a list of cards, with only the provider and the last 4 numbers displayed.
• Oh great! All the cards are Visa but there is no indication which card is a credit card and which is Visa Debit; what financial institution issued which card; whether it is a personal card, a business card or a corporate card; etc.
• No, I don't remember the last 4 digits of every card I own. Why should I? That's what computers are for.
• I guess I need to take my wallet out, sift through the cards until I find the one I want to use, match it with the list, type the strong pass phrase I set on my computer to unlock it.
• Might as well just type the card details manually since I already have it in my hand, and the site will ask me for the CVV anyway (which is not set either)
• Remind me why do I need this feature for?

Every financial institution site I use allows me to add nicknames to accounts, to payees, etc. This is not rocket science!

Please implement it!

Comment 13

[Alex]

Forgot to add:

Just checked, and Chromium allows saving card nicknames:
https://imgur.com/JgMRsi4

Comment 14

[Jeremy Holland]

I have four credit cards stored in Firefox. One is my regular, everyday credit card. One is my corporate card. One is the card I use for nothing but recurring autopay. One is my HSA card for health care bills only. When I go to choose a card, I see:

****6173 VISA Firstname Lastname
****8194 VISA Firstname Lastname
****0019 VISA Firstname Lastname
****8718 VISA Firstname Lastname

That's right, all four are VISA cards. Which is which? There is no way to tell. And there are serious implications if I pick the wrong one, particular if I use my company card for personal stuff or my HSA card for non-medical stuff.

How the heck is this still open after seven years??!?

Comment 15

[Nathan Friedly]

Man, I've wanted this for ages.

It's especially disappointing to know that a volunteer already did the work to resolve this a year and a half ago, a couple of Mozilla people reviewed it, the volunteer addressed most of their feedback, but then Mozilla just decided to let it bit-rot because it wasn't on the roadmap.

Come on Mozilla, it's 80% done - please do the other 80% and ship this feature!

(I'd rather have the feature without sync support than not have it at all! Putting the nickname in once per device is still a lot less effort than getting my card out each time I want to use it because I can never remember which saved one it is.)

Comment 16

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Comment 17

[Tim Maks van den Broek [:mad_maks]]

https://connect.mozilla.org/t5/ideas/saved-credit-card-label-description-field/idi-p/3223/page/4#comments

what is the status of this, many people are requesting this features for years now.

Comment 18

[Teal Bauer [:teal]]

I was discouraged by how complex the code was and generally burnt out by software dev, but I'm picking this back up now.

Comment 19

[Teal Bauer [:teal]]

Attachment: Bug 1443042 - Add custom label to saved credit cards r?dlee,sgalich

Allows users to assign a custom label to saved credit cards, shown as the primary
identifier in autocomplete popups and the card management dialog.

Rebased to current central.

Comment 20

[Teal Bauer [:teal]]

So some of the feedback back then was this needs to go through UX - what is the process to make this happen? Clearly there is demand for this feature.

Comment 22

[Teal Bauer [:teal]]

Hi Dimi, just wanted to check in here as I would really like to get this landed in the near future.

If I understand things correctly, Bug 2044946 got three patches recently, D305141, D305142 and D305143, which land passports into the Application
Services autofill component. I am assuming that is the template a future cards-on-AS Gecko migration will follow.

The original concern on D283460 was that adding customLabel now means migrating it again later. I think there's a way to defuse that:

1. Add custom_label: Option<String> to the CreditCard dictionary in mozilla/application-services' autofill crate (UDL + struct + v6 schema migration) as a local-only optional column, sync-aware from day one. This should be independent of Gecko-side plumbing, and means the field is already on disk in the right place by the time cards migrate.
2. Once that's in-tree, the existing D283460 patch becomes a thin UI + JSON-storage diff that mirrors how every other card field currently flows. When the cards-on-AS Gecko migration lands, customLabel comes along for the ride as it's already in the schema.

Concretely, what I'd like to know:

• Is (1) something you'd be open to me proposing upstream now, independent of the Gecko-side cards migration timeline?
• Is there a tracking bug yet for cards (specifically) moving to AS on the Gecko side, or is that gated on the registry refactor (Bug 2044287) landing first?
• On UX: I asked in comment 20 what the process is for getting UX review on a feature like this. Can you point me to who's the right person to pull in, and what they would need from me to evaluate?

Comment 23

[Teal Bauer [:teal]]

Since my patch still works except for the Nova cards list page, I will update it to cover that as well and attach a new round of screenshots. I still believe that landing this now and adding a followup for the AS migration is the best path forward to finally get this in.

Comment 24

[Teal Bauer [:teal]]

Attachment: Nova preferences managePayments list

Comment 25

[Teal Bauer [:teal]]

Attachment: Custom Labels shown in Autocomplete dropdown

Comment 26

[Teal Bauer [:teal]]

Attachment: Custom Label field in the Card Editor

Comment 27

[Teal Bauer [:teal]]

Attachment: Custom Labels shown in Autocomplete dropdown, including example card without Custom Label

Comment 28

[BMO Github Automation]

Attachment: [mozilla/application-services] Bug 1443042 - Add optional custom_label field to credit-card schema (#7410)

Comment 29

[Dimi Lee [:dimi]]

Hi Teal,
Really appreciate for picking this up again and for thinking about the whole picture (AS storage, the Gecko side, and the UI). It really helps.
I agree with the AS-first direction. Internally we already decided we want to do credit card labels after address/credit card are migrated to the Application Services.

Is there a tracking bug yet for cards (specifically) moving to AS on the Gecko side?

Not yet. We plan to start that migration some time this year. I will file the cards-to-AS bug and add you to CC, so there is a clear place to track it and we can attach the label work to it.

Is (1) something you'd be open to me proposing upstream now?

Really appreciate for the offer, but I would prefer to wait. If we add something now, it is code that nothing uses yet, and things can still change before we get there. I think it is better to land the change to application service when we ready to implement the whole feature. I hope it would be the end of this year or early next year. We have quite a lot to do in our roadmap but this feature is being planned.

On UX, what is the process / who should I pull in?

Ryan Casey is the right person on the UX side.

Thanks again for staying with this for so long!!!

Comment 30

[Teal Bauer [:teal]]

Thanks Dimi, appreciate the response and the plan.

That said, I'd really prefer to land this as soon as possible. The bug has been open a long time, and waiting for end-of-year-or-early-next-year adds another rebase cycle and another reason for the bug to keep aging without anything visible. Plus it just feels like a long time :)

A few things that make me think landing earlier is feasible:

• The desktop patch (D283460) and the AS patch (mozilla/application-services#7410, CI green) are ~400 lines together, all additive and following existing patterns. The AS field is Option<String> with a null default, nullable column, and omitted from outgoing sync payloads when unset, so older clients are byte-for-byte unaffected.
• When the cards-to-AS migration happens, every card field needs to be migrated anyway - custom_label is just one column among ~10 already on the trip, so the marginal migration cost feels small.
• Nothing about the field name or type is load-bearing for any future labeling design, it's just a string the user typed. Landing it now doesn't constrain a later redesign.

If there's a concrete thing landing now would block, I'd genuinely love to know what it is so I can address it. Otherwise I'd really like to find a way to ship this without waiting another year if possible.

Either way, filing the cards-to-AS Gecko bug landing with me on CC is great, I'll keep my eyes out for that.

---

@Ryan: flagged you here on Dimi's suggestion. Long-running request for a free-text label on saved credit cards. Engineering direction seems set-ish.

Working patch and screenshots are on this bug (attachments 9595428-9595431). The shape is what you'd expect I guess: free-text input in the card editor, label becomes the primary identifier in the autocomplete dropdown and the manage-payments list when set, existing display unchanged when unset.

Asking for a UX review pass at your convenience, if there's anything you'd want different, or a yes-this-is-fine, both useful. The whole card editor dialog could probably use UX love at some point, but that's out of scope here.

Comment 31

[Teal Bauer [:teal]]

Not sure if the needinfo?(rcasey) took, trying again.

Comment 32

[Ryan Casey]

Hey Teal, thanks for pointing me to this very old bug. That's awesome you've got a patch for this as it's been on the CM backburner for a while.
Im all for this, with some considerations.

1. Totally understood about out of scope for UX love on the payment method modal - we also de-scoped for nova updates.
2. I'd like to consider how this might scale to logins. If you look here I had some specs (now defunct due to Nova) that showed personalization of logins, which would be applicable to payments (which you've now patched). Do you forsee any implications of your patch having conflicts, or rather extending to logins at some point?
   I ask because IMO the user experience would be consistent across data types for personalization. I have the receipts for the issues you point out above - disambiguation of autofill suggestions is an industry issue.

Feel free to ping me on slack as well with any other questions/concerns. @Ryan C
Nice work!