Namby Pamby Magicians

    openpay-react-native
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.10 • Public • Published

    openpay-react-native

    Openpay

    img.png

    Installation

    Via npm

    $ npm install openpay-react-native --save

    Via yarn

    $ yarn add openpay-react-native

    Usage

    You can use our default form or you can use a custom form

    import Openpay from 'openpay-react-native';
    
    // ...
    
    <Openpay
      isProductionMode={false}
      merchantId="merchantId"
      publicKey="publicKey"
      //address={address} //optional
      successToken={successToken}
      failToken={failToken}
      deviceSession={deviceSession}
      buttonText="Pagar"
      custom={false}
    />
    
    *Yo can see the example project

    ###Custom labes and place holders

    <Openpay
                            isProductionMode={false}
                            merchantId="merchantId"
                            publicKey="publicKey"
                            //address={address} //optional
                            successToken={successToken}
                            failToken={failToken}
                            deviceSession={deviceSession}
                            buttonText="Pagar"
                            custom={false}
                            labels={
                                {
                                    holder: 'Nombre completo',
                                    expiration: 'FECHA'
                                }
                            }
                            placeholders={{
                                holder: "Nombre Apellidos",
                                number: 'xxxx xxxx **** ****',
                                expiration: 'MM/YY',
                                cvv: 'CVV'
                            }}
                        />

    Device session id

    With the inicilization of de component you have to pass a callback that will be called with the deviceSession

    const deviceSession = (response) => {
        console.log('deviceSession');
        console.log(response);
      };

    Custom form

    With the inicialization of the component you have to pass custom to true: custom={true}. With this, the form just call the device session callback and let you tokenize the card manually with the exported function:

    import Openpay, {createTokenWithCard} from 'openpay-react-native';
    createTokenWithCard(
      {
        holder_name: 'Nombre Prueba',
        cvv2: '111',
        expiration_month: '12',
        card_number: '424242424242424242',
        expiration_year: '25',
        isProductionMode: false,
        merchantId: 'merchantId',
        publicKey: 'publicKey',
      }
    ).then((response) => {
      console.log(response);
    });

    ##Full example

    import * as React from 'react';
    import { useEffect } from 'react';
    import {
      Alert,
      SafeAreaView,
      ScrollView,
      StatusBar,
      StyleSheet,
      View,
    } from 'react-native';
    import Openpay from 'openpay-react-native';
    
    export default function App() {
      const successToken = (response) => {
        console.log(response);
        Alert.alert('Tokne generado', response.id, [
          { text: 'OK', onPress: () => console.log('OK Pressed') },
        ]);
      };
      const failToken = (response) => {
        console.log(failToken);
        console.log(response);
        Alert.alert('Datos inválidos', [
          { text: 'OK', onPress: () => console.log('OK Pressed') },
        ]);
      };
    
      const deviceSession = (response) => {
        console.log('deviceSession');
        console.log(response);
      };
      
      return (
        <SafeAreaView>
          <StatusBar barStyle={'light-content'} />
          <ScrollView
            style={styles.scrollView}
            contentInsetAdjustmentBehavior="automatic">
            <View style={styles.sectionContainer}>
              <Openpay
                isProductionMode={false}
                merchantId="merchantId"
                publicKey="publicKey"
                //address={address} //optional
                successToken={successToken}
                failToken={failToken}
                deviceSession={deviceSession}
                buttonText="Pagar"
                custom={false}
              />
            </View>
          </ScrollView>
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
      },
      scrollView: {
      },
    });

    Contributing

    See the contributing guide to learn how to contribute to the repository and the development workflow.

    License

    MIT

    Install

    npm i openpay-react-native

    DownloadsWeekly Downloads

    77

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    84.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • carloshe
    • fedebalderas
    • enlaceop