React Native Pagseguro Plugpag
React Native Pagseguro Plugpag is a library aimed at integrating with the native library PlugPagServiceWrapper, maintained by Pagseguro. The library's purpose is to integrate Android applications with smart terminals, such as Moderninha Smart (A930), Moderninha Smart 2 (P2), and other terminals provided by the company.
- NodeJS >= 18.0.0
- React Native >= 0.72
- Expo >= 47 (optional)
Installing with Yarn:
yarn add react-native-plugpag-libInstalling with npm:
npm install react-native-plugpag-libAdd this line to the file /android/build.gradle:
buildscript {
dependencies {
...
classpath 'com.google.gms:google-services:4.3.15'
}
}
and add this dependency to the file /android/app/build.gradle:
dependencies {
// ... other dependencies
implementation 'br.com.uol.pagseguro.plugpagservice.wrapper:wrapper:1.7.6'
...
}
NOTE: The library does not support running on Expo Go due to its handling of libraries. The PlugPag Wrapper library is designed for use with Pagseguro's Android devices. Therefore, you need to use expo-dev-client to expose the android folder of your Expo project.
Add the react-native-plugpag-lib plugin to app.json or app.config.js:
{
"expo": {
"plugins": [
"react-native-plugpag-lib"
]
}
}
And to finalize, execute the prebuild step of expo to complete the configuration:
npx expo prebuild -p android --clean
initializeAndActivatePinPad: initializes and activates the pin pad.
doPayment: performs communication and execution of financial transactions (debit card, credit card, voucher, and PIX).
refundPayment: performs refunds of financial transactions.
print: does customized printing from a JPEG/PNG file.
useTransactionPaymentEvent: hook for native events related to financial transactions.
doAbort: aborts the current transaction.
Example for activating a pin pad terminal.
NOTE: For development terminals, the code 403938 is commonly used. If it doesn't work, contact Pagseguro support.
import { initializeAndActivatePinPad } from 'react-native-plugpag-lib';
async function handleInitializeAndActivatePinPad() {
try {
const data = await initializeAndActivatePinPad('403938');
if (data.result !== 0) {
Alert.alert('Error activating terminal', data.errorMessage);
return;
}
Alert.alert('Terminal activated successfully!');
} catch (error) {
console.log(error);
Alert.alert('Error activating terminal');
}
}Example for making credit card transactions with R$ 25.00:
import { plugPag, doPayment } from 'react-native-plugpag-lib';
async function handleDoPaymentCreditType() {
try {
const data = await doPayment({
amount: 2500, // Amount to be paid in cents
type: plugPag.paymentTypes.CREDIT, // Payment type option
printReceipt: true, // Print or not from the establishment
installments: 1, // Number of installments
installmentType: plugPag.installmentTypes.BUYER_INSTALLMENT, // In case of installments, define whether the fee will be charged to the buyer or the seller
userReference: 'test', // External code to identify the transaction in the future.
});
Alert.alert('Transaction completed successfully');
} catch (error) {
console.log(error);
setIsModalVisible(false);
Alert.alert('Error completing transaction');
}
}Example for making debit card transactions with R$ 25.00:
import { plugPag, doPayment } from 'react-native-plugpag-lib';
async function handleDoPaymentDebitType() {
try {
const data = await doPayment({
amount: 2500, // Amount to be paid in cents
type: plugPag.paymentTypes.DEBIT, // Payment type option
printReceipt: true, // Print or not from the establishment
installments: 1, // Number of installments
installmentType: plugPag.installmentTypes.BUYER_INSTALLMENT, // In case of installments, define whether the fee will be charged to the buyer or the seller
userReference: 'test', // External code to identify the transaction in the future.
});
Alert.alert('Transaction completed successfully');
} catch (error) {
console.log(error);
setIsModalVisible(false);
Alert.alert('Error completing transaction');
}
}Example for refunding a transaction:
async function handleRefundLastTransaction() {
try {
const response = await refundPayment({
transactionCode: '123dwqwd5465sdas',
transactionId: '78911qweqwdw7de44dd7qweqwed7d1qwe',
printReceipt: true,
});
if (response.result !== 0) {
Alert.alert('Refund', 'An error occurred while processing the refund');
return;
}
Alert.alert('Refund completed successfully');
} catch (error) {
console.log(error);
setIsModalVisible(false);
Alert.alert('Refund', 'An error occurred while processing the refund');
}
}Example for abort a transaction:
import { doAbort } from 'react-native-plugpag-lib';
async function handleAbortTransaction() {
try {
const response = await doAbort();
if (response.result === true) {
console.log('Transaction aborted');
}
} catch (error) {
console.log(error);
Alert.alert('Failed to abort transaction');
}
}For more examples, see the demo app in this repository.
See the contributing guide to learn how to contribute to the repository and the development flow.
Made with create-react-native-library