@sikka/aps 0.0.1 → 0.0.3

package/dist/react/index.d.mts

@@ -607,6 +607,8 @@ interface TokenizationFormStyles {
     buttonDisabled?: React.CSSProperties;
     cardIcons?: React.CSSProperties;
     securityNotice?: React.CSSProperties;
+    errorMessage?: React.CSSProperties;
+    helperText?: React.CSSProperties;
 }
 /**
  * Card brand icons
@@ -619,6 +621,57 @@ interface CardIcons {
     mada?: React.ReactNode;
     unknown?: React.ReactNode;
 }
+/**
+ * Custom field render function type
+ */
+type FieldRenderProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    error?: string;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name: string;
+};
+/**
+ * Field configuration
+ */
+interface FieldConfig {
+    /** Whether to show the field */
+    visible?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Custom label for the field */
+    label?: string;
+    /** Custom placeholder for the field */
+    placeholder?: string;
+    /** Custom render function for the field */
+    render?: (props: FieldRenderProps) => ReactNode;
+    /** Custom validation function */
+    validate?: (value: string) => string | undefined;
+    /** Custom class name for the field container */
+    className?: string;
+    /** Style overrides for this specific field */
+    style?: React.CSSProperties;
+}
+/**
+ * Layout configuration
+ */
+type LayoutType = 'vertical' | 'horizontal' | 'grid' | 'custom';
+interface LayoutConfig {
+    /** Layout type */
+    type?: LayoutType;
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Gap between fields */
+    gap?: string | number;
+    /** Custom CSS grid template areas */
+    gridTemplateAreas?: string;
+    /** Custom CSS grid template columns */
+    gridTemplateColumns?: string;
+}
 /**
  * Props for the TokenizationForm component
  */
