SquadPOS React Native Plugin

A React Native plugin for integrating SquadPOS payment functionality with Topwise POS devices.

📱 Demo App

You can explore the demo application Here

Installation

Install with npm or yarn:

# Using npm
npm install squadpos-rn-topwise-plugin react-native-svg

# Using yarn
yarn add squadpos-rn-topwise-plugin react-native-svg

Setup

Wrapping Your App

Wrap your application with the SquadPosProvider component:

import { SquadPosProvider } from "squadpos-rn-topwise-plugin";

export default function App() {
  return (
    <SquadPosProvider>
      <AppScreen />
    </SquadPosProvider>
  );
}

Android Setup

1. Copy the "libs" folder to your android project directory

   • Download required libraries from: Download Here

2. Add these dependencies to your build.gradle:

   dependencies {
       api 'com.jsoniter:jsoniter:0.9.19'
       implementation files('libs/core-3.2.1.jar')
       implementation files('libs/T1_V2_20230206.jar')
       implementation files('libs/TopTool_V2_0_3.jar')
   
       // ... rest of your dependencies
   }

3. Copy the "topwise_squad" folder to your main Java code directory (adjacent to MainActivity)

   • Download from: Download Here

4. Modify your MainApplication.java:

   • Add the plugin package to your package list:

     // Inside getPackages() method
     packages.add(new TopwisePluginPackage());
     // or
     add(new TopwisePluginPackage());

   • Initialize Topwise in the onCreate() method:

     @Override
     public void onCreate() {
         super.onCreate();
     
         // Initialize TopUsdkManager and bind the device service
         DBManager.getInstance().init(this);
         TopUsdkManager.getInstance().bindDeviceService(this);
         System.out.println("softpos db initialized");
     
         // ... rest of your existing code
     }

   • Add cleanup in the onTerminate() method:

     @Override
     public void onTerminate() {
         super.onTerminate();
     
         TopUsdkManager.getInstance().unBindDeviceService();
         System.out.println("softpos Terminated");
     }

   • Remember to import the necessary classes to resolve dependencies

Usage

Initiating POS Payment

Use the posPay function to initiate a payment:

import { useSquadPos } from "squadpos-rn-topwise-plugin";

const PaymentScreen = () => {
  const { posPay } = useSquadPos();

  const handlePayment = () => {
    posPay({
      amount: 20,
      cardType: "default", // Options: "default", "current", "savings", "credit"
    });
  };

  return (
    <View>
      <Button title="Initiate Payment" onPress={handlePayment} />
    </View>
  );
};

Printing Transactions

Use the printPosTransaction function to print transaction receipts:

import { useSquadPos, PosTransaction } from "squadpos-rn-topwise-plugin";

const demoTransaction: PosTransaction = {
  // Transaction details
  // ...
};

const PaymentScreen = () => {
  const { printPosTransaction } = useSquadPos();

  return (
    <View>
      <Button
        title="Print Receipt"
        onPress={() => printPosTransaction(demoTransaction)}
      />
    </View>
  );
};

Demo App

For a complete implementation example, check out our demo app: SquadPOS Demo App

Support

For issues, feature requests, or additional information, please contact our support team.