fix(payment): restore wallet order and English labels

src/app/_components/payment/__tests__/stripe-payment-dialog.test.tsx

@@ -63,7 +63,7 @@ describe("StripePaymentDialog", () => {
     document.body.style.overflow = "";
   });
 
-  it("renders Express Checkout first and a collapsed Pay by card section last", () => {
+  it("renders express methods and wallets before card with English Stripe copy", () => {
     act(() =>
       root.render(
         <StripePaymentDialog
@@ -78,19 +78,18 @@ describe("StripePaymentDialog", () => {
     expect(capturedElementsOptions).toMatchObject({
       clientSecret: "pi_123_secret_payment",
       customerSessionClientSecret: "cuss_123_secret_saved",
+      locale: "en",
     });
     expect(capturedExpressProps?.options).toMatchObject({
       paymentMethodOrder: [
-        "apple_pay",
-        "google_pay",
         "link",
         "paypal",
         "amazon_pay",
         "klarna",
       ],
       paymentMethods: {
-        applePay: "always",
+        applePay: "never",
-        googlePay: "always",
+        googlePay: "never",
         link: "auto",
         paypal: "auto",
         amazonPay: "auto",
@@ -99,11 +98,11 @@ describe("StripePaymentDialog", () => {
     });
     expect(capturedPaymentProps?.options).toMatchObject({
       layout: { type: "accordion", defaultCollapsed: true },
-      paymentMethodOrder: ["card"],
+      paymentMethodOrder: ["wechat_pay", "alipay", "card"],
-      wallets: { applePay: "never", googlePay: "never", link: "never" },
+      wallets: { applePay: "auto", googlePay: "auto", link: "never" },
     });
     const text = document.body.textContent ?? "";
-    expect(text).toContain("Pay by card");
+    expect(text).toContain("Choose a payment method");
     const express = document.body.querySelector('[data-testid="express-checkout"]');
     const card = document.body.querySelector('[data-testid="payment-element"]');
     expect(express).not.toBeNull();
@@ -114,6 +113,35 @@ describe("StripePaymentDialog", () => {
     ).toBeTruthy();
   });
 
+  it("keeps Payment Element wallet fallbacks when Express Checkout is unavailable", () => {
+    act(() =>
+      root.render(
+        <StripePaymentDialog
+          clientSecret="pi_123_secret_payment"
+          onClose={vi.fn()}
+        />,
+      ),
+    );
+
+    const onReady = capturedExpressProps?.onReady as
+      | ((event: { availablePaymentMethods: undefined }) => void)
+      | undefined;
+    expect(onReady).toBeTypeOf("function");
+    act(() => onReady?.({ availablePaymentMethods: undefined }));
+
+    const expressSection = document.body.querySelector(
+      '[aria-label="Express payment methods"]',
+    );
+    expect(expressSection).toHaveProperty("hidden", true);
+    expect(
+      document.body.querySelector('[data-testid="payment-element"]'),
+    ).not.toBeNull();
+    expect(capturedPaymentProps?.options).toMatchObject({
+      wallets: { applePay: "auto", googlePay: "auto", link: "never" },
+      paymentMethodOrder: ["wechat_pay", "alipay", "card"],
+    });
+  });
+
   it("does not pass an invalid or disabled Customer Session secret", () => {
     act(() =>
       root.render(

src/app/_components/payment/stripe-payment-dialog.tsx

@@ -124,6 +124,7 @@ export function StripePaymentDialog({
         stripe={stripePromise}
         options={{
           clientSecret,
+          locale: "en",
           ...(savedCardClientSecret
             ? { customerSessionClientSecret: savedCardClientSecret }
             : {}),
@@ -325,16 +326,14 @@ function StripePaymentForm({
         <ExpressCheckoutElement
           options={{
             paymentMethodOrder: [
-              "apple_pay",
-              "google_pay",
               "link",
               "paypal",
               "amazon_pay",
               "klarna",
             ],
             paymentMethods: {
-              applePay: "always",
+              applePay: "never",
-              googlePay: "always",
+              googlePay: "never",
               link: "auto",
               paypal: "auto",
               amazonPay: "auto",
@@ -361,17 +360,20 @@ function StripePaymentForm({
           }
         />
       </section>
-      <section className={styles.cardSection} aria-labelledby="pay-by-card-title">
+      <section
-        <h3 id="pay-by-card-title" className={styles.cardTitle}>
+        className={styles.cardSection}
-          Pay by card
+        aria-labelledby="payment-method-title"
+      >
+        <h3 id="payment-method-title" className={styles.cardTitle}>
+          Choose a payment method
         </h3>
         <PaymentElement
           options={{
             layout: { type: "accordion", defaultCollapsed: true },
-            paymentMethodOrder: ["card"],
+            paymentMethodOrder: ["wechat_pay", "alipay", "card"],
             wallets: {
-              applePay: "never",
+              applePay: "auto",
-              googlePay: "never",
+              googlePay: "auto",
               link: "never",
             },
           }}