[PAID] [$250] [Payment card / Subscription] limit input field to 16 digits in `add-payment-card` screen field for card number

[blimpich]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue reported by: @blimpich

Action Performed:

Break down in numbered steps

1. create a new account
2. create a workspace on that account
3. go to https://staging.new.expensify.com/settings/subscription/add-payment-card
4. look at the card number field and type "abcdef01234567891234567"

Expected Result:

Describe what you think should've happened

Alphabet characters should not be allowed into the input field and the input field should be limited to 16 digits

Actual Result:

Describe what actually happened

"abcdef01234567891234567" shows up in the input field as typed

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0117d7a6e5f63d9c2e
• Upwork Job ID: 1803868245221381580
• Last Price Increase: 2024-06-20
• Automatic offers:
• fedirjh | Reviewer | 102858281
• nkdengineer | Contributor | 102858284

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0117d7a6e5f63d9c2e

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[gijoe0295]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Alphabet characters should not be allowed into the input field and the input field should be limited to 16 digits

What is the root cause of that problem?

This is a feature request.

What changes do you think we should make in order to solve the problem?

1. Create a cardNumber state and use it for the card number input's value

value={cardNumber}

2. Implement onValueChange for card number input where we remove all non-digit characters:

onValueChange={(value) => {
    if (typeof value !== 'string') {
        return;
    }
    setCardNumber(value.replace(/\D/g, ''));
}}

3. Set maxLength={16}

By this, when we pasted a string with non-digit characters, the input would only keep the digits and we couldn't type non-digit characters as well.

What alternative solutions did you explore? (Optional)

We can optionally format the card number to the space-separated form (i.e. 0123 4567 8910) using the above approach. Additionally, we should write a util function extractCardNumber to extract the plain digits without spaces so the submit handler could use the minified value.

let formattedText = value.replace(/\D/g, '');
if (formattedText.length > 0) {
    formattedText = formattedText.match(/.{1,4}/g)?.join(' ') || formattedText;
}
setCardNumber(formattedText);