2

I'm developing a React Native application with Expo Bare Workflow, in which the app is being applied to an android credit card machine.

When making a payment, it is possible to hear the events that happen in the payment process (insert credit card, typing password, approved transaction, etc), and my question in this case is, how can I collect these events in the native code and can consult them in JavaScript using React Native's Native Modules?

My main Java module looks like this:

package com.myapp;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import android.util.Log;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPag;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagAppIdentification;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagEventData;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagEventListener;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagInitializationResult;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagPaymentData;
import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagActivationData;

public class PlugPagModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public PlugPagModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    private final int TYPE_CREDITO = 1;
    public String transactionsEvents = "";

    @NonNull
    @Override
    public String getName() {
        return "PlugPagModule";
    }

    @ReactMethod
    public void startPayment() {
        // Define os dados do pagamento
        PlugPagPaymentData paymentData = new PlugPagPaymentData(TYPE_CREDITO,25000,PlugPag.INSTALLMENT_TYPE_A_VISTA,1,"CODVENDA");

        // Cria a identificação do aplicativo
        PlugPagAppIdentification appIdentification = new PlugPagAppIdentification("MeuApp", "1.0.7");

        // Cria a referência do PlugPag
        PlugPag plugpag = new PlugPag(reactContext, appIdentification);

        // Ativa terminal e faz o pagamento
        PlugPagInitializationResult initResult = plugpag.initializeAndActivatePinpad(new PlugPagActivationData("403938"));

        if(initResult.getResult() == PlugPag.RET_OK) {
            plugpag.setEventListener(new PlugPagEventListener() {
                @Override
                public void onEvent(@NonNull PlugPagEventData plugPagEventData) {
                    Log.d("onEvent", String.valueOf(plugPagEventData.getCustomMessage()));
                    transactionsEvents = plugPagEventData.getCustomMessage();
                }
            });

            plugpag.doPayment(paymentData);
        }
    }
}

And my React code looks like this:

import React from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { MaterialIcons } from '@expo/vector-icons';
import { useTheme } from 'styled-components';

import { Button } from '../../components/Button';

import {
  Container,
  Header,
  BackButtonContainer,
  TitleHeader,
} from './styles';

interface NavigationProps {
  goBack(): void;
}

export function PayCommandWithCard() {
  const { PlugPagModule } = NativeModules;
  
  const theme = useTheme();
  const navigation = useNavigation<NavigationProps>();

  const events = new NativeEventEmitter(PlugPagModule.transactionsEvents);
  console.log(events);
  

  function handleBack() {
    navigation.goBack();
  }

  async function handlePayment() {
    await PlugPagModule.startPayment();
  }

  return (
    <Container>
      <Header>
        <BackButtonContainer>
          <Button
            color="secondary"
            rounded
            onPress={handleBack}
          >
            <MaterialIcons
              name="arrow-back"
              size={20}
              color={theme.colors.primary}
            />
          </Button>
        </BackButtonContainer>

        <TitleHeader>Pagar Comanda</TitleHeader>
      </Header>

      <Button
        title="test"
        onPress={handlePayment}
      />
    </Container>
  );
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.