rn-openpay

Openpay React Native

openpay-react-native Generates the device_session_id and tokenize the credit cards with Openpay.

Features

• Generates the device_session_id (https://openpay.mx/docs/fraud-tool.html)
• Tokenize the credit cards (https://openpay.mx/docs/openpayjs.html)

Requirements

• npm >= 6

Installation

Via npm

$ npm install @urielcuriel/react-native-open-pay --save

Via yarn

$ yarn add @urielcuriel/react-native-open-pay

Usage

import Openpay, {createDeviceSessionId} from ' @urielcuriel/react-native-open-pay  ';

<Openpay 
    isProductionMode={false} 
    merchantId="YOUR_MERCHANT_ID" 
    publicKey="YOUR_PUBLIC_KEY" 
    address={address} 
    successToken={this.successToken} 
    failToken={this.failToken} 
    loading={this.state.loading}
    buttonText="Some text"
/>

// Note: address prop is optional.

And then on your successToken or failToken handler:

state = {
    loading: false
}

successToken = (response) => {        
    const deviceSessionId = createDeviceSessionId();
    console.log('createDeviceSessionId', deviceSessionId);
    console.log('successToken', response);
    this.setState(() => ({loading: false}))
}

failToken = (response) => {
    console.log('failToken', response);
}

Props

Property	Type	Description	Required
isProductionMode	Boolean	Defines the Openpay environment	Yes
merchantId	String	Openpay Merchant ID	Yes
publicKey	String	Openpay Public Key	Yes
successToken	Function	It will receive the card token and here you will need to add your logic	Yes
failToken	Function	It will receive the error if something wrong happen	Yes
loading	Boolean	Adds a spinner to the button when the user clicks on it	Yes
address	Object	You can add the address of your customer	No
buttonText	String	Button's text	No

Methods

createDeviceSessionId

This method creates the device session id.

const deviceSessionId = createDeviceSessionId();

Example

import React, {Component} from 'react';
import Openpay, {createDeviceSessionId} from 'openpay-react-native';

export default class OpenpayScreen extends Component {
    state = {
        loading: false
    }

    successToken = (response) => {        
        const deviceSessionId = createDeviceSessionId();
        const token = response.id;
        this.setState(() => ({loading: false}));

        // Make the call to your server with your charge request
    }

    failToken = (response) => {
        console.log('failToken', response);
    }

    render() {
        const address = {
            "city":"Querétaro",
            "country_code":"MX",
            "postal_code":"76900",
            "line1":"Av 5 de Febrero",
            "line2":"Roble 207",
            "line3":"Col Carrillo",
            "state":"Queretaro"
        };

        return (
            <Openpay 
                isProductionMode={false} 
                merchantId="YOUR_MERCHANT_ID" 
                publicKey="YOUR_PUBLIC_KEY" 
                address={address} 
                successToken={this.successToken} 
                failToken={this.failToken} 
                loading={this.state.loading}
            />
        );
    }
}

Future Improvements

• Customize credit card image
• Customize button style
• Add unit tests

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT