@tagadapay/plugin-sdk 3.1.5 → 3.1.9

package/dist/v2/react/components/ApplePayButton.js

@@ -1,102 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Apple Pay Button Component for v2 Architecture
- * Uses v2 useExpressPaymentMethods hook and follows clean architecture principles
+ * Clean rewrite based on working CMS implementation
  */
-import { useCallback, useEffect, useState, useMemo } from 'react';
-import { PaymentsResource } from '../../core/resources/payments';
-import { OrdersResource } from '../../core/resources/orders';
-import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
-import { getGlobalApiClient } from '../hooks/useApiQuery';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { getBasisTheoryApiKey } from '../../../react/config/payment';
-import { minorUnitsToMajorUnits, getCurrencyInfo } from '../../../react/utils/money';
-export const ApplePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, storeName, currencyCode = 'USD', variant = 'default', size = 'lg', checkout, }) => {
-    const { applePayPaymentMethod, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, reComputeOrderSummary, setError: setContextError, } = useExpressPaymentMethods();
+import { getCurrencyInfo, minorUnitsToMajorUnits } from '../../../react/utils/money';
+import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
+import { usePaymentQuery } from '../hooks/usePaymentQuery';
+import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
+// Helper function to convert Apple Pay contact to Address (matches CMS)
+const applePayContactToAddress = (contact) => {
+    return {
+        address1: contact?.addressLines?.[0] || '',
+        address2: contact?.addressLines?.[1] || '',
+        lastName: contact?.familyName || '',
+        firstName: contact?.givenName || '',
+        city: contact?.locality || '',
+        state: contact?.administrativeArea || '',
+        country: contact?.countryCode || '',
+        postal: contact?.postalCode || '',
+        phone: contact?.phoneNumber || '',
+        email: contact?.emailAddress || '',
+    };
+};
+export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
+    const { applePayPaymentMethod, reComputeOrderSummary, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, setError: setContextError, } = useExpressPaymentMethods();
     const [processingPayment, setProcessingPayment] = useState(false);
     const [isApplePayAvailable, setIsApplePayAvailable] = useState(false);
-    const [applePayError, setApplePayError] = useState(null);
-    // Get Basis Theory API key from config (auto-detects environment)
+    // Get Basis Theory API key
     const basistheoryPublicKey = useMemo(() => getBasisTheoryApiKey(), []);
-    // Create SDK resource clients
-    const paymentsResource = useMemo(() => {
-        try {
-            return new PaymentsResource(getGlobalApiClient());
-        }
-        catch (error) {
-            throw new Error('Failed to initialize payments resource: ' +
-                (error instanceof Error ? error.message : 'Unknown error'));
-        }
-    }, []);
-    const ordersResource = useMemo(() => {
-        try {
-            return new OrdersResource(getGlobalApiClient());
-        }
-        catch (error) {
-            throw new Error('Failed to initialize orders resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
-        }
-    }, []);
+    // Use payment hook for proper payment processing
+    const { processApplePayPayment } = usePaymentQuery();
+    // Use shipping rates hook for selecting shipping rates
+    const { selectRate } = useShippingRatesQuery({ checkout });
     // Don't render if no Apple Pay payment method is enabled
     if (!applePayPaymentMethod) {
         return null;
     }
-    // Check Apple Pay availability
+    // Check Apple Pay availability (matches CMS pattern - useApplePayAvailable hook)
     useEffect(() => {
-        const checkApplePayAvailability = async () => {
-            if (typeof window === 'undefined' || !window.ApplePaySession) {
-                setIsApplePayAvailable(false);
-                return;
-            }
-            try {
-                const canMakePayments = window.ApplePaySession.canMakePayments();
-                if (canMakePayments) {
-                    const merchantId = applePayPaymentMethod?.metadata?.merchantId || '';
-                    const canMakePaymentsWithActiveCard = await window.ApplePaySession.canMakePaymentsWithActiveCard(merchantId);
-                    setIsApplePayAvailable(canMakePaymentsWithActiveCard);
-                    if (canMakePaymentsWithActiveCard) {
-                        handleAddExpressId('apple_pay');
-                    }
-                }
-                else {
-                    setIsApplePayAvailable(false);
-                }
-            }
-            catch (error) {
-                console.error('Error checking Apple Pay availability:', error);
-                setIsApplePayAvailable(false);
-            }
-        };
-        checkApplePayAvailability();
-    }, [applePayPaymentMethod, handleAddExpressId]);
-    // Helper to convert minor units to currency string for Apple Pay
-    // Uses SDK's minorUnitsToMajorUnits which properly handles different currency decimal places
+        const addExpress = () => handleAddExpressId('apple_pay');
+        if (window?.ApplePaySession && ApplePaySession.canMakePayments()) {
+            setIsApplePayAvailable(true);
+            addExpress();
+        }
+        else {
+            setIsApplePayAvailable(false);
+        }
+    }, [handleAddExpressId]);
+    // Helper to convert minor units to currency string
     const minorUnitsToCurrencyString = useCallback((amountMinor, currency) => {
-        if (!amountMinor || !currency)
-            return '0.00';
+        // Fail safely - don't allow invalid data to become '0.00'
+        if (amountMinor === undefined || amountMinor === null || !currency) {
+            throw new Error(`Invalid currency data: amountMinor=${amountMinor}, currency=${currency}`);
+        }
         const currencyInfo = getCurrencyInfo(currency);
         if (!currencyInfo) {
-            // Fallback to simple division if currency info not found
             console.warn(`Currency info not found for ${currency}, using fallback`);
             return (amountMinor / 100).toFixed(2);
         }
+        // 0 is a valid amount (e.g., free items)
         const majorUnits = minorUnitsToMajorUnits(amountMinor, currency);
         return majorUnits.toFixed(currencyInfo.ISOdigits);
     }, []);
