@paygate/expo

Official PayGate Expo SDK for accepting Mobile Money payments in Ghana.

Features

- WebView Mode: Embedded checkout in a modal (default)
- Browser Mode: Open checkout in system browser (optional, using expo-web-browser)
- Deep Linking: Return to app after browser checkout

Installation

``bash
npx expo install @paygate/expo react-native-webview

Optional: For browser mode


npx expo install expo-web-browser expo-linking
`

Quick Start

$3

`tsx
import { PayGateProvider, PayGateAutoModal } from '@paygate/expo';

export default function App() {
return (
publicKey="pk_test_your_public_key"
baseUrl="https://paygate.com"
urlScheme="myapp" // For browser mode deep linking
>





);
}
`

$3

In your app.json:

`json
{
"expo": {
"scheme": "myapp"
}
}
`

$3

`typescript
// Server-side
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 app
`

$3

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

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

const handlePayWithWebView = async () => {
const { sessionId } = await api.createCheckoutSession();

checkout({
sessionId,
onSuccess: (data) => {
console.log('Payment successful!', data);
Alert.alert('Success', 'Payment completed!');
},
onCancel: () => {
console.log('Payment cancelled');
},
onError: (error) => {
Alert.alert('Error', error.message);
},
});
};

const handlePayWithBrowser = async () => {
const { sessionId } = await api.createCheckoutSession();

await openCheckoutInBrowser({
sessionId,
onSuccess: (data) => {
Alert.alert('Success', 'Payment completed!');
},
onCancel: () => {
console.log('Cancelled');
},
});
};

return (

title="Pay with WebView"
onPress={handlePayWithWebView}
disabled={isVisible}
/>
{browserAvailable && (
title="Pay with Browser"
onPress={handlePayWithBrowser}
/>
)}

);
}
`

Components

$3

`tsx
publicKey="pk_test_xxx" // Required
baseUrl="https://paygate.com" // Optional
urlScheme="myapp" // Required for browser mode
defaultMode="webview" // 'webview' | 'browser'
>
{children}

`

$3

Auto-managed modal that responds to checkout() and payWithLink() calls.

`tsx

`

$3

Manually controlled modal.

`tsx
visible={visible}
sessionId="cs_xxx"
onSuccess={(data) => {}}
onCancel={() => {}}
onClose={() => setVisible(false)}
/>
`

$3

Low-level WebView component.

`tsx
sessionId="cs_xxx"
onSuccess={(data) => {}}
onCancel={() => {}}
onError={(error) => {}}
style={{ flex: 1 }}
/>
`

Hooks

$3

`tsx
const {
// WebView mode
checkout, // (params) => void
payWithLink, // (params) => void

// Browser mode
openCheckoutInBrowser, // (params) => Promise
openPaymentLinkInBrowser, // (params) => Promise

// State
close, // () => void
isVisible, // boolean
mode, // 'webview' | 'browser'
setMode, // (mode) => void
browserAvailable, // boolean
publicKey, // string
baseUrl, // string
} = usePayGate();
`

Payment Links

`tsx
const { payWithLink, openPaymentLinkInBrowser } = usePayGate();

// WebView mode
payWithLink({
linkId: 'pl_xxx',
amount: 50.00, // For dynamic amount
email: 'customer@example.com',
onSuccess: (data) => console.log('Paid!', data),
});

// Browser mode
await openPaymentLinkInBrowser({
linkId: 'pl_xxx',
amount: 50.00,
onSuccess: (data) => console.log('Paid!', data),
});
`

WebView vs Browser Mode

| Feature | WebView Mode | Browser Mode |
|---------|-------------|--------------|
| User Experience | In-app modal | System browser |
| Setup | Simpler | Requires deep linking |
| Dependencies | react-native-webview | + expo-web-browser, expo-linking |
| Best for | Most apps | Apps needing browser features |

TypeScript

`typescript
import type {
PayGateConfig,
CheckoutParams,
PaymentLinkParams,
PaymentResult,
PayGateError,
PaymentMode,
} from '@paygate/expo';
`

Test Mode

Use test keys (pk_test_xxx) during development to simulate payments without processing real transactions.

Troubleshooting

$3

`bash
npx expo install react-native-webview
`

$3

1. Install dependencies:
`bash
npx expo install expo-web-browser expo-linking
`

2. Configure URL scheme in app.json:
`json
{
"expo": {
"scheme": "myapp"
}
}
`

3. Pass urlScheme to provider:
`tsx

`

$3

Make sure your URL scheme matches in:
- app.json → expo.scheme
- PayGateProvider → urlScheme` prop

License

MIT