@@ -637,7 +690,17 @@ interface TokenizationFormProps {
     styles?: TokenizationFormStyles;
     /** Custom card brand icons */
     icons?: CardIcons;
-    /** Custom labels */
+    /** Field configurations - controls visibility, labels, validation */
+    fields?: {
+        cardNumber?: FieldConfig;
+        cardHolder?: FieldConfig;
+        customerEmail?: FieldConfig;
+        expiryDate?: FieldConfig;
+        cvv?: FieldConfig;
+    };
+    /** Layout configuration */
+    layout?: LayoutConfig;
+    /** Custom labels (deprecated, use fields instead) */
     labels?: {
         cardNumber?: string;
         cardHolder?: string;
@@ -647,7 +710,7 @@ interface TokenizationFormProps {
         submitButton?: string;
         processing?: string;
     };
-    /** Custom placeholders */
+    /** Custom placeholders (deprecated, use fields instead) */
     placeholders?: {
         cardNumber?: string;
         cardHolder?: string;
@@ -661,6 +724,13 @@ interface TokenizationFormProps {
     showCardIcons?: boolean;
     /** Show security notice */
     showSecurityNotice?: boolean;
+    /** Custom security notice content */
+    securityNotice?: ReactNode;
+    /** Custom submit button */
+    submitButton?: ReactNode | ((props: {
+        loading: boolean;
+        onClick: () => void;
+    }) => ReactNode);
     /** Custom class names */
     className?: {
         container?: string;
@@ -669,7 +739,46 @@ interface TokenizationFormProps {
         input?: string;
         label?: string;
         button?: string;
+        row?: string;
+    };
+    /** Custom error messages */
+    errorMessages?: {
+        cardNumber?: string;
+        cardHolder?: string;
+        customerEmail?: string;
+        expiryDate?: string;
+        cvv?: string;
+        required?: string;
+        invalidEmail?: string;
     };
+    /** Field order - array of field names in desired order */
+    fieldOrder?: Array<'cardNumber' | 'cardHolder' | 'customerEmail' | 'expiryDate' | 'cvv'>;
+    /** Custom content to render before the form */
+    beforeForm?: ReactNode;
+    /** Custom content to render after the form */
+    afterForm?: ReactNode;
+    /** Custom content to render before the submit button */
+    beforeSubmit?: ReactNode;
+    /** Custom content to render after the submit button */
+    afterSubmit?: ReactNode;
+    /** Whether to use native form submission (default) or return data for custom handling */
+    nativeSubmission?: boolean;
+    /** Callback when form data changes - for custom submission handling */
+    onChange?: (data: FormData) => void;
+    /** Callback when form is valid and ready to submit - for custom submission handling */
+    onValidSubmit?: (data: FormData) => void;
+}
+/**
+ * Form data structure
+ */
+interface FormData {
+    cardNumber: string;
+    cardHolderName: string;
+    email: string;
+    expiryDate: string;
+    cvv: string;
+    cardBrand: string;
+    isValid: boolean;
 }
 /**
  * Card data returned on successful tokenization
@@ -684,38 +793,47 @@ interface CardData {
 /**
  * TokenizationForm Component
  *
- * A customizable React component for collecting card details and tokenizing them via APS.
+ * A highly 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);
+ * // Basic usage
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ * />
  *
- *   // Fetch form params from your backend
- *   useEffect(() => {
- *     fetch('/api/get-tokenization-form')
- *       .then(res => res.json())
- *       .then(data => setFormParams(data.formParams));
- *   }, []);
+ * // With custom styling and layout
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   layout={{ type: 'grid', columns: 2, gap: '16px' }}
+ *   fields={{
+ *     cardNumber: { label: 'Card Number', placeholder: '0000 0000 0000 0000' },
+ *     customerEmail: { visible: false },
+ *   }}
+ * />
  *
- *   if (!formParams) return <div>Loading...</div>;
+ * // With custom field rendering
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   fields={{
+ *     cardNumber: {
+ *       render: ({ value, onChange, error }) => (
+ *         <CustomInput value={value} onChange={onChange} error={error} />
+ *       ),
+ *     },
+ *   }}
+ * />
  *
- *   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);
- *       }}
- *     />
- *   );
- * }
+ * // With custom submission handling
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   nativeSubmission={false}
+ *   onValidSubmit={(data) => console.log('Form valid:', data)}
+ * />
  * ```
  */
 declare const TokenizationForm: React.FC<TokenizationFormProps>;
@@ -929,4 +1047,4 @@ interface HostedCheckoutButtonStyles {
  */
 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 };
+export { APSProvider, type APSProviderProps, type CardData, type CardIcons, type ConfirmPaymentOptions, ErrorDisplay, type ErrorDisplayProps, type ErrorDisplayStyles, type FieldConfig, type FieldRenderProps, type FormData, HostedCheckoutButton, type HostedCheckoutButtonProps, type HostedCheckoutButtonStyles, type LayoutConfig, type LayoutType, PaymentStatus, type PaymentStatusProps, type PaymentStatusStyles, TokenizationForm, type TokenizationFormProps, type TokenizationFormStyles, type UseCheckoutReturn, type UsePaymentReturn, useAPS, useCheckout, usePayment };

package/dist/react/index.d.ts

@@ -607,6 +607,8 @@ interface TokenizationFormStyles {
     buttonDisabled?: React.CSSProperties;
     cardIcons?: React.CSSProperties;
     securityNotice?: React.CSSProperties;
+    errorMessage?: React.CSSProperties;
+    helperText?: React.CSSProperties;
 }
 /**
  * Card brand icons
@@ -619,6 +621,57 @@ interface CardIcons {
     mada?: React.ReactNode;
     unknown?: React.ReactNode;
 }
+/**
+ * Custom field render function type
+ */
+type FieldRenderProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    error?: string;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name: string;
+};
+/**
+ * Field configuration
+ */
+interface FieldConfig {
+    /** Whether to show the field */
+    visible?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Custom label for the field */
+    label?: string;
+    /** Custom placeholder for the field */
+    placeholder?: string;
+    /** Custom render function for the field */
+    render?: (props: FieldRenderProps) => ReactNode;
+    /** Custom validation function */
+    validate?: (value: string) => string | undefined;
+    /** Custom class name for the field container */
+    className?: string;
+    /** Style overrides for this specific field */
+    style?: React.CSSProperties;
+}
+/**
+ * Layout configuration
+ */
+type LayoutType = 'vertical' | 'horizontal' | 'grid' | 'custom';
+interface LayoutConfig {
+    /** Layout type */
+    type?: LayoutType;
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Gap between fields */
+    gap?: string | number;
+    /** Custom CSS grid template areas */
+    gridTemplateAreas?: string;
+    /** Custom CSS grid template columns */
+    gridTemplateColumns?: string;
+}
 /**
  * Props for the TokenizationForm component
  */
@@ -637,7 +690,17 @@ interface TokenizationFormProps {
     styles?: TokenizationFormStyles;
     /** Custom card brand icons */
     icons?: CardIcons;
-    /** Custom labels */
+    /** Field configurations - controls visibility, labels, validation */
+    fields?: {
+        cardNumber?: FieldConfig;
+        cardHolder?: FieldConfig;
+        customerEmail?: FieldConfig;
+        expiryDate?: FieldConfig;
+        cvv?: FieldConfig;
+    };
+    /** Layout configuration */
+    layout?: LayoutConfig;
+    /** Custom labels (deprecated, use fields instead) */
     labels?: {
         cardNumber?: string;
         cardHolder?: string;
@@ -647,7 +710,7 @@ interface TokenizationFormProps {
         submitButton?: string;
         processing?: string;
     };
-    /** Custom placeholders */
+    /** Custom placeholders (deprecated, use fields instead) */
     placeholders?: {
         cardNumber?: string;
         cardHolder?: string;
@@ -661,6 +724,13 @@ interface TokenizationFormProps {
     showCardIcons?: boolean;
     /** Show security notice */
     showSecurityNotice?: boolean;
+    /** Custom security notice content */
+    securityNotice?: ReactNode;
+    /** Custom submit button */
+    submitButton?: ReactNode | ((props: {
+        loading: boolean;
+        onClick: () => void;
+    }) => ReactNode);
     /** Custom class names */
     className?: {
         container?: string;
@@ -669,7 +739,46 @@ interface TokenizationFormProps {
         input?: string;
         label?: string;
         button?: string;
+        row?: string;
+    };
+    /** Custom error messages */
+    errorMessages?: {
+        cardNumber?: string;
+        cardHolder?: string;
+        customerEmail?: string;
+        expiryDate?: string;
+        cvv?: string;
+        required?: string;
+        invalidEmail?: string;
     };
+    /** Field order - array of field names in desired order */
+    fieldOrder?: Array<'cardNumber' | 'cardHolder' | 'customerEmail' | 'expiryDate' | 'cvv'>;
+    /** Custom content to render before the form */
+    beforeForm?: ReactNode;
+    /** Custom content to render after the form */
+    afterForm?: ReactNode;
+    /** Custom content to render before the submit button */
+    beforeSubmit?: ReactNode;
+    /** Custom content to render after the submit button */
+    afterSubmit?: ReactNode;
+    /** Whether to use native form submission (default) or return data for custom handling */
+    nativeSubmission?: boolean;
+    /** Callback when form data changes - for custom submission handling */
+    onChange?: (data: FormData) => void;
+    /** Callback when form is valid and ready to submit - for custom submission handling */
+    onValidSubmit?: (data: FormData) => void;
+}
+/**
+ * Form data structure
+ */
+interface FormData {
+    cardNumber: string;
+    cardHolderName: string;
+    email: string;
+    expiryDate: string;
+    cvv: string;
+    cardBrand: string;
+    isValid: boolean;
 }
 /**
  * Card data returned on successful tokenization
@@ -684,38 +793,47 @@ interface CardData {
 /**
  * TokenizationForm Component
  *
- * A customizable React component for collecting card details and tokenizing them via APS.
+ * A highly 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);
+ * // Basic usage
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ * />
  *
- *   // Fetch form params from your backend
- *   useEffect(() => {
- *     fetch('/api/get-tokenization-form')
- *       .then(res => res.json())
- *       .then(data => setFormParams(data.formParams));
- *   }, []);
+ * // With custom styling and layout
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   layout={{ type: 'grid', columns: 2, gap: '16px' }}
+ *   fields={{
+ *     cardNumber: { label: 'Card Number', placeholder: '0000 0000 0000 0000' },
+ *     customerEmail: { visible: false },
+ *   }}
+ * />
  *
- *   if (!formParams) return <div>Loading...</div>;
+ * // With custom field rendering
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   fields={{
+ *     cardNumber: {
+ *       render: ({ value, onChange, error }) => (
+ *         <CustomInput value={value} onChange={onChange} error={error} />
+ *       ),
+ *     },
+ *   }}
+ * />
  *
- *   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);
- *       }}
- *     />
- *   );
- * }
+ * // With custom submission handling
+ * <TokenizationForm
+ *   actionUrl={formParams.url}
+ *   formParams={formParams.params}
+ *   nativeSubmission={false}
+ *   onValidSubmit={(data) => console.log('Form valid:', data)}
+ * />
  * ```
  */
 declare const TokenizationForm: React.FC<TokenizationFormProps>;
@@ -929,4 +1047,4 @@ interface HostedCheckoutButtonStyles {
  */
 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 };
+export { APSProvider, type APSProviderProps, type CardData, type CardIcons, type ConfirmPaymentOptions, ErrorDisplay, type ErrorDisplayProps, type ErrorDisplayStyles, type FieldConfig, type FieldRenderProps, type FormData, HostedCheckoutButton, type HostedCheckoutButtonProps, type HostedCheckoutButtonStyles, type LayoutConfig, type LayoutType, PaymentStatus, type PaymentStatusProps, type PaymentStatusStyles, TokenizationForm, type TokenizationFormProps, type TokenizationFormStyles, type UseCheckoutReturn, type UsePaymentReturn, useAPS, useCheckout, usePayment };