@sikka/aps 0.0.1

package/dist/react/index.d.mts

@@ -0,0 +1,932 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * APS Provider - React Context for Amazon Payment Services
+ *
+ * Provides the APS client instance to all child components via React Context.
+ * This enables the useAPS, useCheckout, and usePayment hooks throughout your app.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx or app/providers.tsx
+ * import { APSProvider } from '@sikka/aps/react';
+ * import APS from '@sikka/aps';
+ *
+ * const aps = new APS({
+ *   merchantId: process.env.APS_MERCHANT_ID!,
+ *   accessCode: process.env.APS_ACCESS_CODE!,
+ *   requestSecret: process.env.APS_REQUEST_SECRET!,
+ *   responseSecret: process.env.APS_RESPONSE_SECRET!,
+ *   environment: 'sandbox'
+ * });
+ *
+ * export default function Providers({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <APSProvider client={aps}>
+ *       {children}
+ *     </APSProvider>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Interface describing the APS client instance
+ * This matches the shape of the APSClient class from the main package
+ */
+interface APSClientInstance$1 {
+    /** Payment Links module */
+    readonly paymentLinks: any;
+    /** Hosted Checkout module */
+    readonly hostedCheckout: any;
+    /** Custom Payment Page module */
+    readonly customPaymentPage: any;
+    /** Tokenization module */
+    readonly tokens: any;
+    /** Payments module (capture, refund, void) */
+    readonly payments: any;
+    /** Webhooks module */
+    readonly webhooks: any;
+    /** Recurring payments module */
+    readonly recurring: any;
+    /** Configuration */
+    readonly config: any;
+    /** Client options */
+    readonly options: any;
+}
+/**
+ * Props for APSProvider
+ */
+interface APSProviderProps {
+    /** The APS client instance - create with new APS(config) */
+    client: APSClientInstance$1;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * APS Provider Component
+ *
+ * Wrap your app with this provider to make the APS client available
+ * to all child components via hooks.
+ */
+declare const APSProvider: React.FC<APSProviderProps>;
+
+/**
+ * useAPS Hook
+ *
+ * Access the APS client instance from anywhere in your React component tree.
+ * Must be used within an APSProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useAPS } from '@sikka/aps/react';
+ *
+ * function PaymentComponent() {
+ *   const aps = useAPS();
+ *
+ *   const handleCreatePaymentLink = async () => {
+ *     const link = await aps.paymentLinks.create({
+ *       order: {
+ *         id: 'order_123',
+ *         amount: 10000,
+ *         currency: 'SAR'
+ *       }
+ *     });
+ *     console.log(link.url);
+ *   };
+ *
+ *   return <button onClick={handleCreatePaymentLink}>Create Link</button>;
+ * }
+ * ```
+ */
+/**
+ * Interface describing the APS client instance
+ * This matches the shape of the APSClient class from the main package
+ */
+interface APSClientInstance {
+    /** Payment Links module */
+    readonly paymentLinks: any;
+    /** Hosted Checkout module */
+    readonly hostedCheckout: any;
+    /** Custom Payment Page module */
+    readonly customPaymentPage: any;
+    /** Tokenization module */
+    readonly tokens: any;
+    /** Payments module (capture, refund, void) */
+    readonly payments: any;
+    /** Webhooks module */
+    readonly webhooks: any;
+    /** Recurring payments module */
+    readonly recurring: any;
+    /** Configuration */
+    readonly config: any;
+    /** Client options */
+    readonly options: any;
+}
+/**
+ * Hook to access the APS client instance
+ *
+ * @returns The APS client instance with all modules (paymentLinks, hostedCheckout, tokens, etc.)
+ * @throws Error if used outside of APSProvider
+ *
+ * @example
+ * ```tsx
+ * const aps = useAPS();
+ *
+ * // Access any module
+ * await aps.paymentLinks.create({ ... });
+ * await aps.hostedCheckout.create({ ... });
+ * await aps.tokens.create({ ... });
+ * await aps.payments.capture({ ... });
+ * ```
+ */
+declare function useAPS(): APSClientInstance;
+
+/**
+ * Payment method types supported by APS
+ */
+type PaymentMethod = 'card' | 'apple_pay' | 'mada' | 'stc_pay' | 'knet' | 'naps' | 'fawry' | 'meeza' | 'sadad' | 'aman';
+/**
+ * Transaction status
+ */
+type TransactionStatus = 'pending' | 'authorized' | 'captured' | 'failed' | 'voided' | 'refunded' | 'cancelled';
+/**
+ * Customer information
+ */
+interface Customer {
+    /** Customer email */
+    email?: string;
+    /** Customer name */
+    name?: string;
+    /** Customer phone */
+    phone?: string;
+    /** Billing address */
+    billingAddress?: {
+        street?: string;
+        city?: string;
+        state?: string;
+        country?: string;
+        postalCode?: string;
+    };
+}
+/**
+ * Order/Transaction details
+ */
+interface Order {
+    /** Unique order ID (merchant generated) */
+    id: string;
+    /** Amount in minor units (e.g., cents) */
+    amount: number;
+    /** Currency code */
+    currency: string;
+    /** Order description */
+    description?: string;
+    /** Customer information */
+    customer?: Customer;
+    /** Metadata for the order */
+    metadata?: Record<string, string>;
+}
+/**
+ * Payment link options
+ */
+interface PaymentLinkOptions {
+    /** Order details */
+    order: Order;
+    /** Payment methods to allow */
+    allowedPaymentMethods?: PaymentMethod[];
+    /** URL to redirect after successful payment */
+    successUrl?: string;
+    /** URL to redirect after failed payment */
+    failureUrl?: string;
+    /** URL to redirect after user cancels */
+    cancelUrl?: string;
+    /** Enable recurring payments */
+    recurring?: boolean;
+    /** Token validity in hours */
+    tokenValidityHours?: number;
+    /** Additional parameters */
+    metadata?: Record<string, string>;
+}
+/**
+ * Hosted checkout options
+ */
+interface HostedCheckoutOptions {
+    /** Order details */
+    order: Order;
+    /** Payment methods to allow */
+    allowedPaymentMethods?: PaymentMethod[];
+    /** URL to redirect after successful payment */
+    successUrl?: string;
+    /** URL to redirect after failed payment */
+    failureUrl?: string;
+    /** URL to redirect after user cancels */
+    cancelUrl?: string;
+    /** Hide shipping information */
+    hideShipping?: boolean;
+    /** Additional parameters */
+    metadata?: Record<string, string>;
+}
+/**
+ * Custom payment page options
+ */
+interface CustomPaymentPageOptions {
+    /** Order details */
+    order: Order;
+    /** Payment method to use */
+    paymentMethod: PaymentMethod;
+    /** Card token (if using tokenization) */
+    cardToken?: string;
+    /** 3DS return URL */
+    returnUrl?: string;
+    /** Enable 3DS authentication */
+    enable3DS?: boolean;
+    /** Additional parameters */
+    metadata?: Record<string, string>;
+}
+/**
+ * Payment response
+ */
+interface PaymentResponse {
+    /** Transaction ID */
+    transactionId: string;
+    /** Order ID */
+    orderId: string;
+    /** Transaction status */
+    status: TransactionStatus;
+    /** Amount */
+    amount: number;
+    /** Currency */
+    currency: string;
+    /** Payment method used */
+    paymentMethod?: string;
+    /** 3DS URL (if authentication required) */
+    authenticationUrl?: string;
+    /** Form data for redirect (if applicable) */
+    redirectForm?: {
+        url: string;
+        method: 'POST' | 'GET';
+        params: Record<string, string>;
+    };
+    /** Error message if failed */
+    message?: string;
+    /** Raw APS response */
+    rawResponse: Record<string, any>;
+}
+/**
+ * Payment link response
+ */
+interface PaymentLinkResponse {
+    /** Payment link URL */
+    url: string;
+    /** Link ID */
+    linkId: string;
+    /** Order ID */
+    orderId: string;
+    /** Expiry date */
+    expiresAt?: Date;
+    /** Raw APS response */
+    rawResponse: Record<string, any>;
+}
+/**
+ * Query transaction options
+ */
+interface QueryOptions {
+    /** Transaction ID to query */
+    transactionId: string;
+    /** Or order ID */
+    orderId?: string;
+}
+/**
+ * APS Error
+ */
+interface APSError {
+    /** Error code */
+    code: string;
+    /** Error message */
+    message: string;
+    /** HTTP status code */
+    statusCode?: number;
+    /** Raw error response */
+    rawResponse?: Record<string, any>;
+}
+/**
+ * APS Exception class
+ */
+declare class APSException extends Error {
+    code: string;
+    statusCode?: number;
+    rawResponse?: Record<string, any>;
+    constructor(error: APSError);
+}
+
+/**
+ * useCheckout Hook
+ *
+ * Manage hosted checkout state and flow in React components.
+ * Handles creating checkout sessions, redirecting to APS, and processing results.
+ *
+ * @example
+ * ```tsx
+ * import { useCheckout } from '@sikka/aps/react';
+ *
+ * function CheckoutPage() {
+ *   const {
+ *     checkout,
+ *     isLoading,
+ *     error,
+ *     createCheckout,
+ *     redirectToCheckout,
+ *     reset
+ *   } = useCheckout();
+ *
+ *   const handleCheckout = async () => {
+ *     await createCheckout({
+ *       order: {
+ *         id: 'order_123',
+ *         amount: 10000,
+ *         currency: 'SAR',
+ *         customer: { email: 'customer@example.com' }
+ *       },
+ *       returnUrl: window.location.origin + '/payment-result'
+ *     });
+ *
+ *     // Auto-redirect to APS hosted checkout
+ *     redirectToCheckout();
+ *   };
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return <button onClick={handleCheckout}>Pay Now</button>;
+ * }
+ * ```
+ */
+
+/**
+ * Checkout state
+ */
+interface CheckoutState {
+    /** The checkout session data */
+    checkout: PaymentResponse | null;
+    /** Whether a checkout operation is in progress */
+    isLoading: boolean;
+    /** Error from the last operation */
+    error: Error | null;
+}
+/**
+ * Return type for useCheckout hook
+ */
+interface UseCheckoutReturn extends CheckoutState {
+    /**
+     * Create a new hosted checkout session
+     * @param options - Checkout configuration options
+     * @returns The checkout session data
+     */
+    createCheckout: (options: HostedCheckoutOptions) => Promise<PaymentResponse>;
+    /**
+     * Redirect the customer to the APS hosted checkout page
+     * Must be called after createCheckout succeeds
+     * @throws Error if no checkout session exists
+     */
+    redirectToCheckout: () => void;
+    /**
+     * Reset the checkout state
+     */
+    reset: () => void;
+}
+/**
+ * Hook to manage hosted checkout flow
+ *
+ * @returns Checkout state and control functions
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   checkout,
+ *   isLoading,
+ *   error,
+ *   createCheckout,
+ *   redirectToCheckout,
+ *   reset
+ * } = useCheckout();
+ *
+ * // Create checkout session
+ * const handleCreate = async () => {
+ *   try {
+ *     await createCheckout({
+ *       order: {
+ *         id: 'order_123',
+ *         amount: 10000,
+ *         currency: 'SAR',
+ *         customer: { email: 'customer@example.com' }
+ *       },
+ *       returnUrl: '/payment-result',
+ *       tokenize: true
+ *     });
+ *   } catch (err) {
+ *     console.error('Checkout creation failed:', err);
+ *   }
+ * };
+ *
+ * // Redirect to APS
+ * const handleRedirect = () => {
+ *   redirectToCheckout(); // Submits form to APS
+ * };
+ * ```
+ */
+declare function useCheckout(): UseCheckoutReturn;
+
+/**
+ * usePayment Hook
+ *
+ * Manage payment status, confirmation, and lifecycle in React components.
+ * Handles creating payments, checking status, and processing results.
+ *
+ * @example
+ * ```tsx
+ * import { usePayment } from '@sikka/aps/react';
+ *
+ * function PaymentPage() {
+ *   const {
+ *     payment,
+ *     isLoading,
+ *     error,
+ *     createPaymentLink,
+ *     confirmPayment,
+ *     checkStatus,
+ *     reset
+ *   } = usePayment();
+ *
+ *   const handlePayment = async () => {
+ *     // Create a payment link
+ *     const link = await createPaymentLink({
+ *       order: {
+ *         id: 'order_123',
+ *         amount: 10000,
+ *         currency: 'SAR'
+ *       }
+ *     });
+ *
+ *     // Open payment link
+ *     window.open(link.url, '_blank');
+ *   };
+ *
+ *   return (
+ *     <button onClick={handlePayment} disabled={isLoading}>
+ *       {isLoading ? 'Processing...' : 'Pay Now'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Payment state
+ */
+interface PaymentState {
+    /** The current payment data */
+    payment: PaymentLinkResponse | PaymentResponse | null;
+    /** Current payment status */
+    status: TransactionStatus | null;
+    /** Whether a payment operation is in progress */
+    isLoading: boolean;
+    /** Error from the last operation */
+    error: Error | null;
+}
+/**
+ * Options for confirming a payment
+ */
+interface ConfirmPaymentOptions {
+    /** The transaction ID to confirm */
+    transactionId: string;
+    /** Polling interval in milliseconds (default: 2000) */
+    pollInterval?: number;
+    /** Maximum polling attempts (default: 30) */
+    maxAttempts?: number;
+}
+/**
+ * Return type for usePayment hook
+ */
+interface UsePaymentReturn extends PaymentState {
+    /**
+     * Create a payment link
+     * @param options - Payment link options
+     * @returns The created payment link
+     */
+    createPaymentLink: (options: PaymentLinkOptions) => Promise<PaymentLinkResponse>;
+    /**
+     * Create a custom payment (token-based)
+     * @param options - Custom payment options
+     * @returns The payment response
+     */
+    createCustomPayment: (options: CustomPaymentPageOptions) => Promise<PaymentResponse>;
+    /**
+     * Confirm a payment by polling for status
+     * Useful after redirect back from hosted checkout
+     * @param options - Confirmation options
+     * @returns Final payment status
+     */
+    confirmPayment: (options: ConfirmPaymentOptions) => Promise<TransactionStatus>;
+    /**
+     * Check the status of a transaction
+     * @param options - Query options (transactionId or orderId)
+     * @returns Transaction status
+     */
+    checkStatus: (options: QueryOptions) => Promise<TransactionStatus>;
+    /**
+     * Capture an authorized payment
+     * @param transactionId - The transaction to capture
+     * @param amount - Optional amount to capture (defaults to full)
+     */
+    capture: (transactionId: string, amount?: number) => Promise<void>;
+    /**
+     * Refund a payment
+     * @param transactionId - The transaction to refund
+     * @param amount - Optional amount to refund (defaults to full)
+     * @param reason - Optional refund reason
+     */
+    refund: (transactionId: string, amount?: number, reason?: string) => Promise<void>;
+    /**
+     * Void an authorized transaction
+     * @param transactionId - The transaction to void
+     * @param reason - Optional void reason
+     */
+    void: (transactionId: string, reason?: string) => Promise<void>;
+    /**
+     * Reset the payment state
+     */
+    reset: () => void;
+}
+/**
+ * Hook to manage payment lifecycle
+ *
+ * @returns Payment state and control functions
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   payment,
+ *   status,
+ *   isLoading,
+ *   error,
+ *   createPaymentLink,
+ *   confirmPayment,
+ *   checkStatus,
+ *   capture,
+ *   refund,
+ *   reset
+ * } = usePayment();
+ *
+ * // Create payment
+ * const link = await createPaymentLink({
+ *   order: { id: 'order_123', amount: 10000, currency: 'SAR' }
+ * });
+ *
+ * // After customer returns from payment
+ * const finalStatus = await confirmPayment({ transactionId: 'txn_123' });
+ * if (finalStatus === 'captured') {
+ *   // Payment successful!
+ * }
+ * ```
+ */
+declare function usePayment(): UsePaymentReturn;
+
+/**
+ * Styles for the tokenization form
+ * Developers can override these with custom styles
+ */
+interface TokenizationFormStyles {
+    container?: React.CSSProperties;
+    form?: React.CSSProperties;
+    inputGroup?: React.CSSProperties;
+    label?: React.CSSProperties;
+    input?: React.CSSProperties;
+    inputError?: React.CSSProperties;
+    row?: React.CSSProperties;
+    button?: React.CSSProperties;
+    buttonDisabled?: React.CSSProperties;
+    cardIcons?: React.CSSProperties;
+    securityNotice?: React.CSSProperties;
+}
+/**
+ * Card brand icons
+ */
+interface CardIcons {
+    visa?: React.ReactNode;
+    mastercard?: React.ReactNode;
+    amex?: React.ReactNode;
+    discover?: React.ReactNode;
+    mada?: React.ReactNode;
+    unknown?: React.ReactNode;
+}
+/**
+ * Props for the TokenizationForm component
+ */
+interface TokenizationFormProps {
+    /** APS tokenization form action URL */
+    actionUrl: string;
+    /** APS tokenization form parameters */
+    formParams: Record<string, string>;
+    /** Customer email for associating the saved card */
+    customerEmail?: string;
+    /** Callback when tokenization succeeds */
+    onSuccess?: (token: string, cardData: CardData) => void;
+    /** Callback when tokenization fails */
+    onError?: (error: string) => void;
+    /** Custom styles for the form */
+    styles?: TokenizationFormStyles;
+    /** Custom card brand icons */
+    icons?: CardIcons;
+    /** Custom labels */
+    labels?: {
+        cardNumber?: string;
+        cardHolder?: string;
+        customerEmail?: string;
+        expiryDate?: string;
+        cvv?: string;
+        submitButton?: string;
+        processing?: string;
+    };
+    /** Custom placeholders */
+    placeholders?: {
+        cardNumber?: string;
+        cardHolder?: string;
+        customerEmail?: string;
+        expiryDate?: string;
+        cvv?: string;
+    };
+    /** Disable card number formatting */
+    disableFormatting?: boolean;
+    /** Show card brand icons */
+    showCardIcons?: boolean;
+    /** Show security notice */
+    showSecurityNotice?: boolean;
+    /** Custom class names */
+    className?: {
+        container?: string;
+        form?: string;
+        inputGroup?: string;
+        input?: string;
+        label?: string;
+        button?: string;
+    };
+}
+/**
+ * Card data returned on successful tokenization
+ */
+interface CardData {
+    last4: string;
+    brand: string;
+    expiryMonth: string;
+    expiryYear: string;
+    cardholderName: string;
+}
+/**
+ * TokenizationForm Component
+ *
+ * A customizable React component for collecting card details and tokenizing them via APS.
+ *
+ * @example
+ * ```tsx
+ * import { TokenizationForm } from 'amazon-payment-services/react';
+ *
+ * function PaymentPage() {
+ *   const [formParams, setFormParams] = useState(null);
+ *
+ *   // Fetch form params from your backend
+ *   useEffect(() => {
+ *     fetch('/api/get-tokenization-form')
+ *       .then(res => res.json())
+ *       .then(data => setFormParams(data.formParams));
+ *   }, []);
+ *
+ *   if (!formParams) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <TokenizationForm
+ *       actionUrl={formParams.url}
+ *       formParams={formParams.params}
+ *       customerEmail="customer@example.com"
+ *       onSuccess={(token, card) => {
+ *         console.log('Tokenized:', token, card);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Error:', error);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const TokenizationForm: React.FC<TokenizationFormProps>;
+
+/**
+ * ErrorDisplay Component
+ *
+ * Display APS errors with helpful messages and suggested actions.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorDisplay } from '@sikka/aps/react';
+ *
+ * function PaymentForm() {
+ *   const [error, setError] = useState<APSException | null>(null);
+ *
+ *   return (
+ *     <div>
+ *       {error && (
+ *         <ErrorDisplay
+ *           error={error}
+ *           onRetry={() => handleRetry()}
+ *           onDismiss={() => setError(null)}
+ *         />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Props for ErrorDisplay component
+ */
+interface ErrorDisplayProps {
+    /** The APS error to display */
+    error: APSException | Error | string;
+    /** Callback when retry button is clicked */
+    onRetry?: () => void;
+    /** Callback when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Custom title override */
+    title?: string;
+    /** Show documentation link */
+    showDocumentation?: boolean;
+    /** Custom styles */
+    styles?: ErrorDisplayStyles;
+    /** Custom class names */
+    className?: string;
+}
+/**
+ * Styles for ErrorDisplay
+ */
+interface ErrorDisplayStyles {
+    container?: React.CSSProperties;
+    header?: React.CSSProperties;
+    title?: React.CSSProperties;
+    code?: React.CSSProperties;
+    message?: React.CSSProperties;
+    action?: React.CSSProperties;
+    actions?: React.CSSProperties;
+    button?: React.CSSProperties;
+    buttonRetry?: React.CSSProperties;
+    buttonDismiss?: React.CSSProperties;
+    documentation?: React.CSSProperties;
+}
+/**
+ * ErrorDisplay Component
+ *
+ * Displays APS errors with helpful messages, suggested actions, and retry/dismiss buttons.
+ */
+declare const ErrorDisplay: React.FC<ErrorDisplayProps>;
+
+/**
+ * PaymentStatus Component
+ *
+ * Display payment status with appropriate icons and styling.
+ *
+ * @example
+ * ```tsx
+ * import { PaymentStatus } from '@sikka/aps/react';
+ *
+ * function PaymentResult() {
+ *   return (
+ *     <PaymentStatus
+ *       status="captured"
+ *       amount={10000}
+ *       currency="SAR"
+ *       transactionId="txn_123"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Props for PaymentStatus component
+ */
+interface PaymentStatusProps {
+    /** The transaction status */
+    status: TransactionStatus | string;
+    /** The transaction amount (in minor units) */
+    amount?: number;
+    /** The currency code */
+    currency?: string;
+    /** The transaction ID */
+    transactionId?: string;
+    /** The payment method used */
+    paymentMethod?: string;
+    /** Custom title override */
+    title?: string;
+    /** Show amount */
+    showAmount?: boolean;
+    /** Show transaction ID */
+    showTransactionId?: boolean;
+    /** Custom styles */
+    styles?: PaymentStatusStyles;
+    /** Custom class names */
+    className?: string;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+}
+/**
+ * Styles for PaymentStatus
+ */
+interface PaymentStatusStyles {
+    container?: React.CSSProperties;
+    icon?: React.CSSProperties;
+    content?: React.CSSProperties;
+    title?: React.CSSProperties;
+    amount?: React.CSSProperties;
+    details?: React.CSSProperties;
+    detail?: React.CSSProperties;
+    detailLabel?: React.CSSProperties;
+    detailValue?: React.CSSProperties;
+}
+/**
+ * PaymentStatus Component
+ */
+declare const PaymentStatus: React.FC<PaymentStatusProps>;
+
+/**
+ * HostedCheckoutButton Component
+ *
+ * A ready-to-use button that creates a hosted checkout session and redirects to APS.
+ *
+ * @example
+ * ```tsx
+ * import { HostedCheckoutButton } from '@sikka/aps/react';
+ *
+ * function CheckoutPage() {
+ *   return (
+ *     <HostedCheckoutButton
+ *       order={{
+ *         id: 'order_123',
+ *         amount: 10000,
+ *         currency: 'SAR',
+ *         customer: { email: 'customer@example.com' }
+ *       }}
+ *       returnUrl="https://yoursite.com/payment-result"
+ *     >
+ *       Pay Now
+ *     </HostedCheckoutButton>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Props for HostedCheckoutButton
+ */
+interface HostedCheckoutButtonProps {
+    /** Order details */
+    order: Order;
+    /** URL to redirect after payment */
+    returnUrl: string;
+    /** Restrict payment methods */
+    allowedPaymentMethods?: string[];
+    /** Hide shipping fields */
+    hideShipping?: boolean;
+    /** Button content */
+    children: React.ReactNode;
+    /** Callback when checkout is created */
+    onCheckoutCreated?: (checkout: any) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Custom styles */
+    styles?: HostedCheckoutButtonStyles;
+    /** Custom class name */
+    className?: string;
+    /** Disable button */
+    disabled?: boolean;
+    /** Show error display */
+    showError?: boolean;
+    /** Loading component */
+    loadingComponent?: React.ReactNode;
+}
+/**
+ * Styles for HostedCheckoutButton
+ */
+interface HostedCheckoutButtonStyles {
+    button?: React.CSSProperties;
+    buttonDisabled?: React.CSSProperties;
+    buttonLoading?: React.CSSProperties;
+    errorContainer?: React.CSSProperties;
+}
+/**
+ * HostedCheckoutButton Component
+ *
+ * A complete checkout button that handles the entire hosted checkout flow.
+ */
+declare const HostedCheckoutButton: React.FC<HostedCheckoutButtonProps>;
+
+export { APSProvider, type APSProviderProps, type CardData, type CardIcons, type ConfirmPaymentOptions, ErrorDisplay, type ErrorDisplayProps, type ErrorDisplayStyles, HostedCheckoutButton, type HostedCheckoutButtonProps, type HostedCheckoutButtonStyles, PaymentStatus, type PaymentStatusProps, type PaymentStatusStyles, TokenizationForm, type TokenizationFormProps, type TokenizationFormStyles, type UseCheckoutReturn, type UsePaymentReturn, useAPS, useCheckout, usePayment };