Skip to content

Payment component for react-native, Components are decoupled and can be used alone.

License

Notifications You must be signed in to change notification settings

lamphc/react-native-pay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Pay

Medium Build npm version NPM downloads NPM downloads React version Platform npm

Installation

Using npm:

$ npm i react-native-modal-pay -S

Using yarn:

$ yarn add react-native-modal-pay

Usage

/**
|--------------------------------------------------
| react-native-pay demo
|--------------------------------------------------
*/
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { PayMny } from 'react-native-modal-pay';


class RnPay extends React.Component {
    constructor(props) {
        super(props)

    }

    _pay() {
        this.payMny._invokePay(true)
    }

    _onPay(va) {
        let cl = setTimeout(() => {
            if (va) {
                clearTimeout(cl)
                this.payMny._onErrorHandler('Password error!')
            }
        }, 2000);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={() => this._pay()} style={styles.txt}>RnPay:$10000.00</Text>

                <PayMny
                    show={true}
                    ref={(payMny) => this.payMny = payMny}

                    onChange={(va) => this._onPay(va)}

                />
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: '26%',
        // justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ccc',
    },
    txt: {
        color: '#fff',
        fontSize: 16
    }
});

export default RnPay;

Props

Prop Type Description
show bool Show the pay.
passWordType ?string Password type for keyboard. Default 'numeric'.
passWordLen ?number Password's length.Default 6.
loadingScale ?string Load the image size after the input is complete.Default 'large'.
lang ?object Word description.Default {title: 'Enter your password',forget: 'Forget password ?'}.
forgetCallBack () => <any> Forgot Password Touch event.
onChange (password) => <any> Callback is called after the password is entered, With parameter password.

Advanced Usage

You can use local calls to avoid redrawing the entire component:

this.refs.pay._invokePay(bool)

Platform Support

Both ios and android.

About

Payment component for react-native, Components are decoupled and can be used alone.

Topics

Resources

License

Stars

Watchers

Forks

Packages