View Issue Details

IDProjectCategoryView StatusLast Update
0005015Composrecommercepublic2022-11-10 01:08
ReporterPatrick SchmalstigAssigned To 
SeverityFeature-request 
Status non-assignedResolutionopen 
Product Version 
Fixed in Version 
Summary0005015: Add a nice Credit Card widget / input
DescriptionWe are currently relying on an input_line for credit card numbers, storing them as encrypted short_text, and using preg to check for only digits in the fields.

For better UX, we should be using a dedicated credit card input widget. The field should allow and automatically format for spaces between groups of 4 numbers as a member types.

Ideally, we should also have an image of a credit card indicating where to find each piece of information as the member selects it on the widget (cardholder name, card number, expiration, and CVV2). Though, we should keep in mind that the CVV2 is on the front of the card for American Express.
Additional InformationSee https://baymard.com/blog/credit-card-field-auto-format-spaces

Note that the blog mentions card numbers of 15-16 characters. However, card numbers can be between 13 and 19 digits long (Visa has recently started testing 19-digit cards as of 2020).
TagsNo tags attached.
Time estimation (hours)4
Sponsorship open

Relationships

related to 0003161 non-assigned Intelligent postal code input 
related to 0003159 non-assigned Telephone field input 

Activities

There are no notes attached to this issue.

Issue History

Date Modified Username Field Change
2022-11-05 22:03 Patrick Schmalstig New Issue
2022-11-05 22:04 Patrick Schmalstig Description Updated View Revisions
2022-11-05 22:05 Patrick Schmalstig Additional Information Updated View Revisions
2022-11-08 19:58 Chris Graham Category core_form_interfaces => ecommerce
2022-11-08 19:58 Chris Graham Description Updated View Revisions
2022-11-10 01:07 Chris Graham Relationship added related to 0003161
2022-11-10 01:08 Chris Graham Relationship added related to 0003159