rn-cc-input v0.1.1

rn-cc-input

This package contains a React Native component to input a credit card data.
Example of code:

import React from 'react';
import {SafeAreaView} from 'react-native';
import CreditCard from 'rn-cc-input';
import styles from './styles';

export default () => (
    <SafeAreaView>
        <CreditCard style={[{margin:10}, styles.textInput]} />
    </SafeAreaView>
);

The display:

Props

All props are optional. There are some props dealing with style. You must use them carefully to prevent the messed layout.

Properties and method of ref object

Properties

• isValid is true if all fields are valid, false if any invalid field.
• value can be null or an object whose the following properties:

    {
        number: string,
        expired: {
            month: number,
            year: number,
        },
        cvc: string,
        cardHolder: string,
        postalCode: string,
    }

Method

• setValidationError(isError) is to set the validity status of credit card input. If isError is true then the status is invalid, the input appearance will use the error style specified in props.

The example of usage:

import React from 'react';
import {Button, SafeAreaView} from 'react-native';
import CreditCard from 'rn-cc-input';
import server from './server';

export default () => (
    const cc = React.useRef(null);

    <SafeAreaView>
        {
           //.... Here, there may be the other inputs for transaction 
        }
        <CreditCard ref={cc} />

        <Button title="Send" onPress={async () => {
            const ccInput = cc.current;
            if (ccInput.isValid) { //passes client-side validation
                ccInput.setValidationError(false);
                if (await server.sendTransaction({
                    ccData: ccInput.value,
                    //... collects the other input data
                })) {
                    //The transaction is succesfull. It may be redirected to another page
                }
                else {
                    //Not successfull. If it's because credit card data is invalid (exceeds the limit, wrong holder name, etc.)
                    //We can show the validity status
                    ccInput.setValidationError(true);
                }
            }
            else {
                ccInput.setValidationError(true);
            }
        }} />
    </SafeAreaView>
);