Safari Auto-Fill doesn't include CVV, leads to poor user experience

[dpolivy]

General information

• SDK/Library version: latest
• Environment: Production
• Browser and OS: Safari 11/12 on OS X 10.13.6

Issue description

1. Setup some credit cards for autofill inside Safari. Note that Safari only asks for the card number and expiration date.
2. Visit the Drop-In UI demo page: https://developers.braintreepayments.com/guides/drop-in/overview/javascript/v3
3. Click Card, and use Safari auto-fill to fill in the card details.

Actual: Card details are filled in, but CVV is not. However, CVV field contains 3 dots, which to many users might imply the CVV is filled in but masked. No errors are reported, but you cannot submit the payment.

Expected: It would be nice to have better feedback that the CVV is not filled in for this scenario. Or, perhaps the placeholder should be updated so it doesn't look like a masked value is already filled in? We've had a few users get tripped up by this, and blame us for the poor experience.

[crookedneighbor]

I guess we could add an event to hosted fields that an attempt at autofilling occurred and then mark the fields that aren't filled as needing attention.

I'll pass this issue on to our design team and see what they think the best UX will be.

In the short term, you can simply change the placeholder value for the the cvv field:

braintree.dropin.create({
  // other parts of config
  card: {
    overrides: {
       fields: {
         cvv: {
           placeholder: '123' // or ''
         }
       }
    }
  }

[dpolivy]

@crookedneighbor Sounds good. The Placeholder override may be good enough for the short term -- though to avoid confusion I'd probably just leave it blank.

[dpolivy]

@crookedneighbor Unfortunately that workaround doesn't seem to work if the placeholder is set to ''. As soon as I start entering in a credit card number, the placeholder resets to asterisks/dots. Using a value such as 123 does seem to persist.

[crookedneighbor]

Hmm, that's definitely a bug. Probably because '' is a falsy value. We'll have to look into that.

[crookedneighbor]

Never updated this, but that bug is fixed. We still haven't gotten around to adding an event to let the merchant know that an autofill was attempted.

[dpolivy]

Cool, thanks for the update!

[armandodlvr]

closing for inactivity. If you continue to encounter errors, please contact Support