razorpay-react-checkout 1.2.0 → 1.3.1

package/README.md

@@ -230,6 +230,57 @@ Returns an object with the following properties:
 - `Razorpay`: `RazorpayConstructor | null` - The raw Razorpay constructor (available on `window`).
 - `openRazorpay`: `(options: RazorpayOptions) => RazorpayInstance | null` - Helper function to initialize and open the checkout.
 
+### Server-Side Utilities (New!)
+
+Verify Razorpay signatures easily on your backend (Next.js API routes, Express, etc.).
+
+```ts
+import { verifySignature } from 'razorpay-react-checkout/server';
+
+// In your API route
+const isValid = verifySignature({
+  order_id: 'order_123',
+  payment_id: 'pay_123',
+  signature: 'sig_123'
+}, process.env.RAZORPAY_KEY_SECRET);
+
+if (isValid) {
+  // Signature verified
+}
+```
+
+### Better Error Handling
+
+Parse cryptic Razorpay error objects into user-friendly messages.
+
+```tsx
+import { getReadableErrorMessage, RazorpayEvents, RazorpayErrorCodes } from 'razorpay-react-checkout';
+
+// ...
+rzp.on(RazorpayEvents.PAYMENT_FAILED, (response) => {
+  const message = getReadableErrorMessage(response.error);
+  toast.error(message);
+  
+  if (response.error.code === RazorpayErrorCodes.BAD_REQUEST_ERROR) {
+    // Handle specific error
+  }
+});
+```
+
+### Enhanced Button Component
+
+Now supports variants and Tailwind classes!
+
+```tsx
+<RazorpayButton 
+  options={...} 
+  variant="primary" // primary, secondary, outline, ghost, danger
+  className="w-full"
+>
+  Pae Now
+</RazorpayButton>
+```
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -0,0 +1,255 @@
+import React$1, { ReactNode } from 'react';
+
+interface RazorpayTheme {
+    /**
+     * Hex code for the color of the checkout form.
+     */
+    color?: string;
+    /**
+     * Hex code for the backdrop color of the checkout modal.
+     */
+    backdrop_color?: string;
+    /**
+     * Hide the top bar of the checkout form.
+     */
+    hide_topbar?: boolean;
+    /**
+     * Image URL for the logo in the top bar.
+     */
+    image_padding?: string;
+}
+interface RazorpayModalOptions {
+    backdropclose?: boolean;
+    escape?: boolean;
+    handleback?: boolean;
+    confirm_close?: boolean;
+    ondismiss?: () => void;
+    animation?: boolean;
+}
+interface RazorpayPrefillOptions {
+    name?: string;
+    email?: string;
+    contact?: string;
+    method?: 'card' | 'netbanking' | 'wallet' | 'emi' | 'upi';
+}
+interface RazorpayTransfer {
+    /**
+     * The account ID of the linked account to which the transfer is to be made.
+     */
+    account: string;
+    /**
+     * The amount to be transferred to the linked account in currency subunits.
+     */
+    amount: number;
+    /**
+     * The currency in which the transfer is to be made.
+     */
+    currency: string;
+    /**
+     * A set of key-value pairs that you can attach to the transfer.
+     */
+    notes?: Record<string, string>;
+    /**
+     * Indicates whether the transfer should be put on hold.
+     */
+    on_hold?: boolean;
+    /**
+     * The timestamp at which the transfer should be settled.
+     */
+    on_hold_until?: number;
+}
+interface RazorpaySuccessResponse {
+    razorpay_payment_id: string;
+    razorpay_order_id?: string;
+    razorpay_signature?: string;
+    razorpay_subscription_id?: string;
+}
+interface RazorpayError {
+    code: string;
+    description: string;
+    source: string;
+    step: string;
+    reason: string;
+    metadata: {
+        order_id: string;
+        payment_id?: string;
+    };
+}
+interface RazorpayErrorResponse {
+    error: RazorpayError;
+}
+interface RazorpayOptions {
+    key: string;
+    amount: number | string;
+    currency: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    order_id?: string;
+    handler?: (response: RazorpaySuccessResponse) => void;
+    prefill?: RazorpayPrefillOptions;
+    notes?: Record<string, string>;
+    theme?: RazorpayTheme;
+    modal?: RazorpayModalOptions;
+    subscription_id?: string;
+    subscription_card_change?: boolean;
+    recurring?: boolean;
+    callback_url?: string;
+    redirect?: boolean;
+    customer_id?: string;
+    remember_customer?: boolean;
+    timeout?: number;
+    readonly?: {
+        contact?: boolean;
+        email?: boolean;
+        name?: boolean;
+    };
+    hidden?: {
+        contact?: boolean;
+        email?: boolean;
+    };
+    send_sms_hash?: boolean;
+    allow_rotation?: boolean;
+    retry?: {
+        enabled?: boolean;
+        max_count?: number;
+    };
+    config?: {
+        display?: {
+            language?: 'en' | 'ben' | 'hi' | 'mar' | 'guj' | 'tam' | 'tel';
+        };
+    };
+    /**
+     * Transfers for Razorpay Route (Split Payments)
+     */
+    transfers?: RazorpayTransfer[];
+}
+interface RazorpayInstance {
+    open: () => void;
+    on: (event: string, callback: (response: RazorpayErrorResponse | any) => void) => void;
+    close: () => void;
+}
+interface RazorpayConstructor {
+    new (options: RazorpayOptions): RazorpayInstance;
+    open: (options: RazorpayOptions) => void;
+    configure: (options: RazorpayOptions) => void;
+}
+declare global {
+    interface Window {
+        Razorpay?: RazorpayConstructor;
+    }
+}
+
+declare const useRazorpay: () => {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null;
+    defaultOptions?: Partial<RazorpayOptions>;
+    onPaymentSuccess: (response: RazorpaySuccessResponse) => void;
+    onPaymentError: (error: RazorpayErrorResponse) => void;
+    registerPaymentSuccess: (cb: (response: RazorpaySuccessResponse) => void) => () => void;
+    registerPaymentError: (cb: (error: RazorpayErrorResponse) => void) => () => void;
+    debug?: boolean;
+} | {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null | undefined;
+    defaultOptions: undefined;
+    onPaymentSuccess: () => void;
+    onPaymentError: () => void;
+    registerPaymentSuccess: () => () => void;
+    registerPaymentError: () => () => void;
+    debug: boolean;
+};
+
+declare const useRazorpaySuspense: () => {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    Razorpay: RazorpayConstructor | null | undefined;
+};
+
+interface RazorpayContextType {
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null;
+    defaultOptions?: Partial<RazorpayOptions>;
+    onPaymentSuccess: (response: RazorpaySuccessResponse) => void;
+    onPaymentError: (error: RazorpayErrorResponse) => void;
+    registerPaymentSuccess: (cb: (response: RazorpaySuccessResponse) => void) => () => void;
+    registerPaymentError: (cb: (error: RazorpayErrorResponse) => void) => () => void;
+    debug?: boolean;
+}
+interface RazorpayProviderProps {
+    children: ReactNode;
+    options?: Partial<RazorpayOptions>;
+    onPaymentSuccess?: (response: RazorpaySuccessResponse) => void;
+    onPaymentError?: (error: RazorpayErrorResponse) => void;
+    debug?: boolean;
+}
+declare const RazorpayProvider: React$1.FC<RazorpayProviderProps>;
+declare const useRazorpayContext: () => RazorpayContextType | undefined;
+
+interface RazorpayButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    options: RazorpayOptions;
+    onSuccess?: (response: RazorpaySuccessResponse) => void;
+    onFailure?: (response: RazorpayErrorResponse) => void;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+}
+declare const RazorpayButton: React$1.FC<RazorpayButtonProps>;
+
+interface RazorpayListenerProps {
+    onPaymentSuccess?: (response: RazorpaySuccessResponse) => void;
+    onPaymentError?: (error: RazorpayErrorResponse) => void;
+}
+declare const RazorpayListener: React.FC<RazorpayListenerProps>;
+
+/**
+ * Formats a currency amount.
+ *
+ * If the amount is passing in rupees (e.g. 500), it converts it to paise (50000) for Razorpay.
+ * It assumes the amount is in the base unit (e.g. Rupees) and converts to the smallest unit (e.g. Paise).
+ *
+ * @param amount - The amount in the base unit (e.g. 500 Rupees)
+ * @returns The amount in the smallest unit (e.g. 50000 Paise)
+ */
+declare const formatAmount: (amount: number) => number;
+/**
+ * Checks if the amount is already in paise (heuristic).
+ * This is just a helper, use with caution.
+ */
+declare const isPaise: (amount: number) => boolean;
+/**
+ * Parses a Razorpay error object and returns a human-readable message.
+ *
+ * @param error - The error object returned by Razorpay payment.failed event.
+ * @returns A user-friendly error message string.
+ */
+declare const getReadableErrorMessage: (error: any) => string;
+
+/**
+ * Standardized Razorpay events.
+ * Use these to avoid magic strings when listening to events.
+ */
+declare enum RazorpayEvents {
+    PAYMENT_FAILED = "payment.failed",
+    PAYMENT_AUTHORIZED = "payment.authorized",
+    PAYMENT_CAPTURED = "payment.captured",
+    EXTERNAL_WALLET_SELECTED = "external_wallet.selected"
+}
+/**
+ * Standardized Razorpay error codes.
+ * Use these to handle specific error scenarios.
+ */
+declare enum RazorpayErrorCodes {
+    BAD_REQUEST_ERROR = "BAD_REQUEST_ERROR",
+    GATEWAY_ERROR = "GATEWAY_ERROR",
+    SERVER_ERROR = "SERVER_ERROR"
+}
+
+declare const loadRazorpayScript: () => Promise<boolean>;
+
+export { RazorpayButton, type RazorpayButtonProps, type RazorpayConstructor, type RazorpayError, RazorpayErrorCodes, type RazorpayErrorResponse, RazorpayEvents, type RazorpayInstance, RazorpayListener, type RazorpayModalOptions, type RazorpayOptions, type RazorpayPrefillOptions, RazorpayProvider, type RazorpaySuccessResponse, type RazorpayTheme, type RazorpayTransfer, formatAmount, getReadableErrorMessage, isPaise, loadRazorpayScript, useRazorpay, useRazorpayContext, useRazorpaySuspense };

