react-native-card-data-input - just another credit card input package

Last update: Oct 25, 2021

react-native-card-data-input

just another credit card input package

Installation

npm install react-native-card-data-input

Usage

import { CardFlip } from 'react-native-card-data-input';

// ...
const ref = React.useRef(null);
<CardFlip ref={ref} />;

ref.current.getCardData(); // to get data inserted by user
ref.current.flip(); // flip the card anytime you want
ref.current.shake(); // ask for attention
ref.current.clear(); // clear all inputs

Props

data: an object with following props: number, owner, expiry, cvv

Features

  • card brand logo
  • flip (and shake) animation
  • validations

Security code input will be blocked while a card brand is not recognized.

Still Missing

  • customization

Response

getCardData() return an object with:

  • an object named data with following props: number, owner, expiry, cvv (or null when there's some error on errors array)
  • an array called errors with validation error codes, that are described on next section.

Errors

When you ask for card data using getCardData() and validation doesn't pass, will be returned an array named errors telling you which errors ocurred on validation.

The errors are these:

  • NOT_VALID_CARD_NUMBER
  • NOT_VALID_EXPIRATION_DATE
  • NOT_VALID_OWNER_NAME
  • NOT_VALID_SECURITY_CODE

GitHub

https://github.com/erickriva/react-native-card-data-input
You might also like...

:package: Android Native Kit for React-Native

:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

May 17, 2022

A react native card component

React Native Card View Only tested in IOS, but I think should works in Android too. Try it with Exponent Install npm install --save react-native-card-

Nov 4, 2021

Card Media component for React Native

Card Media component for React Native

react-native-card-media Card Media component for React Native. Also supports multiple image layout. single & double three & four five Installation npm

Aug 9, 2021

Simple card view component for React-Native

Simple card view component for React-Native

React Native Simple Card View Easiest way to adding a card view on your screen. Hey, v0.3.0 is now released. You can use new component : CardView See

Mar 17, 2022

📢 A react native implementation of the package SCLAlertView-Swift

📢 A react native implementation of the package SCLAlertView-Swift

react-native-scl-alert A pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift Road Map Documentati

Jul 29, 2022

A react native android package to show a blurry overlay.

A react native android package to show a blurry overlay.

Blurry overlay for react-native android This is very experimental A react native android module to add a blurry overlay. Setup install module npm i -

Feb 3, 2022

🔎 React-Native package to decorate TextInput and get suggestions with good UX

🔎 React-Native package to decorate TextInput and get suggestions with good UX

react-native-suggester React-Native package to decorate TextInput and get suggestions with good UX How to use it ? import { SuggesterProvider, Suggest

May 7, 2022

react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

React Native TimeLine Theme Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList Get Started Inspired by react-nat

Oct 9, 2021

A react native android package to show a circle progress view

Circle progress view for react-native android A react native android module to show a circle progress view based on [Circle-Progress-View] (https://gi

Aug 7, 2019
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Aug 3, 2022
React-Native Credit Card Animated UI with information validation
React-Native Credit Card Animated UI with information validation

rn-credit-card-ui : A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to v

May 14, 2022
A better credit card form for React Native
 A better credit card form for React Native

React Native Credit Card ?? A better credit card form for React Native React native port of the display of Card by @jessepollak

Aug 8, 2022
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Apr 1, 2022
Credit cards and other payment icons in React Native
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Jul 4, 2022
:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component
:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

react-native-big-slider This package powers Yeti Smart Home and is used in production. A react native reusable and efficient dial knob element. Usage

Jan 13, 2022
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

Jul 8, 2022
Configurable react-native charting library– (right now just bar charts).
Configurable react-native charting library– (right now just bar charts).

react-native-charts Configurable, animated react-native charting library– (right now just bar charts). Example import { BarChart } from 'react-native-

Oct 7, 2021
React Native Super Alert - 3 alerts in just only component
React Native Super Alert - 3 alerts in just only component

React Native Super Alert is a component where you can use various types of alerts and notifications without having to import the library on all screen

May 23, 2022
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

AwesomeClockView MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects. Installatio

Jul 28, 2022