https://github.com/theafolayan/react-native-kora-webview
Kora WebView payment SDK for react native
https://github.com/theafolayan/react-native-kora-webview
expo kora react-native sdk webview
Last synced: about 2 months ago
JSON representation
Kora WebView payment SDK for react native
- Host: GitHub
- URL: https://github.com/theafolayan/react-native-kora-webview
- Owner: theafolayan
- License: mit
- Created: 2025-06-16T20:22:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T21:01:10.000Z (about 1 year ago)
- Last Synced: 2025-06-16T21:34:53.687Z (about 1 year ago)
- Topics: expo, kora, react-native, sdk, webview
- Language: TypeScript
- Homepage: https://github.com/theafolayan/react-native-kora-webview
- Size: 11.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-korapay-webview
A fully typed, WebView-based React Native SDK to accept payments via [KoraPay](https://korapay.com).
Inspired by the simplicity of `react-native-paystack-webview`, this package adds modal support, auto-dismiss, custom loader, and flexible configuration out of the box.
---
## Features
- ✅ Modal-based WebView for KoraPay payments
- ✅ TypeScript-first design
- ✅ Auto-dismiss on payment success or cancellation
- ✅ `onSuccess`, `onCancel`, and `onClose` lifecycle hooks
- ✅ Optional `customLoader` support
- ✅ Accepts metadata and custom payment URLs
---
## Installation
```bash
npm install react-native-korapay-webview
# or
yarn add react-native-korapay-webview
```
Also install react-native-webview if not already installed:
```bash
npm install react-native-webview
```
## Basic Usage
```javascript
import React, { useState } from 'react';
import { Button, SafeAreaView, Text, View } from 'react-native';
import { KoraPayWebView } from 'react-native-korapay-webview';
export default function App() {
const [visible, setVisible] = useState(false);
return (
setVisible(true)} />
{
console.log('Payment Success:', res);
setVisible(false);
}}
onCancel={() => {
console.log('Payment Cancelled');
setVisible(false);
}}
onClose={() => {
console.log('WebView Closed');
setVisible(false);
}}
customLoader={
Loading Payment Page...
}
/>
);
}
```
## Props Reference
| Prop | Type | Required | Description |
| :------------- | :------------------------- | :------- | :--------------------------------------------- |
| `publicK` | `string` | ✅ | Your KoraPay public key |
| `email` | `string` | ✅ | Customer's email |
| `amount` | `number` | ✅ | Amount in kobo / lowest denomination |
| `reference` | `string` | ✅ | Unique transaction reference |
| `currency` | `string` | ❌ | Defaults to "NGN" |
| `metadata` | `Record` | ❌ | Additional metadata to include |
| `customPaymentUrl` | `string` | ❌ | Optional custom KoraPay payment URL |
| `visible` | `boolean` | ✅ | Controls whether modal is shown |
| `onSuccess` | `(response: object) => void` | ❌ | Called on successful payment |
| `onCancel` | `() => void` | ❌ | Called when user cancels payment |
| `onClose` | `() => void` | ❌ | Always called when modal closes |
| `customLoader` | `React.ReactNode` | ❌ | Custom loading UI while WebView loads |
## Use With Custom KoraPay Links
If you already generate hosted payment links from your backend:
```tsx
setVisible(false)}
/>
```
## Security Consideration
Avoid generating sensitive values like references or metadata in the frontend. Always handle secure logic server-side.