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:

1. Clona el repositorio o crea un nuevo proyecto de React Native:

   npx react-native init TransbankExample
   cd TransbankExample

2. 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

3. Configura el enlace (si es necesario) y sigue los pasos adicionales de la documentación del paquete para Android.

4. 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.