-    // Convert Apple Pay contact to internal Address format
-    const applePayContactToAddress = useCallback((contact) => {
-        return {
-            address1: contact.addressLines?.[0] || '',
-            address2: contact.addressLines?.[1] || '',
-            lastName: contact.familyName || '',
-            firstName: contact.givenName || '',
-            city: contact.locality || '',
-            state: contact.administrativeArea || '',
-            country: contact.countryCode || '',
-            postal: contact.postalCode || '',
-            phone: contact.phoneNumber || '',
-            email: contact.emailAddress || '',
-        };
-    }, []);
-    // Validate merchant with Basis Theory
+    // Validate merchant with Basis Theory (matches CMS)
     const validateMerchant = useCallback(async () => {
         try {
             const response = await fetch('https://api.basistheory.com/apple-pay/session', {
@@ -111,18 +79,18 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
                 }),
             });
             if (!response.ok) {
-                throw new Error(`Failed to validate merchant: ${response.status}`);
+                throw new Error(`HTTP error! Status: ${response.status}`);
             }
             const merchantSession = await response.json();
             return merchantSession;
         }
-        catch (error) {
-            console.error('Merchant validation failed:', error);
-            throw error;
+        catch (err) {
+            console.error('[ApplePay] Merchant validation failed:', err);
+            throw err;
         }
-    }, [checkout.checkoutSession.store?.name]);
-    // Tokenize Apple Pay payment with Basis Theory
-    const tokenizeApplePay = useCallback(async (token) => {
+    }, [basistheoryPublicKey, checkout.checkoutSession.store?.name]);
+    // Tokenize Apple Pay payment with Basis Theory (matches CMS)
+    const tokenizeApplePay = useCallback(async (event) => {
         try {
             const response = await fetch('https://api.basistheory.com/apple-pay', {
                 method: 'POST',
@@ -131,278 +99,240 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
                     'BT-API-KEY': basistheoryPublicKey,
                 },
                 body: JSON.stringify({
-                    apple_payment_data: token,
+                    apple_payment_data: event.payment.token,
                 }),
             });
             if (!response.ok) {
-                throw new Error(`Failed to tokenize Apple Pay: ${response.status}`);
+                throw new Error(`HTTP error! Status: ${response.status}`);
             }
             const result = await response.json();
             return result.apple_pay; // Basis Theory returns the Apple Pay token in the apple_pay field
         }
         catch (error) {
-            console.error('Tokenization failed:', error);
+            console.error('[ApplePay] Tokenizing Apple Pay failed:', error);
             throw error;
         }
-    }, []);
-    // Process Apple Pay payment
-    const processApplePayPayment = useCallback(async (token, billingContact, shippingContact) => {
+    }, [basistheoryPublicKey]);
+    // Process payment using the hook (handles order creation, instrument creation, payment processing, and polling)
+    const handleApplePayPayment = useCallback(async (payToken) => {
+        setProcessingPayment(true);
         try {
-            setProcessingPayment(true);
-            // Update addresses before processing payment
-            if (shippingContact) {
-                const shippingAddress = applePayContactToAddress(shippingContact);
-                const billingAddress = billingContact ? applePayContactToAddress(billingContact) : null;
-                await updateCheckoutSessionValues({
-                    data: {
-                        shippingAddress,
-                        billingAddress,
-                    },
-                });
-            }
-            // Update customer email
-            if (shippingContact?.emailAddress) {
-                await updateCustomerEmail({
-                    data: {
-                        email: shippingContact.emailAddress,
-                    },
-                });
-            }
-            // 1. Tokenize with Basis Theory
-            const applePayToken = await tokenizeApplePay(token);
-            // 2. Create payment instrument from the tokenized Apple Pay payment
-            const paymentInstrumentData = {
-                type: 'apple_pay',
-                token: applePayToken.id,
-                dpanType: applePayToken.type,
-                card: {
-                    bin: applePayToken.card.bin,
-                    last4: applePayToken.card.last4,
-                    expirationMonth: applePayToken.card.expiration_month,
-                    expirationYear: applePayToken.card.expiration_year,
-                    brand: applePayToken.card.brand,
+            // Use the hook's method which handles everything properly
+            const result = await processApplePayPayment(checkout.checkoutSession.id, payToken, {
+                // Callbacks are handled by the hook, but we can intercept for custom behavior
+                onPaymentSuccess: (response) => {
+                    // Keep processingPayment true for loading state during navigation
+                    // The hook already returns the response, we just need to return it
+                },
+                onPaymentFailed: (error) => {
+                    console.error('[ApplePay] Payment failed:', error);
+                    setProcessingPayment(false);
+                    throw new Error(error.message);
                 },
-            };
-            const paymentInstrument = await paymentsResource.createPaymentInstrument(paymentInstrumentData);
-            if (!paymentInstrument?.id) {
-                throw new Error('Failed to create payment instrument');
-            }
-            // 3. Create order from checkout session
-            const orderResponse = await ordersResource.createOrder(checkout.checkoutSession.id);
-            if (!orderResponse?.success || !orderResponse?.order?.id) {
-                throw new Error('Failed to create order');
-            }
-            // 4. Process payment
-            const paymentResult = await paymentsResource.processPaymentDirect(checkout.checkoutSession.id, paymentInstrument.id, undefined, {
-                initiatedBy: 'customer',
-                source: 'checkout',
             });
-            if (onSuccess) {
-                onSuccess(paymentResult);
-            }
-            return paymentResult;
+            // Return the result (contains payment and order)
+            return result;
         }
         catch (error) {
-            console.error('Error processing Apple Pay payment:', error);
-            const errorMessage = error instanceof Error ? error.message : 'Apple Pay payment failed';
-            setApplePayError(errorMessage);
-            setContextError(errorMessage);
-            if (onError) {
-                onError(errorMessage);
-            }
-            throw error;
-        }
-        finally {
+            console.error('[ApplePay] Payment processing failed:', error);
             setProcessingPayment(false);
+            throw error;
         }
-    }, [
-        checkout.checkoutSession.id,
-        applePayContactToAddress,
-        updateCheckoutSessionValues,
-        updateCustomerEmail,
-        tokenizeApplePay,
-        paymentsResource,
-        ordersResource,
-        onSuccess,
-        onError,
-        setContextError,
-    ]);
-    // Handle Apple Pay button click
+    }, [processApplePayPayment, checkout.checkoutSession.id]);
+    // Handle Apple Pay button click (matches CMS implementation)
     const handleApplePayClick = useCallback(() => {
         if (!isApplePayAvailable || processingPayment || !checkout.summary) {
             return;
         }
-        const paymentRequest = {
+        const storeName = checkout.checkoutSession.store?.name || 'Store';
+        const total = {
+            label: storeName,
+            amount: minorUnitsToCurrencyString(checkout.summary.totalAdjustedAmount, checkout.summary.currency),
+            type: 'final',
+        };
+        const request = {
             countryCode: applePayPaymentMethod?.metadata?.country || 'US',
             currencyCode: checkout.summary.currency,
             supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
             merchantCapabilities: ['supports3DS'],
-            total: {
-                label: storeName || checkout.checkoutSession.store?.name || 'Total',
-                amount: minorUnitsToCurrencyString(checkout.summary.totalAdjustedAmount, checkout.summary.currency),
-                type: 'final',
-            },
-            lineItems: lineItems.map((item) => ({
-                label: item.label,
-                amount: item.amount,
-                type: 'final',
-            })),
-            shippingType: 'shipping',
-            shippingMethods: shippingMethods.map((method) => ({
-                label: method.label,
-                amount: method.amount,
-                detail: method.detail,
-                identifier: method.identifier,
-            })),
-            requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
-            requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
+            total,
+            shippingMethods,
+            lineItems,
+            requiredShippingContactFields: ['name', 'phone', 'email', 'postalAddress'],
+            requiredBillingContactFields: ['postalAddress'],
         };
-        const session = new window.ApplePaySession(3, paymentRequest);
-        session.onvalidatemerchant = async (event) => {
-            try {
-                console.log('Merchant validation requested for:', event.validationURL);
-                const merchantSession = await validateMerchant();
-                session.completeMerchantValidation(merchantSession);
-            }
-            catch (error) {
-                console.error('Merchant validation failed:', error);
-                session.abort();
-                const errorMessage = 'Apple Pay setup failed';
-                setApplePayError(errorMessage);
-                setContextError(errorMessage);
-                if (onError) {
-                    onError(errorMessage);
-                }
-            }
-        };
-        session.onshippingcontactselected = async (event) => {
-            try {
-                const shippingAddress = applePayContactToAddress(event.shippingContact);
-                await updateCheckoutSessionValues({
-                    data: { shippingAddress },
-                });
-                const newOrderSummary = await reComputeOrderSummary();
-                const update = {
-                    newShippingMethods: newOrderSummary?.shippingMethods.map((method) => ({
-                        label: method.label,
-                        amount: method.amount,
-                        detail: method.detail,
-                        identifier: method.identifier,
-                    })) || [],
-                    newTotal: {
-                        label: storeName || checkout.checkoutSession.store?.name || 'Total',
-                        amount: newOrderSummary?.total.amount || '0.00',
-                        type: 'final',
-                    },
-                    newLineItems: newOrderSummary?.lineItems.map((item) => ({
-                        label: item.label,
-                        amount: item.amount,
-                        type: 'final',
-                    })) || [],
-                };
-                session.completeShippingContactSelection(update);
-            }
-            catch (error) {
-                console.error('Shipping contact selection failed:', error);
-                session.completeShippingContactSelection({
-                    errors: [
-                        {
-                            code: 'shippingContactInvalid',
-                            message: 'Unable to ship to this address',
-                        },
-                    ],
-                });
-            }
-        };
-        session.onshippingmethodselected = async (event) => {
-            try {
-                // Update shipping method via API
-                const response = await fetch('/api/v1/shipping-rates/select', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        checkoutSessionId: checkout.checkoutSession.id,
-                        shippingRateId: event.shippingMethod.identifier,
-                    }),
-                });
-                if (!response.ok) {
-                    throw new Error('Failed to update shipping method');
+        try {
+            const session = new ApplePaySession(3, request);
+            // Merchant validation (matches CMS)
+            session.onvalidatemerchant = (event) => {
+                void (async () => {
+                    try {
+                        const merchantSession = await validateMerchant();
+                        session.completeMerchantValidation(merchantSession);
+                    }
+                    catch (error) {
+                        console.error('[ApplePay] Merchant validation failed:', error);
+                        session.abort();
+                    }
+                })();
+            };
+            // Payment authorized (matches CMS)
+            session.onpaymentauthorized = (event) => {
+                void (async () => {
+                    try {
+                        const shippingContact = event.payment.shippingContact;
+                        const billingContact = event.payment.billingContact;
+                        const shippingAddress = applePayContactToAddress(shippingContact);
+                        const billingAddress = applePayContactToAddress(billingContact);
+                        await updateCheckoutSessionValues({
+                            data: {
+                                shippingAddress,
+                                billingAddress,
+                            },
+                        });
+                        if (shippingContact.emailAddress) {
+                            await updateCustomerEmail({
+                                data: {
+                                    email: shippingContact.emailAddress,
+                                },
+                            });
+                        }
+                        const applePayToken = await tokenizeApplePay(event);
+                        session.completePayment(ApplePaySession.STATUS_SUCCESS);
+                        const result = await handleApplePayPayment(applePayToken);
+                        // Call success callback (triggers navigation)
+                        // Note: processingPayment stays true until component unmounts during navigation
+                        if (onSuccess) {
+                            onSuccess(result);
+                        }
+                    }
+                    catch (error) {
+                        console.error('[ApplePay] Payment processing failed:', error);
+                        session.completePayment(ApplePaySession.STATUS_FAILURE);
+                        const errorMessage = 'Payment Failed';
+                        setContextError(errorMessage);
+                        if (onError) {
+                            onError(errorMessage);
+                        }
+                    }
+                })();
+            };
+            // Shipping method selected (matches CMS - abort if recompute fails)
+            session.onshippingmethodselected = (event) => {
+                void (async () => {
+                    try {
+                        // Update shipping method via client
+                        await selectRate(event.shippingMethod.identifier);
+                        const newOrderSummary = await reComputeOrderSummary();
+                        if (!newOrderSummary) {
+                            console.error('[ApplePay] No order summary returned, aborting session');
+                            session.abort();
+                            return;
+                        }
+                        const { lineItems: newLineItems, total: newTotal } = newOrderSummary;
+                        // Ensure type: 'final' is present for Apple Pay (matches CMS)
+                        const formattedTotal = {
+                            ...newTotal,
+                            type: 'final',
+                        };
+                        const formattedLineItems = newLineItems.map((item) => ({
+                            ...item,
+                            type: 'final',
+                        }));
+                        session.completeShippingMethodSelection(ApplePaySession.STATUS_SUCCESS, formattedTotal, formattedLineItems);
+                    }
+                    catch (error) {
+                        console.error('[ApplePay] Shipping method selection failed:', error);
+                        session.abort();
+                    }
+                })();
+            };
+            // Shipping contact selected (matches CMS - abort if recompute fails)
+            session.onshippingcontactselected = (event) => {
+                void (async () => {
+                    const shippingContact = event.shippingContact;
+                    try {
+                        await updateCheckoutSessionValues({
+                            data: {
+                                shippingAddress: applePayContactToAddress(shippingContact),
+                            },
+                        });
+                        const newOrderSummary = await reComputeOrderSummary();
+                        if (!newOrderSummary) {
+                            console.error('[ApplePay] No order summary returned, aborting session');
+                            session.abort();
+                            setContextError('Payment Failed');
+                            return;
+                        }
+                        const { lineItems: newLineItems, total: newTotal, shippingMethods: newShippingMethods, } = newOrderSummary;
+                        // Ensure type: 'final' is present for Apple Pay (matches CMS)
+                        const formattedTotal = {
+                            ...newTotal,
+                            type: 'final',
+                        };
+                        const formattedLineItems = newLineItems.map((item) => ({
+                            ...item,
+                            type: 'final',
+                        }));
+                        session.completeShippingContactSelection(ApplePaySession.STATUS_SUCCESS, newShippingMethods, formattedTotal, formattedLineItems);
+                    }
+                    catch (error) {
+                        console.error('[ApplePay] Shipping contact selection failed:', error);
+                        session.abort();
+                    }
+                })();
+            };
+            session.onerror = (event) => {
+                console.error('[ApplePay] Session Error:', event);
+            };
+            session.oncancel = () => {
+                if (onCancel) {
+                    onCancel();
                 }
-                const newOrderSummary = await reComputeOrderSummary();
-                const update = {
-                    newTotal: {
-                        label: storeName || checkout.checkoutSession.store?.name || 'Total',
-                        amount: newOrderSummary?.total.amount || '0.00',
-                        type: 'final',
-                    },
-                    newLineItems: newOrderSummary?.lineItems.map((item) => ({
-                        label: item.label,
-                        amount: item.amount,
-                        type: 'final',
-                    })) || [],
-                };
-                session.completeShippingMethodSelection(update);
-            }
-            catch (error) {
-                console.error('Shipping method selection failed:', error);
-                session.completeShippingMethodSelection({});
-            }
-        };
-        session.onpaymentauthorized = async (event) => {
-            try {
-                await processApplePayPayment(event.payment.token, event.payment.billingContact, event.payment.shippingContact);
-                session.completePayment({
-                    status: window.ApplePaySession.STATUS_SUCCESS,
-                });
-            }
-            catch (error) {
-                console.error('Payment authorization failed:', error);
-                session.completePayment({
-                    status: window.ApplePaySession.STATUS_FAILURE,
-                });
-            }
-        };
-        session.oncancel = () => {
-            if (onCancel) {
-                onCancel();
-            }
-        };
-        session.begin();
+            };
+            session.begin();
+        }
+        catch (error) {
+            console.error('[ApplePay] Failed to start Apple Pay session:', error);
+        }
     }, [
         isApplePayAvailable,
         processingPayment,
         checkout,
-        storeName,
-        lineItems,
         shippingMethods,
+        lineItems,
+        applePayPaymentMethod,
+        minorUnitsToCurrencyString,
         validateMerchant,
-        applePayContactToAddress,
+        tokenizeApplePay,
+        processApplePayPayment,
         updateCheckoutSessionValues,
+        updateCustomerEmail,
         reComputeOrderSummary,
-        processApplePayPayment,
-        onCancel,
-        onError,
         setContextError,
-        minorUnitsToCurrencyString,
-        applePayPaymentMethod,
+        selectRate,
+        onSuccess,
+        onError,
+        onCancel,
     ]);
