# @reevit/react
Unified Payment Widget for React Applications. Accept card and mobile money payments with a single integration.
## Installation
```bash
npm install @reevit/react
```
## Quick Start
The simplest way to integrate Reevit is using the `ReevitCheckout` component.
```tsx
import { ReevitCheckout } from '@reevit/react';
import '@reevit/react/styles.css';
function App() {
return (
{
console.log('Payment success!', result);
alert(`Payment of ${result.currency} ${result.amount/100} successful!`);
}}
onError={(error) => {
console.error('Payment failed:', error.message);
}}
>
);
}
```
## Server-created Checkout Sessions
For production checkouts, create the payment session on your backend with a server SDK, then pass the returned `session_secret` to React. The browser never creates the payment intent directly.
```tsx
console.log('Payment success!', result)}
onError={(error) => console.error('Payment failed:', error.message)}
/>
```
## Idempotency
Provide an `idempotencyKey` tied to your order/cart to avoid duplicate intent creation and enable safe retries.
```tsx
```
## Payment Links
If you have a hosted payment link, pass the link code. The widget will create the payment intent from the public link endpoint.
```tsx
```
## Controlled Modal
You can control the open state yourself.
```tsx
const [open, setOpen] = useState(false);
```
## Success Screen Delay
By default, the checkout shows a success screen for 5 seconds before calling `onSuccess` and closing. Override with `successDelayMs` (set to `0` for immediate close).
```tsx
```
## Custom Theme
You can customize the look and feel of the checkout widget to match your brand.
```tsx
```
## Advanced Usage: useReevit Hook
For full control over the payment flow, use the `useReevit` hook. This allows you to build your own custom UI while Reevit handles the state management and API communication.
```tsx
import { useReevit } from '@reevit/react';
function CustomCheckout() {
const {
status, // 'idle' | 'loading' | 'ready' | 'method_selected' | 'processing' | 'success' | 'failed'
initialize, // Start the process
selectMethod, // Pick 'card' or 'mobile_money'
processPayment, // Confirm payment
error,
isLoading
} = useReevit({
config: {
publicKey: 'pfk_test_xxx',
amount: 5000,
currency: 'GHS',
},
onSuccess: (res) => console.log('Done!', res),
});
if (status === 'loading') return ;
return (