Adyen / Adyen/adyen-react-native

[Feature request] Ability to scan credit cards with phone camera

Open
#541 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement v3
Dominant language
TypeScript
Stars
71
Forks
45
Avg merge
2d 5h
Merged PRs (30d)
1

Description

Credit Card Scanning demo with react-native-cardscan package

Is your feature request related to a problem? Please describe.
Not all banks support Apple pay or Google Pay, sometimes you want to pay with credit card. Entering the credit cards manually is a pain for the user which can result in a higher cart abandonment percentage.

Describe the solution you'd like
To be able to bring our users a delightful experience it would be nice if adyen react native supported scanning a payment card with a card scanner to automatically enter the digits for the user. Something like what https://www.npmjs.com/package/react-native-cardscan can do for you.

Describe alternatives you've considered
I've considered implementing https://www.npmjs.com/package/react-native-cardscan myself but find no way to pass the card details into adyen dropin. Preferrably this would be part of the Drop-in dialog.

Additional context
When testing and designing this feature one need to take into consideration the "new" quick read designs as well as traditional embossed and raised numbers.

VISA
Screenshot 2024-10-09 at 10 25 21

Visa Brand Mark and Card Design Features

Discover Card Design Guidelines

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The request concerns the React Native Drop-in and integration with react-native-cardscan; no repository file or test is named. Start by examining the Drop-in entry point and how card details are accepted, then define completion as scanned details populating the payment-card experience while supporting quick-read and embossed or raised designs.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile, payments
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.