React-native-credit-card-ui-pkg NPM

react-native-credit-card-ui-pkg

Credit card UI module

This is a fully functional and animated credit card form library, and it's ready to use 🚀

Demo

Support

iOS & Android

Installation

npm i react-native-credit-card-ui-pkg

Usage

import ReactNativeCreditCardUi from 'react-native-credit-card-ui-pkg';


// ...
return (
    //...
    // must set minimum height to 350 units
    // onComplete will trigger once the whole card is filled name, card number, cvv number and expiry date  
    <View style={{height:350}}> 
        <ReactNativeCreditCardUi onComplete={ (todo) => {
                    //...
                    todo = {...todo, number: todo.number.replaceAll(" ",'')}
                    console.log(todo);
                    /**
                     * this will be the return of the onComplate callback
                     {
                        number: XXXX XXXX XXXX XXXX [XXX],
                        expirationMonth: month,
                        expirationYear: year,
                        expiryText: month/year,
                        cvv: XXX[X],
                    }
                    */
                    //...
        }} />
    </View>
)