@reevit/react 0.4.9 → 0.5.1

package/README.md

@@ -5,7 +5,7 @@ Unified Payment Widget for React Applications. Accept card and mobile money paym
 ## Installation
 
 ```bash
-npm install @reevit/react
+npm install @reevit/react@0.5.0
 ```
 
 ## Quick Start
@@ -37,6 +37,44 @@ function App() {
 }
 ```
 
+## 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
+<ReevitCheckout
+  paymentLinkCode="plink_123"
+  amount={25000}
+  currency="GHS"
+  email="customer@example.com"
+  customerName="Ada Lovelace"
+/>
+```
+
+## Controlled Modal
+
+You can control the open state yourself.
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<ReevitCheckout
+  publicKey="pk_test_your_key"
+  amount={10000}
+  currency="GHS"
+  isOpen={open}
+  onOpenChange={setOpen}
+/>
+```
+
+## 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
+<ReevitCheckout successDelayMs={0} /* ... */ />
+```
+
 ## Custom Theme
 
 You can customize the look and feel of the checkout widget to match your brand.
@@ -44,12 +82,17 @@ You can customize the look and feel of the checkout widget to match your brand.
 ```tsx
 <ReevitCheckout
   theme={{
-    primaryColor: '#6200EE',
-    backgroundColor: '#F5F5F5',
-    textColor: '#000000',
+    primaryColor: '#0EA5E9',
+    primaryForegroundColor: '#FFFFFF',
+    backgroundColor: '#F8FAFC',
+    borderColor: '#E2E8F0',
     borderRadius: '12px',
-    fontFamily: "'Segoe UI', Roboto, sans-serif",
-    darkMode: true,
+    companyName: 'Acme',
+    logoUrl: 'https://example.com/logo.png',
+    selectedBackgroundColor: '#E8F5F0',
+    selectedTextColor: '#0B1120',
+    selectedDescriptionColor: '#64748B',
+    selectedBorderColor: '#E2E8F0',
   }}
   // ...other props
 >
@@ -106,18 +149,50 @@ function CustomCheckout() {
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `publicKey` | `string` | **Required**. Your project's public key (pk_test_... or pk_live_...) |
+| `publicKey` | `string` | Your project's public key (required for API-created intents; optional when using `paymentLinkCode`) |
 | `amount` | `number` | **Required**. Amount in the smallest unit (e.g., 500 for 5.00) |
 | `currency` | `string` | **Required**. 3-letter ISO currency code (GHS, NGN, USD, etc.) |
 | `email` | `string` | Customer's email address |
 | `phone` | `string` | Customer's phone number (recommended for Mobile Money) |
+| `customerName` | `string` | Customer name (used in payment links and some PSPs) |
 | `reference` | `string` | Your own unique transaction reference |
 | `metadata` | `object` | Key-value pairs to store with the transaction |
-| `paymentMethods` | `string[]` | List of enabled methods: `['card', 'mobile_money', 'bank_transfer']` |
+| `customFields` | `object` | Custom fields for payment links |
+| `paymentLinkCode` | `string` | Hosted payment link code (uses the public link checkout flow) |
+| `paymentMethods` | `PaymentMethod[]` | Enabled methods: `card`, `mobile_money`, `bank_transfer`, `apple_pay`, `google_pay` (PSP/country dependent) |
+| `initialPaymentIntent` | `PaymentIntent` | Use an existing intent instead of creating a new one |
+| `children` | `ReactNode` | Custom trigger element |
+| `autoOpen` | `boolean` | Open automatically on mount |
+| `isOpen` | `boolean` | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | Controlled open state handler |
 | `theme` | `ReevitTheme` | Customization options for the widget |
+| `apiBaseUrl` | `string` | Override API base URL (self-hosted/testing) |
+| `successDelayMs` | `number` | Delay before calling `onSuccess` and closing (default `5000`) |
 | `onSuccess` | `function` | Called when the payment is successfully processed |
 | `onError` | `function` | Called when an error occurs |
 | `onClose` | `function` | Called when the user dismisses the widget |
+| `onStateChange` | `function` | Called when checkout state changes |
+
+## Theme Reference
+
+| Field | Description |
+|-------|-------------|
+| `primaryColor` | Primary text/brand color |
+| `primaryForegroundColor` | Text color on primary brand surfaces |
+| `backgroundColor` | Background color for the modal |
+| `borderColor` | Border and divider color |
+| `borderRadius` | Border radius for inputs and buttons |
+| `darkMode` | Force dark mode when `true` |
+| `logoUrl` | Logo URL shown in the header |
+| `companyName` | Brand name shown in the header |
+| `selectedBackgroundColor` | Background color for selected provider/methods |
+| `selectedTextColor` | Primary text color for selected items |
+| `selectedDescriptionColor` | Description/muted text color for selected items |
+| `selectedBorderColor` | Border color for selected items |
+| `pspSelectorBgColor` | PSP selector background color (where supported) |
+| `pspSelectorTextColor` | PSP selector text color (where supported) |
+| `pspSelectorBorderColor` | PSP selector border color (where supported) |
+| `pspSelectorUseBorder` | Use border-only PSP selector styling |
 
 ## PSP Bridges
 
@@ -197,10 +272,8 @@ function MpesaPayment() {
 
 ## Supported PSPs
 
-| Provider | Countries | Payment Methods |
-|----------|-----------|-----------------|
-| Paystack | NG, GH, ZA, KE | Card, Mobile Money, Bank |
-| Flutterwave | NG, GH, KE, ZA + | Card, Mobile Money, Bank |
+| Paystack | NG, GH, ZA, KE | Card, Mobile Money, Bank Transfer |
+| Flutterwave | NG, GH, KE, ZA + | Card, Mobile Money, Bank Transfer |
 | Hubtel | GH | Mobile Money |
 | Stripe | Global (50+) | Card, Apple Pay, Google Pay |
 | Monnify | NG | Card, Bank Transfer, USSD |

package/dist/index.d.mts

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 
 /** Minimal ReactNode-compatible type to avoid hard dependency on @types/react */
 type ReevitReactNode = ReactNode;
-type PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer';
-type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
+type PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer' | 'apple_pay' | 'google_pay';
+type MobileMoneyNetwork = 'mtn' | 'telecel' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
 interface ReevitCheckoutConfig {
@@ -56,6 +56,8 @@ interface ReevitCheckoutProps extends ReevitCheckoutConfig, ReevitCheckoutCallba
     theme?: ReevitTheme;
     /** Custom API base URL (for testing or self-hosted deployments) */
     apiBaseUrl?: string;
+    /** Delay (ms) before calling onSuccess and closing after a successful payment */
+    successDelayMs?: number;
 }
 type CheckoutState = 'idle' | 'loading' | 'ready' | 'method_selected' | 'processing' | 'success' | 'failed' | 'closed';
 interface PaymentResult {
@@ -201,7 +203,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, successDelayMs, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -754,9 +756,6 @@ declare class ReevitAPIClient {
  */
 declare function createReevitClient(config: ReevitAPIClientConfig): ReevitAPIClient;
 
-/**
- * Utility functions for the Reevit React SDK
- */
 /**
  * Format amount for display
  */

package/dist/index.d.ts

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 
 /** Minimal ReactNode-compatible type to avoid hard dependency on @types/react */
 type ReevitReactNode = ReactNode;
-type PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer';
-type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
+type PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer' | 'apple_pay' | 'google_pay';
+type MobileMoneyNetwork = 'mtn' | 'telecel' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
 interface ReevitCheckoutConfig {
@@ -56,6 +56,8 @@ interface ReevitCheckoutProps extends ReevitCheckoutConfig, ReevitCheckoutCallba
     theme?: ReevitTheme;
     /** Custom API base URL (for testing or self-hosted deployments) */
     apiBaseUrl?: string;
+    /** Delay (ms) before calling onSuccess and closing after a successful payment */
+    successDelayMs?: number;
 }
 type CheckoutState = 'idle' | 'loading' | 'ready' | 'method_selected' | 'processing' | 'success' | 'failed' | 'closed';
 interface PaymentResult {
@@ -201,7 +203,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, successDelayMs, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -754,9 +756,6 @@ declare class ReevitAPIClient {
  */
 declare function createReevitClient(config: ReevitAPIClientConfig): ReevitAPIClient;
 
-/**
- * Utility functions for the Reevit React SDK
- */
 /**
  * Format amount for display
  */