@paygate/react-native

Official PayGate React Native SDK for accepting Mobile Money payments in Ghana using WebView.

Installation

``bash
npm install @paygate/react-native react-native-webview


or


yarn add @paygate/react-native react-native-webview
`

$3

`bash
cd ios && pod install
`

$3

No additional setup required.

Quick Start

$3

`tsx
import { PayGateProvider, PayGateAutoModal } from '@paygate/react-native';

function App() {
return (
publicKey="pk_test_your_public_key"
baseUrl="https://paygate.com"
>



{/ Add the auto modal at the root /}


);
}
`

$3

`typescript
// Server-side (Node.js)
import PayGate from 'paygate';

const paygate = new PayGate('sk_test_your_secret_key');

const session = await paygate.checkoutSessions.create({
amount: 100.00,
currency: 'GHS',
success_url: 'https://yoursite.com/success',
cancel_url: 'https://yoursite.com/cancel',
});

// Return session.id to your mobile app
`

$3

`tsx
import { usePayGate } from '@paygate/react-native';
import { Button, Alert } from 'react-native';

function CheckoutScreen() {
const { checkout, isVisible } = usePayGate();

const handlePay = async () => {
try {
// Get session ID from your server
const response = await fetch('https://your-api.com/create-session', {
method: 'POST',
body: JSON.stringify({ amount: 100 }),
});
const { sessionId } = await response.json();

// Open the payment modal
checkout({
sessionId,
onSuccess: (data) => {
console.log('Payment successful!', data);
Alert.alert('Success', 'Payment completed!');
// Navigate to success screen or update UI
},
onCancel: () => {
console.log('Payment cancelled');
},
onError: (error) => {
console.error('Payment error:', error);
Alert.alert('Error', error.message);
},
});
} catch (error) {
Alert.alert('Error', 'Failed to create checkout session');
}
};

return (
title="Pay GHS 100.00"
onPress={handlePay}
disabled={isVisible}
/>
);
}
`

Components

$3

Wrap your application with PayGateProvider to enable PayGate functionality.

`tsx
publicKey="pk_test_xxx"
baseUrl="https://paygate.com"
>
{children}

`

$3

An auto-managed modal that responds to checkout() and payWithLink() calls.
Place at the root of your app.

`tsx

`

$3

A manually controlled modal for more control.

`tsx
const [visible, setVisible] = useState(false);

visible={visible}
sessionId="cs_xxx"
onSuccess={(data) => {
console.log('Paid!', data);
setVisible(false);
}}
onCancel={() => setVisible(false)}
onClose={() => setVisible(false)}
animationType="slide"
showCloseButton={true}
/>
`

$3

Low-level WebView component for custom implementations.

`tsx
sessionId="cs_xxx"
onSuccess={(data) => console.log('Paid!', data)}
onCancel={() => console.log('Cancelled')}
onError={(error) => console.error(error)}
onLoad={() => console.log('Loaded')}
style={{ flex: 1 }}
showLoader={true}
/>
`

Hooks

$3

`tsx
const {
checkout, // (params: CheckoutParams) => void
payWithLink, // (params: PaymentLinkParams) => void
close, // () => void
isVisible, // boolean
publicKey, // string
baseUrl, // string
} = usePayGate();
`

Payment Links

You can also accept payments using payment links:

`tsx
const { payWithLink } = usePayGate();

const handleDonate = () => {
payWithLink({
linkId: 'pl_xxx',
amount: 50.00, // For dynamic amount links
email: 'customer@example.com',
phone: '0241234567',
onSuccess: (data) => {
console.log('Donation successful!', data);
},
onCancel: () => {
console.log('Donation cancelled');
},
});
};
`

TypeScript

This package includes TypeScript definitions:

`typescript
import type {
PayGateConfig,
CheckoutParams,
PaymentLinkParams,
PaymentResult,
PayGateError,
} from '@paygate/react-native';
`

Test Mode

Use test mode keys (pk_test_xxx) during development. In test mode, you can simulate different payment outcomes without processing real transactions.

Troubleshooting

$3

Make sure you have installed and linked react-native-webview:

`bash
npm install react-native-webview
cd ios && pod install
`

$3

Ensure PayGateAutoModal is placed at the root level of your app, after PayGateProvider:

`tsx


{/ Must be inside provider /}

``

License

MIT