React Native
Integrate Wajub into your React Native app — provider, usePayment hook, and native payment sheet.
6 min read
@wajub/react-native provides a provider and a hook to present the native payment sheet.
Install
npm install @wajub/react-native
# iOS
cd ios && pod installWrap the app
import { WajubProvider } from '@wajub/react-native';
export default function App() {
return (
<WajubProvider publicKey="pk_test.8f2b91c4d7e6a0f3">
<RootNavigator />
</WajubProvider>
);
}Present the payment
import { usePayment } from '@wajub/react-native';
function CheckoutScreen() {
const { present } = usePayment();
async function pay() {
// 1. Your backend creates the payment and returns the reference
const reference = await api.createPayment({ amount: 5000, currency: 'XAF' });
// 2. Present the payment sheet
const result = await present({ reference });
// 3. Update the UI (final confirmation comes from the server webhook)
if (result.status === 'succeeded') navigation.navigate('Success');
else if (result.status === 'failed') showError(result.reason);
}
return <Button title="Pay 5,000 XAF" onPress={pay} />;
}The truth is the server
As on all platforms, never deliver based solely on the SDK return: confirm via the
webhook payment.succeeded.