React-native-ozow NPM

React Native Ozow

React Native Ozow is a React Native library for integrating Ozow payment gateway into your React Native app. It supports both In-App and Link payments.

This is not an official Ozow library.

[ GitHub stars ] [ GitHub license ] [ GitHub contributors ] [ GitHub last commit ] [ GitHub pull requests ] [] [] [] []

Check out my other libraries

React Native Payfast

Getting started

npm install react-native-ozow

Expo?

npx expo install react-native-ozow

Documentation

For more information, please visit Ozow API

Usage

Demos

In-App Payments Link Payments

In-App Payments

import { Ozow } from "react-native-ozow";

const MyPaymemt = () =>{
    return(
        <Ozow
            data={{
                SiteCode: "RPI-RPI-300",
                Amount: 1000, // in rands
                TransactionReference: "1234567",
                BankReference: "123456",
                CancelUrl: "https://ozow.com",
                ErrorUrl: "https://ozow.com",
                SuccessUrl: "https://ozow.com",
                NotifyUrl: "https://ozow.com",
                }}
            privateKey="f276b028..."
            onErrorMessage={...}
            onPaymentCancel={(data) => {...}}
            onPaymentSuccess={(data) => {...}}
      />
    )
}

export default MyPaymemt;

Props

Prop	Type	Description	Required
data	`object`	Data to be sent to Ozow API	Yes
privateKey	`string`	Private key generated from Ozow	Yes
onErrorMessage	`function`	Callback function to handle error message	No
onPaymentCancel	`function`	Callback function to handle payment cancellation	No
onPaymentSuccess	`function`	Callback function to handle payment success	No
onPaymentError	`function`	Callback function to handle payment error	No

Data

Prop	Type	Description	Required
SiteCode	`string`	Site code generated from Ozow	Yes
Amount	`number`	Amount to be paid in rands	Yes
TransactionReference	`string`	Transaction reference to be sent to Ozow	Yes
BankReference	`string`	Bank reference to be sent to Ozow	Yes
CancelUrl	`string`	Url to be redirected to when payment is cancelled	Yes
ErrorUrl	`string`	Url to be redirected to when payment has an error	Yes
SuccessUrl	`string`	Url to be redirected to when payment is successful	Yes
NotifyUrl	`string`	Url to be redirected to when payment is successful	Yes
Customer	`string or number`	The customer’s name or identifier.	No
IsTest	`boolean`	Run on test mode when `true`	No (default `false`)
style	`object`	Style passed to the WebView component	No

In-App Payments Response example

{
  "Amount": "1.00",
  "BankName": "Capitec+Pay",
  "CurrencyCode": "ZAR",
  "Hash": "e2a02f05650f7468963776e8d6...73baf3835",
  "IsTest": "true",
  "Optional1": "",
  "Optional2": "",
  "Optional3": "",
  "Optional4": "",
  "Optional5": "",
  "SiteCode": "IPR-IPR-003",
  "Status": "Complete", // or "Cancelled" or "Error"
  "StatusMessage": "Test+transaction+completed",
  "TransactionId": "e315bf89-...-9823ef5d3d41",
  "TransactionReference": "12345671"
}

Link Payments

import { PaymentLink } from "react-native-ozow";

const myLink = new PaymentLink("9219...[API_KEY]", "f276...[PRIVATE_KEY]");

...
        <Button
          title="Get Payment Link"
          onPress={async () => {
            const results = await myLink.generateLink({
              SiteCode: "IPR...[SITE_CODE]]",
              CountryCode: "ZA",
              CurrencyCode: "ZAR",
              Amount: 10,
              TransactionReference: "1234567",
              BankReference: "123456",
              CancelUrl: "https://ozow.com",
              ErrorUrl: "https://ozow.com",
              SuccessUrl: "https://ozow.com",
              NotifyUrl: "https://ozow.com",
              IsTest: false,
              Customer: "John Doe",
            }, false);

            setLink(results.url);

            console.log(myLink.getPaymentLink()); //Get last generated link
          }}
        />
...

PaymentLink Params

Param	Type	Description	Required
API_KEY	`string`	API key generated from Ozow	Yes
PRIVATE_KEY	`string`	Private key generated from Ozow	Yes

PaymentLink Methods

Method	Params	Description	Required
generateLink	`data: object`, `isTest: boolean`	Data to be sent to Ozow API	Yes
getPaymentLink	`none`	Get last generated link	No

PaymentLink Data

See In-App Payments Data

PaymentLink Response example

{
  "errorMessage": null,
  "paymentRequestId": "77cc0a3f-c4cc-40fd-9048-de78d9a03ce0",
  "url": "https://pay.ozow.com/77cc0a3f-c4cc-40fd-9048-de78d9a03ce0/Secure"
}