Add Express Checkout (Apple Pay, Google Pay, Link) to cart

.env.local.example

@@ -1,3 +1,6 @@
 # Spree API Configuration (server-side only)
 SPREE_API_URL=http://localhost:3000
 SPREE_PUBLISHABLE_KEY=your_publishable_api_key_here
+
+# Stripe Configuration (client-side)
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_key_here

README.md

@@ -137,6 +137,38 @@ npm run dev
 
 Open [http://localhost:3001](http://localhost:3001) in your browser.
 
+### HTTPS Development (Apple Pay / Google Pay)
+
+Apple Pay and Google Pay require HTTPS **and a publicly-reachable URL** — Stripe verifies the payment method domain from the internet, so `localhost` and locally-trusted certificates (e.g. `mkcert` + `lvh.me`) won't pass domain verification. The simplest way to expose your local storefront with a valid public HTTPS URL is [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/):
+
+1. Install `cloudflared`:
+
+```bash
+brew install cloudflared
+```
+
+2. Start the dev server normally (HTTP on port 3001):
+
+```bash
+npm run dev
+```
+
+3. In a second terminal, expose it through a quick tunnel:
+
+```bash
+cloudflared tunnel --url http://localhost:3001
+```
+
+The output will contain a URL like `https://<random-words>.trycloudflare.com`.
+
+4. Register that URL in your [Stripe Payment method domains](https://dashboard.stripe.com/settings/payment_methods/domains).
+
+5. Open the tunnel URL in your browser and test the Express Checkout buttons in the cart.
+
+> **`allowedDevOrigins`:** `next.config.ts` already allows `*.trycloudflare.com`, so quick tunnels work out of the box. Every time you restart `cloudflared tunnel --url ...` you get a new random subdomain — if you need a stable URL (to avoid re-registering in Stripe on each run), set up a [named tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/#using-named-tunnels) on your own domain.
+
+> **Spree backend must also be publicly reachable.** The storefront's server-side fetches go to `SPREE_API_URL`, but image URLs and a few other backend-served paths (e.g. the Apple Pay domain-verification file under `/.well-known/apple-developer-merchantid-domain-association`) are fetched by the browser directly and must resolve from the public internet. Point `SPREE_API_URL` at a hosted Spree (e.g. `*.spree.sh`, `*.vendo.dev`, your own staging) or expose your local Spree with another `cloudflared tunnel --url http://localhost:3000`. When tunneling a local Rails app, allow the tunnel host, e.g. `RAILS_DEVELOPMENT_HOSTS=.trycloudflare.com` in the backend's `.env`.
+
 ### Production Build
 
 ```bash

messages/de.json

@@ -504,5 +504,10 @@
     "privacyPolicy": "Datenschutzrichtlinie",
     "returnsPolicy": "Rückgaberichtlinie",
     "termsOfService": "Nutzungsbedingungen"
+  },
+  "expressCheckout": {
+    "shipping": "Versand",
+    "finalizingPayment": "Zahlung wird abgeschlossen...",
+    "or": "oder"
   }
 }

messages/en.json

@@ -504,5 +504,10 @@
     "privacyPolicy": "Privacy Policy",
     "returnsPolicy": "Returns Policy",
     "termsOfService": "Terms of Service"
+  },
+  "expressCheckout": {
+    "shipping": "Shipping",
+    "finalizingPayment": "Finalizing your payment...",
+    "or": "or"
   }
 }

messages/es.json

@@ -504,5 +504,10 @@
     "privacyPolicy": "Politica de privacidad",
     "returnsPolicy": "Politica de devoluciones",
     "termsOfService": "Terminos de servicio"
+  },
+  "expressCheckout": {
+    "shipping": "Envio",
+    "finalizingPayment": "Finalizando tu pago...",
+    "or": "o"
   }
 }

messages/fr.json

@@ -504,5 +504,10 @@
     "privacyPolicy": "Politique de confidentialite",
     "returnsPolicy": "Politique de retour",
     "termsOfService": "Conditions generales"
+  },
+  "expressCheckout": {
+    "shipping": "Livraison",
+    "finalizingPayment": "Finalisation du paiement...",
+    "or": "ou"
   }
 }

messages/pl.json

@@ -504,5 +504,10 @@
     "privacyPolicy": "Polityka prywatności",
     "returnsPolicy": "Polityka zwrotów",
     "termsOfService": "Regulamin"
+  },
+  "expressCheckout": {
+    "shipping": "Dostawa",
+    "finalizingPayment": "Finalizowanie płatności...",
+    "or": "lub"
   }
 }

next.config.ts

@@ -5,6 +5,7 @@ import createNextIntlPlugin from "next-intl/plugin";
 const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: ["shop.lvh.me", "*.trycloudflare.com"],
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN || "",
   },
@@ -49,6 +50,11 @@ const nextConfig: NextConfig = {
         hostname: "**.spree.sh",
         pathname: "/rails/active_storage/**",
       },
+      {
+        protocol: "https",
+        hostname: "**.trycloudflare.com",
+        pathname: "/rails/active_storage/**",
+      },
     ],
   },
 };