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.

[] [] [] [] [] [] [] [] []

Check out my other libraries

• React Native Payfast

Table of contents

• Documentation
  • Usage
• Demos
• In-App Payments
  • Props
  • Data
• Link Payments
  • PaymentLink Params
  • PaymentLink Methods
  • PaymentLink Data
• Author
• Help wanted!
• Credits
• Support
• Donate
• Follow me

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

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"
}

Author

Author

• Axole Maranjana

Help wanted!

• If you want to contribute to this project, please read the contributing guide.

Credits

• Ozow
• React Native
• Expo

Support

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

Donate