Add the CVV security code field to the add card form and make it required in all places

VERIFIED FIXED in Firefox 64

Status

()

P1
normal
VERIFIED FIXED
7 months ago
5 months ago

People

(Reporter: MattN, Assigned: MattN)

Tracking

unspecified
Firefox 64
Points:
---

Firefox Tracking Flags

(firefox64 fixed, firefox65 verified)

Details

(Whiteboard: [webpayments])

User Story

* Add a required CVV security code field to the add credit card form (not edit)
** The value of the field should be saved into `state.selectedPaymentCardSecurityCode` but the field should always be empty upon showing (i.e. write to selectedPaymentCardSecurityCode but don't read from it).
* Make the CVV field required on the summary page

Attachments

(4 attachments)

Updates to the CVV security code field on the summary and add form.
Flags: qe-verify+
Whiteboard: [webpayments]
Whiteboard: [webpayments] → [webpayments-reserve]
Whiteboard: [webpayments-reserve] → [webpayments]
Probably best to wait for bug 1480717 before working on this as it will touch the same tests and code.
Blocks: 1480717
Assignee: nobody → MattN+bmo
Status: NEW → ASSIGNED
Priority: P2 → P1
I'll submit a part 2 to handle the add page later.
Comment on attachment 9011946 [details]
Bug 1490805 - Make the CVV field required on the payment-summary screen. r=jaws

Sam Foster [:sfoster] has approved the revision.
Attachment #9011946 - Flags: review+
Comment on attachment 9012055 [details]
Bug 1490805 - Include temporary basic cards in validity check for supportedNetworks. r=jaws

Sam Foster [:sfoster] has approved the revision.
Attachment #9012055 - Flags: review+
Landing the first two parts to get earlier testing.
Keywords: leave-open

Comment 9

6 months ago
Pushed by mozilla@noorenberghe.ca:
https://hg.mozilla.org/integration/autoland/rev/2b40812f97ab
Make the CVV field required on the payment-summary screen. r=sfoster
https://hg.mozilla.org/integration/autoland/rev/42fac3928107
Include temporary basic cards in validity check for supportedNetworks. r=sfoster
Comment on attachment 9012056 [details]
Bug 1490805 - Add a required CSC/CVV field to the add card page. r=jaws

Jared Wein [:jaws] (please needinfo? me) has approved the revision.
Attachment #9012056 - Flags: review+

Comment 11

6 months ago
Pushed by mozilla@noorenberghe.ca:
https://hg.mozilla.org/integration/autoland/rev/4ff0fcd61c7a
Add a required CSC/CVV field to the add card page. r=jaws
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
status-firefox64: --- → fixed
Keywords: leave-open
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64

Comment 13

6 months ago
Verified fixed on the latest Nightly 64.0a1 (2018-09-27) (64-bit) on Windows 10, Ubuntu 16.04 and Mac OS 10.13.
The CVV field is required to fill on both the Add Credit Card Screen and Order Summary page. 

Note that on the Order Summary page, the error string will now be displayed if the CVV field is marked as invalid, here is a video about the behavior: https://streamable.com/1maok

Matt, should I submit a new bug for this or will it be handled in an existing one?
Flags: needinfo?(MattN+bmo)
(In reply to Timea Babos from comment #13)
> Verified fixed on the latest Nightly 64.0a1 (2018-09-27) (64-bit) on Windows
> 10, Ubuntu 16.04 and Mac OS 10.13.
> The CVV field is required to fill on both the Add Credit Card Screen and
> Order Summary page. 
> 
> Note that on the Order Summary page, the error string will now be displayed
> if the CVV field is marked as invalid, here is a video about the behavior:
> https://streamable.com/1maok

Sorry for the delay but I was confused about what you were seeing. Now I realize I think you made a typo and meant "not" instead of "now"?

> Matt, should I submit a new bug for this or will it be handled in an
> existing one?

I'm not sure what the desired behaviour is here. Does the UX spec talk about a tooltip here? Maybe bug 1470199 will address this but I'm not sure.
Flags: needinfo?(MattN+bmo) → needinfo?(jsavory)

Comment 15

6 months ago
I'm sorry for that confusing typo, my bad :(

To clear out misunderstandings, I'm referring to the error strings, not the tooltip: 

On the Order Summary page, if the CVV is deleted after typing it, the field will be marked as invalid. However, if the user hovers over the CVV field the error string "Please fill out this field" (or "Please match the requested format") will NOT be displayed as it happens on the Add Credit Card form.
I believe for the order summary errors, we only display the error string below the dropdown, which would be the same case for CVV. In this case we would display the invalid CVV error below the payment information dropdown, but highlight the CVV. Let me know if this makes sense. 
NI? on Eric to confirm that this is following his understanding as well.
Flags: needinfo?(jsavory) → needinfo?(epang)

Comment 17

5 months ago
Posted image cvv error.png
The error string for CVV field in "Add Credit Card" from isn't displayed anymore. 
Is this intended? should we log a bug for it?
Flags: needinfo?(MattN+bmo)
(In reply to Jacqueline Savory [:jsavory] UX from comment #16)
> I believe for the order summary errors, we only display the error string
> below the dropdown, which would be the same case for CVV. In this case we
> would display the invalid CVV error below the payment information dropdown,
> but highlight the CVV. Let me know if this makes sense. 
> NI? on Eric to confirm that this is following his understanding as well.

yes, this is correct.
Flags: needinfo?(epang)

Comment 19

5 months ago
The error string for CVV field is displayed in "Add Credit Card" and "Order summary" pages, and it is required in all places.
Verified as fixed on Firefox Nightly 65.0a1 on Windows 10 x 64, Windows 7 x32, Mac OS X 10.13 and on Ubuntu 16.04 x64.
Status: RESOLVED → VERIFIED
status-firefox65: --- → verified
Flags: qe-verify+
Flags: needinfo?(MattN+bmo)
You need to log in before you can comment on or make changes to this bug.