@tagadapay/plugin-sdk 2.3.9 → 2.3.11

package/dist/react/hooks/useApplePay.js

@@ -1,15 +1,49 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { getBasisTheoryApiKey } from '../config/payment';
 import { useTagadaContext } from '../providers/TagadaProvider';
 import { usePayment } from './usePayment';
 export function useApplePay(options = {}) {
     const [processingPayment, setProcessingPayment] = useState(false);
     const [error, setError] = useState(null);
-    const [qrCodeData, setQrCodeData] = useState(null);
+    const [isApplePayAvailable, setIsApplePayAvailable] = useState(false);
     const { createApplePayPaymentInstrument, processApplePayPayment } = usePayment();
     const { environment, apiService } = useTagadaContext();
     // Get API key from environment
     const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
+    // Check Apple Pay availability on mount
+    useEffect(() => {
+        const checkApplePayAvailability = () => {
+            if (typeof window === 'undefined') {
+                setIsApplePayAvailable(false);
+                return;
+            }
+            // Check if ApplePaySession is available
+            const hasApplePaySession = !!window.ApplePaySession;
+            if (!hasApplePaySession) {
+                // In development, simulate Apple Pay availability for UI testing
+                const isDevelopment = process.env.NODE_ENV === 'development' ||
+                    window.location.hostname === 'localhost' ||
+                    window.location.hostname.includes('127.0.0.1');
+                if (isDevelopment) {
+                    setIsApplePayAvailable(true);
+                    return;
+                }
+                setIsApplePayAvailable(false);
+                return;
+            }
+            try {
+                // Check basic Apple Pay support
+                const canMakePayments = window.ApplePaySession.canMakePayments();
+                setIsApplePayAvailable(canMakePayments);
+            }
+            catch (error) {
+                console.warn('Apple Pay availability check failed:', error);
+                setIsApplePayAvailable(false);
+            }
+        };
+        checkApplePayAvailability();
+        // Debug logging
+    }, []);
     // Utility function to convert Apple Pay contact to address
     const appleContactToAddress = useCallback((contact) => {
         return {
@@ -25,68 +59,85 @@ export function useApplePay(options = {}) {
             email: contact?.emailAddress || '',
         };
     }, []);
-    // Generate QR code URL for Apple Pay fallback
-    const generateQRCode = useCallback((data) => {
-        const qrData = {
-            type: 'apple_pay_fallback',
-            checkoutSessionId: data.checkoutSessionId,
-            total: data.total,
-            lineItems: data.lineItems,
-            config: data.config,
-            timestamp: Date.now(),
-        };
-        // Encode data as base64 for QR code
-        const encodedData = btoa(JSON.stringify(qrData));
-        return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(encodedData)}`;
-    }, []);
-    // Check if Apple Pay is available with enhanced cross-browser support
-    const isApplePayAvailable = (() => {
-        if (typeof window === 'undefined')
-            return false;
-        // Check if ApplePaySession is available
-        const hasApplePaySession = !!window.ApplePaySession;
-        if (!hasApplePaySession) {
-            // In development, simulate Apple Pay availability for UI testing
-            const isDevelopment = process.env.NODE_ENV === 'development' ||
-                window.location.hostname === 'localhost' ||
-                window.location.hostname.includes('127.0.0.1');
-            if (isDevelopment) {
-                console.log('Development mode: Simulating Apple Pay availability for UI testing');
-                return true;
-            }
-            return false;
+    // Update checkout session with addresses and customer info
+    const updateCheckoutSessionValues = useCallback(async (data) => {
+        try {
+            await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/address`, {
+                method: 'POST',
+                body: {
+                    data: {
+                        shippingAddress: data.shippingAddress,
+                        billingAddress: data.billingAddress,
+                    },
+                },
+            });
         }
+        catch (error) {
+            console.error('Failed to update checkout session addresses:', error);
+            throw error;
+        }
+    }, [apiService, options.checkoutSessionId]);
+    // Update customer email
+    const updateCustomerEmail = useCallback(async (email) => {
+        try {
+            await apiService.fetch(`/api/v1/customers/${options.customerId}`, {
+                method: 'POST',
+                body: {
+                    data: {
+                        email,
+                    },
+                },
+            });
+        }
+        catch (error) {
+            console.error('Failed to update customer email:', error);
+            throw error;
+        }
+    }, [apiService, options.customerId]);
+    // Recompute order summary after address/shipping changes
+    const reComputeOrderSummary = useCallback(async () => {
         try {
-            // Check basic Apple Pay support
-            return window.ApplePaySession.canMakePayments();
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/order-summary`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: { checkoutSessionId: options.checkoutSessionId }
+            });
+            return response;
         }
         catch (error) {
-            console.warn('Apple Pay availability check failed:', error);
-            return false;
+            console.error('Failed to recompute order summary:', error);
+            throw error;
         }
-    })();
-    // Check if we should show QR code fallback
-    const shouldShowQRCode = (() => {
-        if (typeof window === 'undefined')
-            return false;
-        // Show QR code if Apple Pay is not available but we're in a supported environment
-        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-        const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
-        const isChrome = /Chrome/.test(navigator.userAgent);
-        // Show QR code for mobile devices or when Apple Pay is not natively supported
-        return !isApplePayAvailable && (isMobile || isSafari || isChrome);
-    })();
-    // Debug logging
-    console.log('Apple Pay availability check:', {
-        hasWindow: typeof window !== 'undefined',
-        hasApplePaySession: typeof window !== 'undefined' && !!window.ApplePaySession,
-        canMakePayments: typeof window !== 'undefined' && window.ApplePaySession && window.ApplePaySession.canMakePayments(),
-        isDevelopment: process.env.NODE_ENV === 'development' ||
-            (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname.includes('127.0.0.1'))),
-        isAvailable: isApplePayAvailable,
-        note: !window.ApplePaySession ? 'Apple Pay not available in this browser. Use Safari on iOS/macOS for real Apple Pay support.' : 'Apple Pay API detected'
-    });
-    const validateMerchant = useCallback(async () => {
+    }, [apiService, options.checkoutSessionId]);
+    // Get shipping rates for the checkout session
+    const getShippingRates = useCallback(async () => {
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/shipping-rates`);
+            return response;
+        }
+        catch (error) {
+            console.error('Failed to get shipping rates:', error);
+            throw error;
+        }
+    }, [apiService, options.checkoutSessionId]);
+    // Set shipping rate
+    const setShippingRate = useCallback(async (shippingRateId) => {
+        try {
+            await apiService.fetch(`/api/v1/checkout-sessions/${options.checkoutSessionId}/shipping-rate`, {
+                method: 'POST',
+                body: {
+                    shippingRateId,
+                },
+            });
+        }
+        catch (error) {
+            console.error('Failed to set shipping rate:', error);
+            throw error;
+        }
+    }, [apiService, options.checkoutSessionId]);
+    const validateMerchant = useCallback(async (storeName) => {
         try {
             const response = await fetch('https://api.basistheory.com/apple-pay/session', {
                 method: 'POST',
@@ -95,7 +146,7 @@ export function useApplePay(options = {}) {
                     'BT-API-KEY': apiKey,
                 },
                 body: JSON.stringify({
-                    display_name: 'Tagada Pay Store',
+                    display_name: storeName || 'Tagada Pay Store',
                     domain: typeof window !== 'undefined' ? window.location.host : 'localhost',
                 }),
             });
@@ -133,21 +184,8 @@ export function useApplePay(options = {}) {
             throw error;
         }
     }, [apiKey]);
-    const handleApplePayClick = useCallback((checkoutSessionId, lineItems, total, config = {}) => {
+    const handleApplePayClick = useCallback((checkoutSessionId, lineItems, total, config = {}, storeName, currencyCode, shippingMethods) => {
         if (!isApplePayAvailable) {
-            if (shouldShowQRCode) {
-                // Generate QR code data for fallback
-                const qrData = {
-                    checkoutSessionId,
-                    lineItems,
-                    total,
-                    config,
-                    qrCodeUrl: generateQRCode({ checkoutSessionId, lineItems, total, config }),
-                };
-                setQrCodeData(qrData);
-                options.onError?.('Apple Pay not available - QR code generated');
-                return;
-            }
             const errorMsg = 'Apple Pay is not available on this device';
             setError(errorMsg);
             options.onError?.(errorMsg);
@@ -155,11 +193,12 @@ export function useApplePay(options = {}) {
         }
         const request = {
             countryCode: config.countryCode || 'US',
-            currencyCode: 'USD', // This should be passed as a parameter
+            currencyCode: currencyCode || 'USD',
             supportedNetworks: config.supportedNetworks || ['visa', 'masterCard', 'amex', 'discover'],
             merchantCapabilities: config.merchantCapabilities || ['supports3DS'],
             total,
             lineItems,
+            shippingMethods: shippingMethods || [],
             requiredShippingContactFields: ['name', 'phone', 'email', 'postalAddress'],
             requiredBillingContactFields: ['postalAddress'],
         };
@@ -168,8 +207,7 @@ export function useApplePay(options = {}) {
             session.onvalidatemerchant = (event) => {
                 void (async () => {
                     try {
-                        console.log('Merchant validation requested for:', event.validationURL);
-                        const merchantSession = await validateMerchant();
+                        const merchantSession = await validateMerchant(storeName);
                         session.completeMerchantValidation(merchantSession);
                     }
                     catch (error) {
@@ -191,10 +229,17 @@ export function useApplePay(options = {}) {
                         const billingContact = event.payment.billingContact;
                         const shippingAddress = shippingContact ? appleContactToAddress(shippingContact) : null;
                         const billingAddress = billingContact ? appleContactToAddress(billingContact) : null;
-                        console.log('Apple Pay payment authorized with addresses:', {
-                            shipping: shippingAddress,
-                            billing: billingAddress,
-                        });
+                        // Update checkout session with addresses
+                        if (shippingAddress || billingAddress) {
+                            await updateCheckoutSessionValues({
+                                shippingAddress: shippingAddress || undefined,
+                                billingAddress: billingAddress || undefined,
+                            });
+                        }
+                        // Update customer email if available
+                        if (shippingContact?.emailAddress) {
+                            await updateCustomerEmail(shippingContact.emailAddress);
+                        }
                         // Tokenize the Apple Pay payment
                         const applePayToken = await tokenizeApplePay(event);
                         // Complete the Apple Pay session
@@ -222,6 +267,48 @@ export function useApplePay(options = {}) {
                     }
                 })();
             };
+            // Handle shipping method selection
+            session.onshippingmethodselected = (event) => {
+                void (async () => {
+                    try {
+                        await setShippingRate(event.shippingMethod.identifier);
+                        const newOrderSummary = await reComputeOrderSummary();
+                        if (!newOrderSummary) {
+                            session.abort();
+                            return;
+                        }
+                        const { lineItems: newLineItems, total: newTotal } = newOrderSummary;
+                        session.completeShippingMethodSelection(window.ApplePaySession.STATUS_SUCCESS, newTotal, newLineItems);
+                    }
+                    catch (error) {
+                        console.error('Shipping method selection failed:', error);
+                        session.abort();
+                    }
+                })();
+            };
+            // Handle shipping contact selection
+            session.onshippingcontactselected = (event) => {
+                void (async () => {
+                    try {
+                        const shippingContact = event.shippingContact;
+                        await updateCheckoutSessionValues({
+                            shippingAddress: appleContactToAddress(shippingContact),
+                        });
+                        const newOrderSummary = await reComputeOrderSummary();
+                        if (!newOrderSummary) {
+                            session.abort();
+                            setError('Payment Failed');
+                            return;
+                        }
+                        const { lineItems: newLineItems, total: newTotal, shippingMethods: newShippingMethods, } = newOrderSummary;
+                        session.completeShippingContactSelection(window.ApplePaySession.STATUS_SUCCESS, newShippingMethods, newTotal, newLineItems);
+                    }
+                    catch (error) {
+                        console.error('Shipping contact selection failed:', error);
+                        session.abort();
+                    }
+                })();
+            };
             session.onerror = (event) => {
                 console.error('Apple Pay Session Error:', event);
                 const errorMsg = 'Apple Pay session error';
@@ -233,6 +320,7 @@ export function useApplePay(options = {}) {
                 setProcessingPayment(false);
                 options.onCancel?.();
             };
+            // Begin the Apple Pay session - this opens the modal
             session.begin();
         }
         catch (error) {
@@ -246,6 +334,10 @@ export function useApplePay(options = {}) {
         validateMerchant,
         tokenizeApplePay,
         processApplePayPayment,
+        updateCheckoutSessionValues,
+        updateCustomerEmail,
+        setShippingRate,
+        reComputeOrderSummary,
         options,
     ]);
     return {
@@ -253,8 +345,8 @@ export function useApplePay(options = {}) {
         processingPayment,
         applePayError: error,
         isApplePayAvailable,
-        shouldShowQRCode,
-        qrCodeData,
-        generateQRCode,
+        updateCheckoutSessionValues,
+        updateCustomerEmail,
+        setShippingRate,
     };
 }

package/dist/react/hooks/usePluginConfig.js

@@ -19,6 +19,7 @@ const loadLocalDevConfig = async (configVariant = 'default') => {
         // Use hostname-based detection for better Vite compatibility
         const isLocalDev = typeof window !== 'undefined' &&
             (window.location.hostname === 'localhost' ||
+                window.location.hostname.includes('ngrok-free.app') ||
                 window.location.hostname.includes('.localhost') ||
                 window.location.hostname.includes('127.0.0.1'));
         if (!isLocalDev) {
@@ -184,6 +185,7 @@ export const debugPluginConfig = async (configVariant = 'default') => {
     // Use hostname-based detection for better Vite compatibility
     const isLocalDev = typeof window !== 'undefined' &&
         (window.location.hostname === 'localhost' ||
+            window.location.hostname.includes('ngrok-free.app') ||
             window.location.hostname.includes('.localhost') ||
             window.location.hostname.includes('127.0.0.1'));
     if (!isLocalDev) {

package/dist/react/index.d.ts

@@ -40,6 +40,5 @@ export type { PostPurchaseOffer, PostPurchaseOfferItem, PostPurchaseOfferLineIte
 export type { Payment, PaymentPollingHook, PollingOptions } from './hooks/usePaymentPolling';
 export type { PaymentInstrument, ThreedsChallenge, ThreedsHook, ThreedsOptions, ThreedsProvider, ThreedsSession } from './hooks/useThreeds';
 export type { ApplePayToken, CardPaymentMethod, PaymentHook, PaymentInstrumentResponse, PaymentOptions, PaymentResponse } from './hooks/usePayment';
-export type { ApplePayConfig, ApplePayLineItem, ApplePayPaymentAuthorizedEvent, ApplePayPaymentRequest, ApplePayPaymentToken, ApplePayValidateMerchantEvent, BasisTheorySessionRequest, BasisTheoryTokenizeRequest, PayToken, UseApplePayOptions, UseApplePayResult, ApplePayAddress, ApplePayQRCodeData } from './types/apple-pay';
-export { ApplePayUniversalButton } from './components/ApplePayUniversalButton';
+export type { ApplePayAddress, ApplePayConfig, ApplePayLineItem, ApplePayPaymentAuthorizedEvent, ApplePayPaymentRequest, ApplePayPaymentToken, ApplePayValidateMerchantEvent, BasisTheorySessionRequest, BasisTheoryTokenizeRequest, PayToken, UseApplePayOptions, UseApplePayResult } from './types/apple-pay';
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/index.js

@@ -36,6 +36,6 @@ export { useThreedsModal } from './hooks/useThreedsModal';
 // Apple Pay hooks exports
 export { useApplePay } from './hooks/useApplePay';
 // Component exports
-export { ApplePayUniversalButton } from './components/ApplePayUniversalButton';
+// Apple Pay components removed - use useApplePay hook directly
 // Utility exports
 export { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from './utils/money';

package/dist/react/types/apple-pay.d.ts

@@ -64,6 +64,8 @@ export interface UseApplePayOptions {
     onError?: (error: string) => void;
     onCancel?: () => void;
     config?: ApplePayConfig;
+    checkoutSessionId?: string;
+    customerId?: string;
 }
 export interface ApplePayAddress {
     address1: string;
@@ -77,21 +79,17 @@ export interface ApplePayAddress {
     phone?: string;
     email?: string;
 }
-export interface ApplePayQRCodeData {
-    checkoutSessionId: string;
-    lineItems: ApplePayLineItem[];
-    total: ApplePayLineItem;
-    config?: ApplePayConfig;
-    qrCodeUrl?: string;
-}
 export interface UseApplePayResult {
-    handleApplePayClick: (checkoutSessionId: string, lineItems: ApplePayLineItem[], total: ApplePayLineItem, config?: ApplePayConfig) => void;
+    handleApplePayClick: (checkoutSessionId: string, lineItems: ApplePayLineItem[], total: ApplePayLineItem, config?: ApplePayConfig, storeName?: string, currencyCode?: string, shippingMethods?: any[]) => void;
     processingPayment: boolean;
     applePayError: string | null;
     isApplePayAvailable: boolean;
-    shouldShowQRCode: boolean;
-    qrCodeData: ApplePayQRCodeData | null;
-    generateQRCode: (data: ApplePayQRCodeData) => string;
+    updateCheckoutSessionValues: (data: {
+        shippingAddress?: ApplePayAddress;
+        billingAddress?: ApplePayAddress;
+    }) => Promise<void>;
+    updateCustomerEmail: (email: string) => Promise<void>;
+    setShippingRate: (shippingRateId: string) => Promise<void>;
 }
 declare global {
     interface Window {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/react/components/ApplePayUniversalButton.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { ApplePayLineItem, ApplePayConfig } from '../types/apple-pay';
-interface ApplePayUniversalButtonProps {
-    checkoutSessionId: string;
-    lineItems: ApplePayLineItem[];
-    total: ApplePayLineItem;
-    config?: ApplePayConfig;
-    onSuccess?: (payment: any) => void;
-    onError?: (error: string) => void;
-    onCancel?: () => void;
-    className?: string;
-    children?: React.ReactNode;
-    disabled?: boolean;
-}
-export declare const ApplePayUniversalButton: React.FC<ApplePayUniversalButtonProps>;
-export default ApplePayUniversalButton;

package/dist/react/components/ApplePayUniversalButton.example.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const ApplePayUniversalButtonExample: React.FC;
-export default ApplePayUniversalButtonExample;

package/dist/react/components/ApplePayUniversalButton.example.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ApplePayUniversalButton } from './ApplePayUniversalButton';
-// Example usage of ApplePayUniversalButton
-export const ApplePayUniversalButtonExample = () => {
-    const checkoutSessionId = 'example-session-123';
-    const lineItems = [
-        {
-            label: 'Product 1',
-            amount: '29.99',
-            type: 'final',
-        },
-        {
-            label: 'Shipping',
-            amount: '5.99',
-            type: 'final',
-        },
-    ];
-    const total = {
-        label: 'Total',
-        amount: '35.98',
-        type: 'final',
-    };
-    const config = {
-        countryCode: 'US',
-        supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
-        merchantCapabilities: ['supports3DS'],
-    };
-    const handleSuccess = (payment) => {
-        console.log('Payment successful:', payment);
-    };
-    const handleError = (error) => {
-        console.error('Payment error:', error);
-    };
-    const handleCancel = () => {
-        console.log('Payment cancelled');
-    };
-    return (_jsxs("div", { className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg", children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "Apple Pay Universal Button Example" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-semibold mb-2", children: "Order Summary:" }), lineItems.map((item, index) => (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { children: item.label }), _jsxs("span", { children: ["$", item.amount] })] }, index))), _jsxs("div", { className: "flex justify-between font-bold border-t pt-2 mt-2", children: [_jsx("span", { children: total.label }), _jsxs("span", { children: ["$", total.amount] })] })] }), _jsx(ApplePayUniversalButton, { checkoutSessionId: checkoutSessionId, lineItems: lineItems, total: total, config: config, onSuccess: handleSuccess, onError: handleError, onCancel: handleCancel, className: "w-full" }), _jsxs("div", { className: "text-xs text-gray-500 mt-4", children: [_jsx("p", { children: "This button will:" }), _jsxs("ul", { className: "list-disc list-inside space-y-1", children: [_jsx("li", { children: "Show Apple Pay on supported devices (Safari iOS/macOS)" }), _jsx("li", { children: "Show QR code on other mobile browsers" }), _jsx("li", { children: "Show \"Unavailable\" on unsupported browsers" })] })] })] })] }));
-};
-export default ApplePayUniversalButtonExample;

package/dist/react/components/ApplePayUniversalButton.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useApplePay } from '../hooks/useApplePay';
-export const ApplePayUniversalButton = ({ checkoutSessionId, lineItems, total, config = {}, onSuccess, onError, onCancel, className = '', children, disabled = false, }) => {
-    const [showQRCode, setShowQRCode] = useState(false);
-    const { handleApplePayClick, processingPayment, applePayError, isApplePayAvailable, shouldShowQRCode, qrCodeData, generateQRCode, } = useApplePay({
-        onSuccess,
-        onError,
-        onCancel,
-        config,
-    });
-    const handleClick = () => {
-        if (isApplePayAvailable) {
-            handleApplePayClick(checkoutSessionId, lineItems, total, config);
-        }
-        else if (shouldShowQRCode) {
-            setShowQRCode(true);
-            // Generate QR code data
-            const qrData = {
-                checkoutSessionId,
-                lineItems,
-                total,
-                config,
-                qrCodeUrl: generateQRCode({ checkoutSessionId, lineItems, total, config }),
-            };
-            handleApplePayClick(checkoutSessionId, lineItems, total, config);
-        }
-        else {
-            onError?.('Apple Pay is not available on this device');
-        }
-    };
-    const getButtonText = () => {
-        if (processingPayment)
-            return 'Processing...';
-        if (isApplePayAvailable)
-            return 'Pay with Apple Pay';
-        if (shouldShowQRCode)
-            return 'Show QR Code';
-        return 'Apple Pay Unavailable';
-    };
-    const getButtonIcon = () => {
-        if (isApplePayAvailable) {
-            return (_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" }) }));
-        }
-        if (shouldShowQRCode) {
-            return (_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M3 3h7v7H3V3zm2 2v3h3V5H5zm8-2h7v7h-7V3zm2 2v3h3V5h-3zM3 13h7v7H3v-7zm2 2v3h3v-3H5zm8-2h7v7h-7v-7zm2 2v3h3v-3h-3z" }) }));
-        }
-        return (_jsx("svg", { className: "h-6 w-6", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
-    };
-    const getButtonStyle = () => {
-        const baseStyle = "h-10 w-full text-base shadow-sm transition-colors duration-200 flex items-center justify-center gap-2";
-        if (isApplePayAvailable) {
-            return `${baseStyle} bg-black text-white hover:bg-black/80 ${className}`;
-        }
-        if (shouldShowQRCode) {
-            return `${baseStyle} bg-blue-600 text-white hover:bg-blue-700 ${className}`;
-        }
-        return `${baseStyle} bg-gray-400 text-gray-600 cursor-not-allowed ${className}`;
-    };
-    return (_jsxs("div", { className: "w-full", children: [_jsxs("button", { onClick: handleClick, disabled: disabled || processingPayment || (!isApplePayAvailable && !shouldShowQRCode), className: getButtonStyle(), style: { margin: 0 }, children: [getButtonIcon(), children || getButtonText()] }), showQRCode && qrCodeData && (_jsx("div", { className: "mt-4 p-4 bg-white border border-gray-200 rounded-lg shadow-sm", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "Scan QR Code to Pay" }), _jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Use your mobile device to scan this QR code and complete your Apple Pay payment" }), _jsx("div", { className: "flex justify-center", children: _jsx("img", { src: qrCodeData.qrCodeUrl, alt: "Apple Pay QR Code", className: "w-48 h-48 border border-gray-200 rounded" }) }), _jsxs("div", { className: "mt-4 text-xs text-gray-500", children: [_jsxs("p", { children: ["Total: ", total.amount, " ", total.label] }), _jsxs("p", { children: ["Session: ", checkoutSessionId.slice(0, 8), "..."] })] }), _jsx("button", { onClick: () => setShowQRCode(false), className: "mt-3 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 underline", children: "Close QR Code" })] }) })), applePayError && (_jsx("div", { className: "mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600", children: applePayError }))] }));
-};
-export default ApplePayUniversalButton;