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>
);
}