From e42a4184f85b4c00cba45ed152dc374a291760dd Mon Sep 17 00:00:00 2001 From: Mateus Andrade Date: Tue, 22 Jul 2025 13:20:36 -0300 Subject: [PATCH 1/3] feat: Enhance payment event emission and handling - Updated `emitPaymentEvent` in `PlugpagEventEmitter.kt` to include a custom message parameter for better event logging. - Refactored `App.tsx` to utilize the new event emission structure, displaying real-time payment event updates. - Removed deprecated `doPaymentWithEvents` function and integrated its functionality into the standard `doPayment` method. - Simplified payment flow management by eliminating the `usePaymentFlow` hook. - Added a new function `generatePixQRCode` for generating PIX QR codes. - Cleaned up unused styles and components in the UI for better readability and performance. --- README.md | 599 ++++-------- .../nitro/plugpagnitro/PlugpagEventEmitter.kt | 7 +- example/src/App.tsx | 876 ++++++------------ react-native.config.js | 13 - src/index.tsx | 169 +--- 5 files changed, 450 insertions(+), 1214 deletions(-) delete mode 100644 react-native.config.js diff --git a/README.md b/README.md index c87b9a0..d4cfbf8 100644 --- a/README.md +++ b/README.md @@ -1,168 +1,169 @@ # 🚀 React Native PlugPag Nitro -**High-performance PagSeguro PlugPag integration with TypeScript-first enum-based API** +High-performance PagSeguro PlugPag integration for React Native with TypeScript support and real-time events. -[![npm version](https://img.shields.io/npm/v/react-native-plugpag-nitro?style=for-the-badge&color=brightgreen)](https://www.npmjs.com/package/react-native-plugpag-nitro) -[![npm downloads](https://img.shields.io/npm/dm/react-native-plugpag-nitro?style=for-the-badge&color=blue)](https://www.npmjs.com/package/react-native-plugpag-nitro) -[![license](https://img.shields.io/npm/l/react-native-plugpag-nitro?style=for-the-badge&color=orange)](https://github.com/mCodex/react-native-plugpag-nitro/blob/main/LICENSE) -[![Built with Nitro](https://img.shields.io/badge/Built%20with-Nitro%20Modules-purple?style=for-the-badge)](https://nitro.margelo.com/) +[![npm](https://img.shields.io/npm/v/react-native-plugpag-nitro)](https://www.npmjs.com/package/react-native-plugpag-nitro) +[![license](https://img.shields.io/npm/l/react-native-plugpag-nitro)](LICENSE) +[![Built with Nitro](https://img.shields.io/badge/Built%20with-Nitro%20Modules-purple)](https://nitro.margelo.com/) ---- - -## ✨ Features - -> **Built with [Nitro Modules](https://nitro.margelo.com/) for **~10x faster** performance than traditional bridges** - -- 🔥 **High Performance** - Direct JSI bindings, zero-copy data transfer -- 🎯 **TypeScript Enums** - Type-safe payment types, installment types, and error codes -- 💰 **All Payment Types** - Credit, Debit, PIX, and Voucher support -- 📱 **Real-time Events** - Payment progress monitoring with event hooks -- 🎣 **React Hooks** - Modern hook-based API for seamless integration -- 📱 **Android Focused** - Optimized for PlugPag terminals -- 🛡️ **TypeScript Native** - Full type safety and IntelliSense support -- ⚡ **Simple API** - Clean function-based approach with payment presets +**Features**: TypeScript-first • Real-time Events • High Performance JSI • Credit/Debit/PIX Support ---- - -## 🚀 Quick Start +## Installation ```bash npm install react-native-plugpag-nitro react-native-nitro-modules ``` -> **Requirements**: React Native ≥ 0.72, Android API ≥ 21 +> Requires React Native ≥ 0.72, Android API ≥ 21 -### Simple Enum-Based Approach +## Quick Start ```typescript import { - PaymentType, - InstallmentType, - ErrorCode, - doPayment, initializeAndActivatePinPad, - PaymentPresets, - isTransactionSuccessful -} from 'react-native-plugpag-nitro'; - -// Initialize terminal once -await initializeAndActivatePinPad('your-activation-code'); - -// Simple credit payment using presets -const result = await doPayment(PaymentPresets.creditCard(2500, 1)); - -// Or use enum types directly for custom payments -const customPayment = await doPayment({ - amount: 5000, // R$ 50.00 - type: PaymentType.CREDIT, - installmentType: InstallmentType.BUYER_INSTALLMENT, - installments: 3, - printReceipt: true, - userReference: 'order-123' -}); - -if (isTransactionSuccessful(result)) { - console.log('Payment approved!', result); -} -``` - -### Modern Hook-Based Approach - -```typescript -import { - PaymentType, - usePaymentFlow, + doPayment, + generatePixQRCode, useTransactionPaymentEvent, - PaymentPresets + PaymentType, + ErrorCode } from 'react-native-plugpag-nitro'; -function PaymentComponent() { - const paymentFlow = usePaymentFlow(); +function PaymentScreen() { const paymentEvent = useTransactionPaymentEvent(); const handlePayment = async () => { - try { - const result = await paymentFlow.executePayment( - PaymentPresets.creditCard(2500, 1) - ); - - if (paymentFlow.isTransactionSuccessful) { - console.log('Payment successful!', result); - } - } catch (error) { - console.error('Payment failed:', error); + // Initialize terminal + await initializeAndActivatePinPad('YOUR_ACTIVATION_CODE'); + + // Process payment + const result = await doPayment({ + amount: 2500, // R$ 25.00 in cents + type: PaymentType.CREDIT + }); + + if (result.result === ErrorCode.OK) { + console.log('Payment approved!', result); } }; return ( -