合并dev-testapplepay

src/app/(checkout)/checkout/_components/CheckoutWrapper.tsx

@@ -221,6 +221,7 @@ export default function CheckoutWrapper({
     cartDetailData: CartDetail;
 }) {
 
+    const erudaCount = useRef(0);
     const {loadSdk} = usePaymentSDKContext();
 
     const { createOrder } = usePlaceOrder(); 
@@ -543,6 +544,12 @@ export default function CheckoutWrapper({
     //         normalizePhoneForForm(item[1], item[0]);
     //     });
     // }
+    const testEruda = () => {
+        erudaCount.current++
+        if(window.eruda && erudaCount.current > 10) {
+            window.eruda.init();
+        }
+    };
     return (
         <section className="w-full">
             <div>
@@ -595,7 +602,7 @@ export default function CheckoutWrapper({
                     />
             </div>
             <div className="mt-6 box-border px-4">
-                <h3 className="text-ly-24 font-medium">Shipping Method</h3>
+                <h3 className="text-ly-24 font-medium" onClick={testEruda}>Shipping Method</h3>
                 {shippingMethodLoading ?
                 
                     <CheckoutShippingMethodLoading /> 

src/app/(checkout)/checkout/_components/PaymentButton/PaypalApplepayButton.tsx

@@ -47,14 +47,17 @@ export default function PaypalApplepayButton({
     // const [configCountryCode, setConfigCountryCode] = useState('');
 
     // paypal sdk 是否加载完成
-    const { loadingStatus, isHydrated } = usePayPal();
+    const { 
+        loadingStatus, 
+        isHydrated 
+    } = usePayPal();
     // Fetch eligibility（资格） for one-time payment flow
 
 
     const {
         error: eligibilityError,
         eligiblePaymentMethods,
-        isLoading: isEligibilityLoading,
+        // isLoading: isEligibilityLoading,
     } = useEligibleMethods({
         payload: {
             currencyCode: currencyCode, // 需要根据用户选择的货币走
@@ -62,8 +65,9 @@ export default function PaypalApplepayButton({
         },
     });
     const isLoading = loadingStatus === INSTANCE_LOADING_STATE.PENDING;
-    const isApplepayEligible =  eligiblePaymentMethods?.isEligible("applepay");
-    const applePayConfig = eligiblePaymentMethods?.getDetails("applepay");
+    // const isApplepayEligible = eligiblePaymentMethods?.isEligible("applepay");
+    // const applePayConfig = eligiblePaymentMethods?.getDetails("applepay");
+    const applePayConfig = eligiblePaymentMethods?.isEligible("applepay") ? eligiblePaymentMethods.getDetails("applepay").config : null;
 
     
 
@@ -209,7 +213,7 @@ export default function PaypalApplepayButton({
             postalCode:shippingContact.postcode,
         }
     }
-    console.log('applePayConfig ---- ', applePayConfig?.config);
+    console.log('applePayConfig ---- ', applePayConfig);
     /*
     useEffect(() => { 
         if(!sdkInstance || !isHydrated) return;
@@ -223,24 +227,32 @@ export default function PaypalApplepayButton({
         getConfig();
     }, [isHydrated, sdkInstance]);
     */
-   const merchantCountry = applePayConfig?.config.merchantCountry;
+//    const merchantCountry = applePayConfig?.merchantCountry;
 
-    if(!isApplepayEligible) { 
-        return <p className="text-ly-12 text-ly-errorcolor text-center">Applepay is not available on your device.</p>;
-    }
-    
-    return (
-        <div className="box-border w-full">
-            {isLoading || !isHydrated || isEligibilityLoading || applePayConfig === undefined ?
-                <p className="text-ly-12 text-center">Applepay is loading...</p>
-            :
+    const tips = isLoading || !isHydrated  ? (
+            <p className="text-ly-12 text-center">
+                Applepay is loading1...
+                {String(isLoading)}
+
+                /{String(isHydrated)}
+            </p>
+        ) : eligibilityError ? (
+            <p className="text-ly-errorcolor text-ly-12 text-center">
+                {eligibilityError.message}
+                {/* Failed to load payment options. Please refresh the page. */}
+            </p>
+        ) : !eligiblePaymentMethods ? (
+           <p className="text-ly-12 text-center">Applepay is loading2...</p>
+        ) : !eligiblePaymentMethods.isEligible("applepay") ? (
+            <p className="text-ly-12 text-ly-errorcolor text-center">Apple Pay is not eligible for this transaction.</p>
+        ) : applePayConfig ? (
+            
                 <ApplePayButtonBox 
                     onClickHandler={validateCheckout}
-                    eligibilityError={eligibilityError}
-                    applePayConfig={applePayConfig.config}
+                    applePayConfig={applePayConfig}
                     applePaySessionVersion={4}
                     paymentRequest={{
-                        countryCode: merchantCountry === 'C2' ? 'CN' : merchantCountry as string,
+                        countryCode: applePayConfig.merchantCountry === 'C2' ? 'CN' : applePayConfig.merchantCountry as string,
                         currencyCode: currencyCode,
                         requiredBillingContactFields: ["postalAddress"],
                         requiredShippingContactFields: ["name", "email", "postalAddress"],
@@ -256,18 +268,21 @@ export default function PaypalApplepayButton({
                     onCancel={onCancel}
                     onError={onError}
                 />
-            } 
-        </div>
+            
+        )  : (
+            <p className="text-ly-12 text-center">Loading Apple Pay configuration...</p>
+        );
+    
+    return (
+        <div className="box-border w-full"> {tips} </div>
     );
 }
 
 // ApplePayButtonBox是 @paypal/react-paypal-js/sdk-v6 中的<ApplePayOneTimePaymentButton>组件的代码复制过来的
 function ApplePayButtonBox({
-    eligibilityError,
     onClickHandler, // 点击苹果支付按钮
     ...hookProps
 }: {
-    eligibilityError: Error | null;
     onClickHandler: () => Promise<boolean>;
 } & UseApplePayOneTimePaymentSessionProps
 ) {
@@ -330,8 +345,7 @@ function ApplePayButtonBox({
                 buttonstyle="black"
                 type="pay"
                 locale="en"
-            />
-            { eligibilityError && <p className="text-ly-errorcolor text-ly-12 text-center">{eligibilityError.message}</p> }
+            /> 
         </>
     );
 };

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import localFont from "next/font/local";
 import { cookies } from "next/headers";
+import Script from "next/script";
 import "./globals.css";
 import { GlobalProviders,ReduxProvider,PayPalWrapper,ConfigProvider } from "@/providers";
 import { generateMetadataForPage } from "@utils/helper";
@@ -114,6 +115,7 @@ export default async function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
+        <Script src="https://cdn.jsdelivr.net/npm/eruda" strategy="beforeInteractive" />
       </head>
       <body className={clsx(
         "min-h-screen font-outfit text-foreground bg-background antialiased",

src/types/eruda.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    eruda: any;          // 添加普通属性
+  }
+}
+
+export {}; // 确保此文件被当作模块，避免全局污染