react-native-ozow
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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.

npm npm GitHub issues [GitHub stars] [GitHub license] Twitter [GitHub contributors] [GitHub last commit] [GitHub pull requests] [GitHub pull requests] [GitHub forks] [GitHub stars] [GitHub watchers]

Check out my other libraries

Table of contents

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"
}
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
          }}
        />
...
Param Type Description Required
API_KEY string API key generated from Ozow Yes
PRIVATE_KEY string Private key generated from Ozow Yes
Method Params Description Required
generateLink data: object, isTest: boolean Data to be sent to Ozow API Yes
getPaymentLink none Get last generated link No

See In-App Payments Data

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

Author

Author

  • Axole Maranjana Twitter Follow GitHub followers Instagram LinkedIn

Help wanted!

Credits

Support

  • If you need help with this project or you want to report a bug, please open an issue on GitHub

Donate

Buy Me A Coffee

Package Sidebar

Install

npm i react-native-ozow

Weekly Downloads

5

Version

1.0.3

License

MIT

Unpacked Size

38.4 kB

Total Files

21

Last publish

Collaborators

  • axolema