-    // Button size classes
-    const sizeClasses = {
-        sm: 'h-8 px-3 text-sm',
-        md: 'h-10 px-4 text-base',
-        lg: 'h-12 px-6 text-lg',
-    };
-    // Button variant classes
-    const variantClasses = {
-        default: 'bg-black text-white hover:bg-black/90',
-        outline: 'border border-black bg-white text-black hover:bg-black hover:text-white',
-        ghost: 'text-black hover:bg-black/10',
-    };
     if (!isApplePayAvailable) {
         return null;
     }
-    return (_jsxs("div", { className: "w-full", children: [_jsx("button", { type: "button", onClick: handleApplePayClick, disabled: disabled || processingPayment, className: `relative w-full rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${sizeClasses[size]} ${variantClasses[variant]} ${className} `, children: processingPayment ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { children: "Processing..." })] })) : (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }), "Pay with Apple Pay"] })) }), applePayError && (_jsx("div", { className: "mt-2 rounded border border-red-200 bg-red-50 p-2 text-sm text-red-600", children: applePayError }))] }));
+    return (_jsxs("button", { onClick: handleApplePayClick, disabled: processingPayment, style: {
+            backgroundColor: '#000',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            padding: '12px',
+            width: '100%',
+            fontSize: '16px',
+            fontWeight: '500',
+            cursor: processingPayment ? 'not-allowed' : 'pointer',
+            opacity: processingPayment ? 0.6 : 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '8px',
+        }, type: "button", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }), processingPayment ? 'Processing...' : 'Pay with Apple Pay'] }));
 };
 export default ApplePayButton;