React-native-superapis-transbank-pos NPM

Ejemplo de Uso para `react-native-superapis-transbank-pos`

Este es un ejemplo básico de cómo usar el módulo react-native-superapis-transbank-pos en una aplicación de React Native para conectar con dispositivos Transbank a través de una conexión USB RS232 en Android.

Instalación

Asegúrate de haber instalado y enlazado el módulo siguiendo los pasos en la documentación principal del paquete.

Descargar el Ejemplo

Para descargar y ejecutar el ejemplo, sigue estos pasos:

Clona el repositorio o crea un nuevo proyecto de React Native:
```
npx react-native init TransbankExample
cd TransbankExample
```

Instala el módulo react-native-superapis-transbank-pos:

npm install react-native-superapis-transbank-pos
# o con Yarn
yarn add react-native-superapis-transbank-pos

Configura el enlace (si es necesario) y sigue los pasos adicionales de la documentación del paquete para Android.
Crea el archivo App.js en la raíz del proyecto con el siguiente código de ejemplo:

Código de Ejemplo

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
import { 
  status, 
  polling, 
  loadKeys, 
  initTransbank, 
  newTransaction, 
  lastTransaction, 
  closeTotem, 
  transbankEmitter 
} from 'react-native-superapis-transbank-pos';

export default function App() {
  const [result, setResult] = useState(null);

  // Configura el listener para recibir eventos de datos
  useEffect(() => {
    const subscription = transbankEmitter.addListener('onDataReceived', (event) => {
      setResult(event.data); // Actualiza el estado con los datos recibidos
    });

    // Limpia el listener al desmontar el componente
    return () => subscription.remove();
  }, []);

  const getStatus = async () => {
    const response = await status();
    setResult(response);
  };

  const getPolling = async () => {
    const response = await polling();
    setResult(response);
  };

  const getLastTransaction = async () => {
    const response = await lastTransaction();
    setResult(response);
  };

  const getLoadKeys = async () => {
    const response = await loadKeys();
    setResult(response);
  };

  const getInit = async () => {
    const response = await initTransbank();
    setResult(response);
  };

  const sendPayments = async (value, ticket) => {
    const response = await newTransaction(value, ticket);
    setResult(response);
  };

  const getClose = async () => {
    const response = await closeTotem();
    setResult(response);
  };

  return (
    <View style={styles.container}>
      <Text>Conectar: {result}</Text>

      <TouchableHighlight onPress={getStatus}>
        <View style={styles.box}>
          <Text>Status</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={getPolling}>
        <View style={styles.box}>
          <Text>Polling</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={getLastTransaction}>
        <View style={styles.box}>
          <Text>Get Last Transaction</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={getLoadKeys}>
        <View style={styles.box}>
          <Text>Load Keys</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={getInit}>
        <View style={styles.box}>
          <Text>Init Transbank</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={() => sendPayments('100000', '12345678901234567890123456789012')}>
        <View style={styles.box}>
          <Text>Venta</Text>
        </View>
      </TouchableHighlight>

      <TouchableHighlight onPress={getClose}>
        <View style={styles.box}>
          <Text>Close Totem</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 60,
    backgroundColor: '#DDDDDD',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 20,
  },
});

Descripción de las Funcionalidades

Cada botón en el ejemplo ejecuta una función diferente:

Status: Obtiene el estado del dispositivo.
Polling: Realiza una verificación de polling en el dispositivo.
Get Last Transaction: Recupera la última transacción.
Load Keys: Carga las llaves en el dispositivo Transbank.
Init Transbank: Inicializa la conexión con Transbank.
Venta: Envía un comando de transacción con un valor y un ticket.
Close Totem: Cierra la conexión con el dispositivo.

El listener onDataReceived actualiza automáticamente el estado result con los datos recibidos del dispositivo USB, y se muestra en el componente Text.

Estilos

Los estilos en el ejemplo proporcionan un diseño simple para los botones y el contenedor principal.

Este ejemplo de uso te permite conectarte a un dispositivo Transbank y realizar operaciones básicas directamente desde una aplicación de React Native en Android. Asegúrate de probar en un dispositivo físico, ya que el emulador no soporta conexiones USB RS232.

react-native ios android