package/dist/index.d.ts

@@ -1,9 +1,255 @@
-export * from './types';
-export * from './hooks/useRazorpay';
-export * from './hooks/useRazorpaySuspense';
-export * from './components/RazorpayProvider';
-export * from './components/RazorpayButton';
-export * from './components/RazorpayListener';
-export * from './utils';
-export { loadRazorpayScript } from './lib/script-loader';
-//# sourceMappingURL=index.d.ts.map
+import React$1, { ReactNode } from 'react';
+
+interface RazorpayTheme {
+    /**
+     * Hex code for the color of the checkout form.
+     */
+    color?: string;
+    /**
+     * Hex code for the backdrop color of the checkout modal.
+     */
+    backdrop_color?: string;
+    /**
+     * Hide the top bar of the checkout form.
+     */
+    hide_topbar?: boolean;
+    /**
+     * Image URL for the logo in the top bar.
+     */
+    image_padding?: string;
+}
+interface RazorpayModalOptions {
+    backdropclose?: boolean;
+    escape?: boolean;
+    handleback?: boolean;
+    confirm_close?: boolean;
+    ondismiss?: () => void;
+    animation?: boolean;
+}
+interface RazorpayPrefillOptions {
+    name?: string;
+    email?: string;
+    contact?: string;
+    method?: 'card' | 'netbanking' | 'wallet' | 'emi' | 'upi';
+}
+interface RazorpayTransfer {
+    /**
+     * The account ID of the linked account to which the transfer is to be made.
+     */
+    account: string;
+    /**
+     * The amount to be transferred to the linked account in currency subunits.
+     */
+    amount: number;
+    /**
+     * The currency in which the transfer is to be made.
+     */
+    currency: string;
+    /**
+     * A set of key-value pairs that you can attach to the transfer.
+     */
+    notes?: Record<string, string>;
+    /**
+     * Indicates whether the transfer should be put on hold.
+     */
+    on_hold?: boolean;
+    /**
+     * The timestamp at which the transfer should be settled.
+     */
+    on_hold_until?: number;
+}
+interface RazorpaySuccessResponse {
+    razorpay_payment_id: string;
+    razorpay_order_id?: string;
+    razorpay_signature?: string;
+    razorpay_subscription_id?: string;
+}
+interface RazorpayError {
+    code: string;
+    description: string;
+    source: string;
+    step: string;
+    reason: string;
+    metadata: {
+        order_id: string;
+        payment_id?: string;
+    };
+}
+interface RazorpayErrorResponse {
+    error: RazorpayError;
+}
+interface RazorpayOptions {
+    key: string;
+    amount: number | string;
+    currency: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    order_id?: string;
+    handler?: (response: RazorpaySuccessResponse) => void;
+    prefill?: RazorpayPrefillOptions;
+    notes?: Record<string, string>;
+    theme?: RazorpayTheme;
+    modal?: RazorpayModalOptions;
+    subscription_id?: string;
+    subscription_card_change?: boolean;
+    recurring?: boolean;
+    callback_url?: string;
+    redirect?: boolean;
+    customer_id?: string;
+    remember_customer?: boolean;
+    timeout?: number;
+    readonly?: {
+        contact?: boolean;
+        email?: boolean;
+        name?: boolean;
+    };
+    hidden?: {
+        contact?: boolean;
+        email?: boolean;
+    };
+    send_sms_hash?: boolean;
+    allow_rotation?: boolean;
+    retry?: {
+        enabled?: boolean;
+        max_count?: number;
+    };
+    config?: {
+        display?: {
+            language?: 'en' | 'ben' | 'hi' | 'mar' | 'guj' | 'tam' | 'tel';
+        };
+    };
+    /**
+     * Transfers for Razorpay Route (Split Payments)
+     */
+    transfers?: RazorpayTransfer[];
+}
+interface RazorpayInstance {
+    open: () => void;
+    on: (event: string, callback: (response: RazorpayErrorResponse | any) => void) => void;
+    close: () => void;
+}
+interface RazorpayConstructor {
+    new (options: RazorpayOptions): RazorpayInstance;
+    open: (options: RazorpayOptions) => void;
+    configure: (options: RazorpayOptions) => void;
+}
+declare global {
+    interface Window {
+        Razorpay?: RazorpayConstructor;
+    }
+}
+
+declare const useRazorpay: () => {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null;
+    defaultOptions?: Partial<RazorpayOptions>;
+    onPaymentSuccess: (response: RazorpaySuccessResponse) => void;
+    onPaymentError: (error: RazorpayErrorResponse) => void;
+    registerPaymentSuccess: (cb: (response: RazorpaySuccessResponse) => void) => () => void;
+    registerPaymentError: (cb: (error: RazorpayErrorResponse) => void) => () => void;
+    debug?: boolean;
+} | {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null | undefined;
+    defaultOptions: undefined;
+    onPaymentSuccess: () => void;
+    onPaymentError: () => void;
+    registerPaymentSuccess: () => () => void;
+    registerPaymentError: () => () => void;
+    debug: boolean;
+};
+
+declare const useRazorpaySuspense: () => {
+    openRazorpay: (options: RazorpayOptions) => RazorpayInstance | null;
+    Razorpay: RazorpayConstructor | null | undefined;
+};
+
+interface RazorpayContextType {
+    isLoaded: boolean;
+    isLoading: boolean;
+    error: Error | null;
+    Razorpay: RazorpayConstructor | null;
+    defaultOptions?: Partial<RazorpayOptions>;
+    onPaymentSuccess: (response: RazorpaySuccessResponse) => void;
+    onPaymentError: (error: RazorpayErrorResponse) => void;
+    registerPaymentSuccess: (cb: (response: RazorpaySuccessResponse) => void) => () => void;
+    registerPaymentError: (cb: (error: RazorpayErrorResponse) => void) => () => void;
+    debug?: boolean;
+}
+interface RazorpayProviderProps {
+    children: ReactNode;
+    options?: Partial<RazorpayOptions>;
+    onPaymentSuccess?: (response: RazorpaySuccessResponse) => void;
+    onPaymentError?: (error: RazorpayErrorResponse) => void;
+    debug?: boolean;
+}
+declare const RazorpayProvider: React$1.FC<RazorpayProviderProps>;
+declare const useRazorpayContext: () => RazorpayContextType | undefined;
+
+interface RazorpayButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    options: RazorpayOptions;
+    onSuccess?: (response: RazorpaySuccessResponse) => void;
+    onFailure?: (response: RazorpayErrorResponse) => void;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+}
+declare const RazorpayButton: React$1.FC<RazorpayButtonProps>;
+
+interface RazorpayListenerProps {
+    onPaymentSuccess?: (response: RazorpaySuccessResponse) => void;
+    onPaymentError?: (error: RazorpayErrorResponse) => void;
+}
+declare const RazorpayListener: React.FC<RazorpayListenerProps>;
+
+/**
+ * Formats a currency amount.
+ *
+ * If the amount is passing in rupees (e.g. 500), it converts it to paise (50000) for Razorpay.
+ * It assumes the amount is in the base unit (e.g. Rupees) and converts to the smallest unit (e.g. Paise).
+ *
+ * @param amount - The amount in the base unit (e.g. 500 Rupees)
+ * @returns The amount in the smallest unit (e.g. 50000 Paise)
+ */
+declare const formatAmount: (amount: number) => number;
+/**
+ * Checks if the amount is already in paise (heuristic).
+ * This is just a helper, use with caution.
+ */
+declare const isPaise: (amount: number) => boolean;
+/**
+ * Parses a Razorpay error object and returns a human-readable message.
+ *
+ * @param error - The error object returned by Razorpay payment.failed event.
+ * @returns A user-friendly error message string.
+ */
+declare const getReadableErrorMessage: (error: any) => string;
+
+/**
+ * Standardized Razorpay events.
+ * Use these to avoid magic strings when listening to events.
+ */
+declare enum RazorpayEvents {
+    PAYMENT_FAILED = "payment.failed",
+    PAYMENT_AUTHORIZED = "payment.authorized",
+    PAYMENT_CAPTURED = "payment.captured",
+    EXTERNAL_WALLET_SELECTED = "external_wallet.selected"
+}
+/**
+ * Standardized Razorpay error codes.
+ * Use these to handle specific error scenarios.
+ */
+declare enum RazorpayErrorCodes {
+    BAD_REQUEST_ERROR = "BAD_REQUEST_ERROR",
+    GATEWAY_ERROR = "GATEWAY_ERROR",
+    SERVER_ERROR = "SERVER_ERROR"
+}
+
+declare const loadRazorpayScript: () => Promise<boolean>;
+
+export { RazorpayButton, type RazorpayButtonProps, type RazorpayConstructor, type RazorpayError, RazorpayErrorCodes, type RazorpayErrorResponse, RazorpayEvents, type RazorpayInstance, RazorpayListener, type RazorpayModalOptions, type RazorpayOptions, type RazorpayPrefillOptions, RazorpayProvider, type RazorpaySuccessResponse, type RazorpayTheme, type RazorpayTransfer, formatAmount, getReadableErrorMessage, isPaise, loadRazorpayScript, useRazorpay, useRazorpayContext, useRazorpaySuspense };