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.
[]
[]
[]
[]
[]
[]
[]
[]
[]
npm install react-native-ozow
Expo?
npx expo install react-native-ozow
- For more information, please visit Ozow API
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;
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 |
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 |
{
"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"
}
- If you need help with this project or you want to report a bug, please open an issue on GitHub