fincra-checkout-react-native

fincra-checkout-react-native

This is a react native library for implementing fincra payment gateway

Features

• Accept Payment with your Card, USSD & PayAttitude

Getting started

This React Native library provides a wrapper to add Fincra Payments to your React Native Andriod & iOS application

Install

npm install fincra-checkout-react-native --save

or with yarn

yarn add fincra-checkout-react-native

Usage

You can integrate this library into any React Native application by following two simple steps:

• Include a screen in the React Native Navigator with the name FincraPaymentScreen.
• Trigger the initiation process to launch the payment modal.

1. Add 'FincraPaymentScreen' Screen

import { FincraPaymentScreen } from "fincra-checkout-react-native";
//...
<NavigationContainer>
  <Stack.Navigator>
    // ...
    <Stack.Screen
      name="FincraPaymentScreen"
      component={FincraPaymentScreen}
      options={{ headerShown: false }}
    />
  </Stack.Navigator>
</NavigationContainer>;

2. Initiate payment widget

import { useFincraPayment, FincraInitiate } from "fincra-checkout-react-native";
//...

export default function PaymentScreen() {
  const { initiate } = useFincraPayment();

  final data = {
        publicKey: "pk_test_NjOjoxMzEyMzc=",
        amount: 3500,
        currency: "NGN",
        customerFirstName: "Test",
        customerLastName: "User",
        customerEmail: "[e-mail]",
        customerPhone: "081698661421",
        feeBearer: "customer",
        reference: "9876JLh023",
        paymentMethods: ["card", "bank_transfer", "payattitude"],
        defaultPaymentMethod: "card",
    }

const onClickHandler = ()=>{
  initiate({
        data,
        onSuccess: (response) => {
        console.log(response);
        },
    });
}

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