A lightweight Paystack checkout SDK for React Native and Expo that opens the Paystack InlineJS checkout inside a WebView popup modal.
The library is fully type-safe, requires no provider setup, and works in both Expo and bare React Native apps.
Paystack checkout opens inside a React Native modal WebView.
- Works with Expo
- Opens Paystack checkout in a popup WebView modal
- Fully TypeScript typed
- No Provider required
- Supports all Paystack InlineJS transaction methods
- Handles success, cancel, and error events
- Minimal setup
npm install react-native-paystack-modalInstall WebView if not already installed:
expo install react-native-webviewor
npm install react-native-webviewAdd the modal host once in your root component.
import { PaystackModalHost } from "react-native-paystack-modal";
export default function App() {
return (
<>
<YourApp />
<PaystackModalHost />
</>
);
}import { Paystack } from "react-native-paystack-modal";
Paystack.newTransaction({
key: "pk_test_xxxx",
email: "customer@email.com",
amount: 500000,
onSuccess: (response) => {
console.log("Payment success", response);
},
onCancel: () => {
console.log("Payment cancelled");
},
onError: (error) => {
console.error("Payment error", error);
}
});You can also use async/await if preferred.
try {
const response = await Paystack.checkout({
key: "pk_test_xxxx",
email: "customer@email.com",
amount: 500000
});
console.log(response);
} catch (err) {
console.log(err);
}| Method | Description |
|---|---|
checkout() |
Async checkout flow |
newTransaction() |
Standard Paystack transaction |
resumeTransaction() |
Resume server initialized payment |
preloadTransaction() |
Preload checkout modal |
cancelTransaction() |
Cancel transaction |
paymentRequest() |
Wallet payment request |
This SDK supports all Paystack InlineJS transaction methods.
See the official Paystack InlineJS documentation:
https://paystack.com/docs/payments/accept-payments/#inline
This library loads Paystack InlineJS inside a React Native WebView and presents it as a modal popup.
This approach allows the SDK to:
- Work with Expo
- Avoid native SDK linking
- Stay lightweight
- Remain fully type-safe
- React Native
>=0.72 - React
>=18 react-native-webview
MIT