@reevit/react 0.4.8 → 0.5.0

package/README.md

@@ -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
 
@@ -199,8 +274,8 @@ function MpesaPayment() {
 
 | 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,7 +3,7 @@ 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 PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer' | 'apple_pay' | 'google_pay';
 type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
@@ -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 {
@@ -97,22 +99,16 @@ interface PaymentError {
     details?: Record<string, unknown>;
 }
 interface ReevitTheme {
-    /** Primary brand color */
+    /** Primary color (main text, headings, important elements) */
     primaryColor?: string;
-    /** Primary text color on brand surfaces */
+    /** Primary foreground color (sub text, descriptions, muted elements) */
     primaryForegroundColor?: string;
-    /** Background color */
+    /** Background color (applies to entire checkout: header, body, footer) */
     backgroundColor?: string;
-    /** Surface color for cards/panels */
-    surfaceColor?: string;
-    /** Text color */
-    textColor?: string;
-    /** Muted text color */
-    mutedTextColor?: string;
+    /** Border color (borders, dividers) */
+    borderColor?: string;
     /** Border radius for inputs and buttons */
     borderRadius?: string;
-    /** Font family to use */
-    fontFamily?: string;
     /** Whether to use dark mode */
     darkMode?: boolean;
     /** Custom logo URL to display in checkout header */
@@ -127,12 +123,29 @@ interface ReevitTheme {
     pspSelectorBorderColor?: string;
     /** Use border-only style for PSP selector (no filled background) */
     pspSelectorUseBorder?: boolean;
+    /** Selected PSP background color */
+    selectedBackgroundColor?: string;
+    /** Selected PSP primary text color */
+    selectedTextColor?: string;
+    /** Selected PSP description/muted text color */
+    selectedDescriptionColor?: string;
+    /** Selected PSP border color */
+    selectedBorderColor?: string;
 }
 interface CheckoutProviderOption {
     provider: string;
     name: string;
     methods: PaymentMethod[];
     countries?: string[];
+    /** Brand colors for selected state styling */
+    branding?: {
+        /** Background color when selected */
+        backgroundColor?: string;
+        /** Primary/accent color */
+        primaryColor?: string;
+        /** Text color on primary background */
+        primaryForegroundColor?: string;
+    };
 }
 interface MobileMoneyFormData {
     phone: string;
@@ -159,7 +172,7 @@ interface PaymentIntent {
     /** Currency code */
     currency: string;
     /** Payment status */
-    status: 'pending' | 'processing' | 'succeeded' | 'failed' | 'cancelled';
+    status: 'pending' | 'requires_action' | 'processing' | 'succeeded' | 'failed' | 'canceled' | 'cancelled';
     /** Recommended PSP based on routing rules */
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave' | 'monnify' | 'mpesa' | 'stripe';
     /** Available payment methods for this intent */
@@ -190,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[];
@@ -200,8 +213,17 @@ interface PaymentMethodSelectorProps {
     provider?: string;
     layout?: 'grid' | 'list';
     showLabel?: boolean;
+    /** Country code for dynamic logos (e.g., 'GH', 'NG', 'KE') */
+    country?: string;
+    /** Selected theme colors for method items */
+    selectedTheme?: {
+        backgroundColor?: string;
+        textColor?: string;
+        descriptionColor?: string;
+        borderColor?: string;
+    };
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, country, selectedTheme, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;
@@ -595,6 +617,11 @@ interface PaymentIntentResponse {
     status: string;
     client_secret: string;
     psp_public_key?: string;
+    psp_credentials?: {
+        merchantAccount?: string | number;
+        basicAuth?: string;
+        [key: string]: unknown;
+    };
     amount: number;
     currency: string;
     fee_amount: number;
@@ -729,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,7 +3,7 @@ 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 PaymentMethod = 'card' | 'mobile_money' | 'bank_transfer' | 'apple_pay' | 'google_pay';
 type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
@@ -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 {
@@ -97,22 +99,16 @@ interface PaymentError {
     details?: Record<string, unknown>;
 }
 interface ReevitTheme {
-    /** Primary brand color */
+    /** Primary color (main text, headings, important elements) */
     primaryColor?: string;
-    /** Primary text color on brand surfaces */
+    /** Primary foreground color (sub text, descriptions, muted elements) */
     primaryForegroundColor?: string;
-    /** Background color */
+    /** Background color (applies to entire checkout: header, body, footer) */
     backgroundColor?: string;
-    /** Surface color for cards/panels */
-    surfaceColor?: string;
-    /** Text color */
-    textColor?: string;
-    /** Muted text color */
-    mutedTextColor?: string;
+    /** Border color (borders, dividers) */
+    borderColor?: string;
     /** Border radius for inputs and buttons */
     borderRadius?: string;
-    /** Font family to use */
-    fontFamily?: string;
     /** Whether to use dark mode */
     darkMode?: boolean;
     /** Custom logo URL to display in checkout header */
@@ -127,12 +123,29 @@ interface ReevitTheme {
     pspSelectorBorderColor?: string;
     /** Use border-only style for PSP selector (no filled background) */
     pspSelectorUseBorder?: boolean;
+    /** Selected PSP background color */
+    selectedBackgroundColor?: string;
+    /** Selected PSP primary text color */
+    selectedTextColor?: string;
+    /** Selected PSP description/muted text color */
+    selectedDescriptionColor?: string;
+    /** Selected PSP border color */
+    selectedBorderColor?: string;
 }
 interface CheckoutProviderOption {
     provider: string;
     name: string;
     methods: PaymentMethod[];
     countries?: string[];
+    /** Brand colors for selected state styling */
+    branding?: {
+        /** Background color when selected */
+        backgroundColor?: string;
+        /** Primary/accent color */
+        primaryColor?: string;
+        /** Text color on primary background */
+        primaryForegroundColor?: string;
+    };
 }
 interface MobileMoneyFormData {
     phone: string;
@@ -159,7 +172,7 @@ interface PaymentIntent {
     /** Currency code */
     currency: string;
     /** Payment status */
-    status: 'pending' | 'processing' | 'succeeded' | 'failed' | 'cancelled';
+    status: 'pending' | 'requires_action' | 'processing' | 'succeeded' | 'failed' | 'canceled' | 'cancelled';
     /** Recommended PSP based on routing rules */
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave' | 'monnify' | 'mpesa' | 'stripe';
     /** Available payment methods for this intent */
@@ -190,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[];
@@ -200,8 +213,17 @@ interface PaymentMethodSelectorProps {
     provider?: string;
     layout?: 'grid' | 'list';
     showLabel?: boolean;
+    /** Country code for dynamic logos (e.g., 'GH', 'NG', 'KE') */
+    country?: string;
+    /** Selected theme colors for method items */
+    selectedTheme?: {
+        backgroundColor?: string;
+        textColor?: string;
+        descriptionColor?: string;
+        borderColor?: string;
+    };
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, country, selectedTheme, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;
@@ -595,6 +617,11 @@ interface PaymentIntentResponse {
     status: string;
     client_secret: string;
     psp_public_key?: string;
+    psp_credentials?: {
+        merchantAccount?: string | number;
+        basicAuth?: string;
+        [key: string]: unknown;
+    };
     amount: number;
     currency: string;
     fee_amount: number;
@@ -729,9 +756,6 @@ declare class ReevitAPIClient {
  */
 declare function createReevitClient(config: ReevitAPIClientConfig): ReevitAPIClient;
 
-/**
- * Utility functions for the Reevit React SDK
- */
 /**
  * Format amount for display
  */