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

Status: VERIFIED FIXED

(Firefox :: WebPayments UI, defect, P1)

Description

[Matthew N. [:MattN]]

Updates to the CVV security code field on the summary and add form.

Comment 1

[Matthew N. [:MattN]]

Probably best to wait for bug 1480717 before working on this as it will touch the same tests and code.

Comment 2

[Matthew N. [:MattN]]

Attachment: Bug 1490805 - Make the CVV field required on the payment-summary screen. r=jaws

Comment 3

[Matthew N. [:MattN]]

I'll submit a part 2 to handle the add page later.

Comment 4

[Matthew N. [:MattN]]

Attachment: Bug 1490805 - Include temporary basic cards in validity check for supportedNetworks. r=jaws

Depends on D6848

Comment 5

[Matthew N. [:MattN]]

Attachment: Bug 1490805 - Add a required CSC/CVV field to the add card page. r=jaws

Depends on D6882

Comment 6

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

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.

Comment 7

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

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.

Comment 8

[Matthew N. [:MattN]]

Landing the first two parts to get earlier testing.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
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 10

[Jared Wein [:jaws] (please needinfo? me)]

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.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4ff0fcd61c7a
Add a required CSC/CVV field to the add card page. r=jaws

Comment 12

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/2b40812f97ab
https://hg.mozilla.org/mozilla-central/rev/42fac3928107
https://hg.mozilla.org/mozilla-central/rev/4ff0fcd61c7a

Comment 13

[Timea Cernea [:tbabos][inactive]]

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?

Comment 14

[Matthew N. [:MattN]]

(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.

Comment 15

[Timea Cernea [:tbabos][inactive]]

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.

Comment 16

[Jacqueline Savory [:jsavory] UX]

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.

Comment 17

[Hani Yacoub, Desktop QA]

Attachment: 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?

Comment 18

[Eric Pang [:epang] UX]

(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.

Comment 19

[Hani Yacoub, Desktop QA]

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.