@salifbiaye/create-boutique 0.1.4 → 0.1.5

package/docs/guide-complet.en.html

@@ -168,6 +168,7 @@ create-boutique check .                  # a test order in each store: OK / KO</
 <li><b>Sale price (strikethrough)</b>: <span class="menu">Price Lists → Create</span>, type <b>Sale</b>, start and end dates, add the products and the sale price per currency. The site shows the old price struck through and the percentage.</li>
 <li><b>Prices for a group</b> (e.g. VIP customers, resellers): price list of type <b>Override</b> limited to a customer group (B11).</li>
 </ul>
+<div class="box warn">A price list is not limited to one store: the sale price applies in <b>every store</b> that sells the product (in the same currency). To discount a single store whose products are also sold elsewhere, use a promotion with a <b>Sales channel</b> condition (B10).</div>
 
 <h2>B6. Categories and collections</h2>
 <ul>
@@ -204,6 +205,7 @@ create-boutique check .                  # a test order in each store: OK / KO</
 </table>
 <p>An empty field uses the theme text. <b>Reset to theme texts</b> clears your texts (images, logo and dates are kept). Plain text only; images jpg, png or webp, 5 MB max.</p>
 <div class="box info">Not to be confused with Medusa's <span class="menu">Promotions → Campaigns</span>, which groups discount codes with a budget (B10).</div>
+<div class="box warn">Campaign texts and dates only <b>display</b> the offer ("up to −35%", countdown). They apply <b>no discount</b>: create the discount itself in <span class="menu">Promotions</span> (B10) or <span class="menu">Price Lists</span> (B5), with the same dates, and check that the text matches.</div>
 
 <h2>B10. Discount codes and promotions</h2>
 <p><span class="menu">Promotions → Create</span>:</p>
@@ -220,6 +222,15 @@ create-boutique check .                  # a test order in each store: OK / KO</
 <li><b>Limits and dates</b>: attach the promotion to a <b>promotion campaign</b> (start/end dates, budget in number of uses or amount).</li>
 <li>Disable: set the promotion to <b>Draft</b>.</li>
 </ul>
+<h3>Discount on a whole store (e.g. −35% on the New Year store)</h3>
+<ol>
+<li><span class="menu">Promotions → Create</span>, type <b>Automatic</b> (no code) or <b>Code</b>.</li>
+<li>Template <b>Percentage off order</b>, value <b>35</b>.</li>
+<li>Conditions ("who can use it"): <b>Sales channel</b> = the store identifier (first page).</li>
+<li>Attach it to a promotion campaign with a <b>start and end date</b> (the same as the store campaign, B9).</li>
+<li>Check: a product in this store's cart shows the −35% line; in another store, no discount.</li>
+</ol>
+<p>The discount covers every item in the cart (not shipping) and shows <b>in the cart</b>. To show a <b>strikethrough price</b> on product pages, use a "Sale" price list instead (B5). To exclude products: template <b>Percentage off products</b> targeting a category or collection (e.g. "Sale").</p>
 <div class="box warn">An amount discount (e.g. −10) applies in the chosen currency: create one promotion per currency if needed. Test each code in the right store before announcing it.</div>
 
 <h2>B11. Customers and groups</h2>

package/docs/guide-complet.fr.html

@@ -168,6 +168,7 @@ create-boutique check .                  # une commande test dans chaque boutiqu
 <li><b>Prix barré (soldes)</b> : <span class="menu">Listes de prix → Créer</span>, type <b>Soldes (Sale)</b>, dates de début et de fin, ajouter les produits et le prix soldé par devise. Le site affiche l'ancien prix barré et le pourcentage.</li>
 <li><b>Prix réservés à un groupe</b> (ex. clients VIP, revendeurs) : liste de prix de type <b>Remplacement (Override)</b> limitée à un groupe de clients (B11).</li>
 </ul>
+<div class="box warn">Une liste de prix ne se limite pas à une boutique : le prix soldé s'applique dans <b>toutes les boutiques</b> qui vendent le produit (dans la même devise). Pour solder une seule boutique alors que ses produits sont aussi vendus ailleurs, utilisez une promotion avec la condition <b>Canal de vente</b> (B10).</div>
 
 <h2>B6. Catégories et collections</h2>
 <ul>
@@ -204,6 +205,7 @@ create-boutique check .                  # une commande test dans chaque boutiqu
 </table>
 <p>Un champ laissé vide reprend le texte du thème. <b>Réinitialiser aux textes du thème</b> efface vos textes (images, logo et dates sont gardés). Texte simple uniquement ; images jpg, png ou webp, 5 Mo max.</p>
 <div class="box info">Ne pas confondre avec <span class="menu">Promotions → Campagnes</span> de Medusa, qui regroupe des codes promo avec un budget (B10).</div>
+<div class="box warn">Les textes et les dates de campagne ne font qu'<b>afficher</b> l'offre (« jusqu'à −35 % », compte à rebours). Ils n'appliquent <b>aucune remise</b> : créez la remise elle-même dans <span class="menu">Promotions</span> (B10) ou <span class="menu">Listes de prix</span> (B5), avec les mêmes dates, et vérifiez que le texte correspond.</div>
 
 <h2>B10. Codes promo et promotions</h2>
 <p><span class="menu">Promotions → Créer</span> :</p>
@@ -220,6 +222,15 @@ create-boutique check .                  # une commande test dans chaque boutiqu
 <li><b>Limites et dates</b> : rattacher la promotion à une <b>campagne de promotion</b> (dates de début/fin, budget en nombre d'utilisations ou en montant).</li>
 <li>Désactiver : passer la promotion en <b>Brouillon</b>.</li>
 </ul>
+<h3>Remise sur toute une boutique (ex. −35 % sur la boutique Nouvel An)</h3>
+<ol>
+<li><span class="menu">Promotions → Créer</span>, type <b>Automatique</b> (sans code) ou <b>Code</b>.</li>
+<li>Modèle <b>Pourcentage sur la commande</b>, valeur <b>35</b>.</li>
+<li>Conditions (« qui peut l'utiliser ») : <b>Canal de vente</b> = l'identifiant de la boutique (première page).</li>
+<li>Rattacher à une campagne de promotion avec <b>date de début et de fin</b> (les mêmes que la campagne de la boutique, B9).</li>
+<li>Vérifier : un produit au panier de cette boutique affiche la ligne −35 % ; dans une autre boutique, aucune remise.</li>
+</ol>
+<p>La remise porte sur tous les articles du panier (pas sur la livraison) et apparaît <b>dans le panier</b>. Pour afficher un <b>prix barré</b> sur les fiches produits, utilisez plutôt une liste de prix « Soldes » (B5). Pour exclure des produits : modèle <b>Pourcentage sur des produits</b> ciblant une catégorie ou une collection (ex. « Soldes »).</p>
 <div class="box warn">Une remise en montant (ex. −10) s'applique dans la devise choisie : créez une promotion par devise si besoin. Testez chaque code dans la bonne boutique avant de l'annoncer.</div>
 
 <h2>B11. Clients et groupes</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },

package/templates/storefront/locales/en.json

@@ -155,10 +155,15 @@
   "checkout.paymentMethod": "Payment method",
   "checkout.paymentDetails": "Payment details",
   "checkout.giftCard": "Gift card",
+  "checkout.cardAndWallets": "Card, Apple Pay, Google Pay",
+  "checkout.manualPayment": "Manual payment",
   "checkout.continueReview": "Continue to review",
-  "checkout.enterCard": "Enter card details",
+  "checkout.enterCard": "Enter payment details",
   "checkout.anotherStep": "Another step will appear",
-  "checkout.cardDetails": "Enter your card details:",
+  "checkout.cardDetails": "Choose how to pay:",
+  "checkout.card": "Card",
+  "checkout.paymentPending": "Payment is still being processed. Refresh this page in a moment.",
+  "checkout.paymentFailed": "The payment was not completed. Please try again or choose another method.",
   "checkout.selectPayment": "Select a payment method",
   "checkout.placeOrder": "Place order",
   "checkout.review": "Review",

package/templates/storefront/locales/fr.json

@@ -155,10 +155,15 @@
   "checkout.paymentMethod": "Moyen de paiement",
   "checkout.paymentDetails": "Détails du paiement",
   "checkout.giftCard": "Carte cadeau",
+  "checkout.cardAndWallets": "Carte, Apple Pay, Google Pay",
+  "checkout.manualPayment": "Paiement manuel",
   "checkout.continueReview": "Vérifier la commande",
-  "checkout.enterCard": "Saisir les données de carte",
+  "checkout.enterCard": "Saisir le paiement",
   "checkout.anotherStep": "Une étape supplémentaire va s'afficher",
-  "checkout.cardDetails": "Saisissez vos données de carte :",
+  "checkout.cardDetails": "Choisissez votre moyen de paiement :",
+  "checkout.card": "Carte",
+  "checkout.paymentPending": "Le paiement est encore en cours de traitement. Actualisez la page dans un instant.",
+  "checkout.paymentFailed": "Le paiement n’a pas abouti. Réessayez ou choisissez un autre moyen de paiement.",
   "checkout.selectPayment": "Choisissez un moyen de paiement",
   "checkout.placeOrder": "Valider la commande",
   "checkout.review": "Vérification",

package/templates/storefront/src/lib/constants.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { CreditCard } from "@medusajs/icons"
+import { T } from "@lib/boutique/i18n-client"
 
 import Ideal from "@modules/common/icons/ideal"
 import Bancontact from "@modules/common/icons/bancontact"
@@ -8,14 +9,14 @@ import PayPal from "@modules/common/icons/paypal"
 /* Map of payment provider_id to their title and icon. Add in any payment providers you want to use. */
 export const paymentInfoMap: Record<
   string,
-  { title: string; icon: React.JSX.Element }
+  { title: React.ReactNode; icon: React.JSX.Element }
 > = {
   pp_stripe_stripe: {
-    title: "Credit card",
+    title: <T k="checkout.cardAndWallets" />,
     icon: <CreditCard />,
   },
   "pp_medusa-payments_default": {
-    title: "Credit card",
+    title: <T k="checkout.cardAndWallets" />,
     icon: <CreditCard />,
   },
   "pp_stripe-ideal_stripe": {
@@ -31,7 +32,7 @@ export const paymentInfoMap: Record<
     icon: <PayPal />,
   },
   pp_system_default: {
-    title: "Manual Payment",
+    title: <T k="checkout.manualPayment" />,
     icon: <CreditCard />,
   },
   // Add more payment providers here

package/templates/storefront/src/modules/checkout/components/payment/index.tsx

@@ -10,6 +10,7 @@ import { Button, Container, Heading, Text, clx } from "@medusajs/ui"
 import ErrorMessage from "@modules/checkout/components/error-message"
 import PaymentContainer, {
   StripeCardContainer,
+  paymentTypeLabel,
 } from "@modules/checkout/components/payment-container"
 import Divider from "@modules/common/components/divider"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
@@ -232,7 +233,7 @@ const Payment = ({
                   </Container>
                   <Text>
                     {isStripeLike(selectedPaymentMethod) && cardBrand
-                      ? cardBrand
+                      ? paymentTypeLabel(cardBrand)
                       : <T k="checkout.anotherStep" />}
                   </Text>
                 </div>

package/templates/storefront/src/modules/checkout/components/payment-button/index.tsx

@@ -7,7 +7,8 @@ import { placeOrder } from "@lib/data/cart"
 import { HttpTypes } from "@medusajs/types"
 import { Button } from "@medusajs/ui"
 import { useElements, useStripe } from "@stripe/react-stripe-js"
-import React, { useState } from "react"
+import { useSearchParams } from "next/navigation"
+import React, { useEffect, useRef, useState } from "react"
 import ErrorMessage from "../error-message"
 
 type PaymentButtonProps = {
@@ -27,8 +28,15 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
     (cart.shipping_methods?.length ?? 0) < 1
 
   const paymentSession = cart.payment_collection?.payment_sessions?.[0]
+  const redirectStatus = useSearchParams().get("redirect_status")
 
   switch (true) {
+    case isStripeLike(paymentSession?.provider_id) && !!redirectStatus:
+      return (
+        <StripeRedirectReturn status={redirectStatus!}>
+          <Button size="large" disabled><T k="checkout.placeOrder" /></Button>
+        </StripeRedirectReturn>
+      )
     case isStripeLike(paymentSession?.provider_id):
       return (
         <StripePaymentButton
@@ -46,6 +54,32 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
   }
 }
 
+/** Retour d'un moyen de paiement à redirection (Klarna, banque…) : Stripe renvoie sur /checkout?step=review&redirect_status=… */
+const StripeRedirectReturn = ({ status, children }: { status: string; children: React.ReactNode }) => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const started = useRef(false)
+
+  useEffect(() => {
+    if (status !== "succeeded" || started.current) return
+    started.current = true
+    placeOrder().catch((err) => setErrorMessage(err.message))
+  }, [status])
+
+  if (status === "succeeded" && !errorMessage) return <Button size="large" isLoading disabled><T k="checkout.placeOrder" /></Button>
+  return (
+    <>
+      {children}
+      {errorMessage ? (
+        <ErrorMessage error={errorMessage} data-testid="stripe-payment-error-message" />
+      ) : (
+        <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+          <T k={status === "processing" ? "checkout.paymentPending" : "checkout.paymentFailed"} />
+        </p>
+      )}
+    </>
+  )
+}
+
 const StripePaymentButton = ({
   cart,
   notReady,
@@ -70,68 +104,51 @@ const StripePaymentButton = ({
 
   const stripe = useStripe()
   const elements = useElements()
-  const card = elements?.getElement("card")
-
-  const session = cart.payment_collection?.payment_sessions?.find(
-    (s) => s.status === "pending"
-  )
 
   const disabled = !stripe || !elements ? true : false
 
+  // Stripe Payment Element : carte, Apple Pay, Google Pay… Aucune donnée de paiement ne passe par nos serveurs ;
+  // le montant est celui du PaymentIntent créé par Medusa. Pas de redirection sauf moyen qui l'exige.
   const handlePayment = async () => {
     setSubmitting(true)
+    setErrorMessage(null)
 
-    if (!stripe || !elements || !card || !cart) {
+    if (!stripe || !elements || !cart) {
       setSubmitting(false)
       return
     }
 
-    await stripe
-      .confirmCardPayment(session?.data.client_secret as string, {
-        payment_method: {
-          card: card,
+    const address = cart.billing_address
+    const { error, paymentIntent } = await stripe.confirmPayment({
+      elements,
+      redirect: "if_required",
+      confirmParams: {
+        return_url: `${window.location.origin}/checkout?step=review`,
+        payment_method_data: {
           billing_details: {
-            name:
-              cart.billing_address?.first_name +
-              " " +
-              cart.billing_address?.last_name,
+            name: [address?.first_name, address?.last_name].filter(Boolean).join(" ") || undefined,
+            email: cart.email ?? undefined,
+            phone: address?.phone || undefined,
             address: {
-              city: cart.billing_address?.city ?? undefined,
-              country: cart.billing_address?.country_code ?? undefined,
-              line1: cart.billing_address?.address_1 ?? undefined,
-              line2: cart.billing_address?.address_2 ?? undefined,
-              postal_code: cart.billing_address?.postal_code ?? undefined,
-              state: cart.billing_address?.province ?? undefined,
+              city: address?.city ?? undefined,
+              country: address?.country_code ?? undefined,
+              line1: address?.address_1 ?? undefined,
+              line2: address?.address_2 ?? undefined,
+              postal_code: address?.postal_code ?? undefined,
+              state: address?.province ?? undefined,
             },
-            email: cart.email,
-            phone: cart.billing_address?.phone ?? undefined,
           },
         },
-      })
-      .then(({ error, paymentIntent }) => {
-        if (error) {
-          const pi = error.payment_intent
-
-          if (
-            (pi && pi.status === "requires_capture") ||
-            (pi && pi.status === "succeeded")
-          ) {
-            onPaymentCompleted()
-          }
-
-          setErrorMessage(error.message || null)
-          return
-        }
-
-        if (
-          (paymentIntent && paymentIntent.status === "requires_capture") ||
-          paymentIntent.status === "succeeded"
-        ) {
-          return onPaymentCompleted()
-        }
-
-        return
-      })
+      },
+    })
+
+    const intent = paymentIntent ?? (error && "payment_intent" in error ? error.payment_intent : undefined)
+    if (intent && (intent.status === "succeeded" || intent.status === "requires_capture")) {
+      return onPaymentCompleted()
+    }
+
+    setErrorMessage(error?.message ?? null)
+    setSubmitting(false)
   }
 
   return (

package/templates/storefront/src/modules/checkout/components/payment-container/index.tsx

@@ -1,14 +1,13 @@
 import { T } from "@lib/boutique/i18n-client"
 import { Radio as RadioGroupOption } from "@headlessui/react"
 import { Text, clx } from "@medusajs/ui"
-import React, { useContext, useMemo, type JSX } from "react"
+import React, { useContext, type JSX } from "react"
 
 import Radio from "@modules/common/components/radio"
 
 import { isManual } from "@lib/constants"
 import SkeletonCardDetails from "@modules/skeletons/components/skeleton-card-details"
-import { CardElement } from "@stripe/react-stripe-js"
-import { StripeCardElementOptions } from "@stripe/stripe-js"
+import { PaymentElement } from "@stripe/react-stripe-js"
 import PaymentTest from "../payment-test"
 import { StripeContext } from "../payment-wrapper/stripe-wrapper"
 
@@ -16,7 +15,7 @@ type PaymentContainerProps = {
   paymentProviderId: string
   selectedPaymentOptionId: string | null
   disabled?: boolean
-  paymentInfoMap: Record<string, { title: string; icon: JSX.Element }>
+  paymentInfoMap: Record<string, { title: React.ReactNode; icon: JSX.Element }>
   children?: React.ReactNode
 }
 
@@ -66,6 +65,19 @@ const PaymentContainer: React.FC<PaymentContainerProps> = ({
 
 export default PaymentContainer
 
+/** Noms affichés des moyens de paiement Stripe (Payment Element) ; « card » est traduit. */
+const WALLET_NAMES: Record<string, string> = {
+  apple_pay: "Apple Pay",
+  google_pay: "Google Pay",
+  link: "Link",
+  klarna: "Klarna",
+  paypal: "PayPal",
+}
+
+export const paymentTypeLabel = (type: string | null) =>
+  !type ? null : type === "card" ? <T k="checkout.card" /> : WALLET_NAMES[type] ?? type
+
+/** Stripe Payment Element : carte, Apple Pay, Google Pay… selon l'appareil et les moyens activés dans Stripe. */
 export const StripeCardContainer = ({
   paymentProviderId,
   selectedPaymentOptionId,
@@ -75,29 +87,12 @@ export const StripeCardContainer = ({
   setError,
   setCardComplete,
 }: Omit<PaymentContainerProps, "children"> & {
-  setCardBrand: (brand: string) => void
+  setCardBrand: (type: string | null) => void
   setError: (error: string | null) => void
   setCardComplete: (complete: boolean) => void
 }) => {
   const stripeReady = useContext(StripeContext)
 
-  const useOptions: StripeCardElementOptions = useMemo(() => {
-    return {
-      style: {
-        base: {
-          fontFamily: "inherit",
-          color: "#424270",
-          "::placeholder": {
-            color: "rgb(107 114 128)",
-          },
-        },
-      },
-      classes: {
-        base: "pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none focus:outline-none focus:ring-0 focus:shadow-borders-interactive-with-active border-ui-border-base hover:bg-ui-bg-field-hover transition-all duration-300 ease-in-out",
-      },
-    }
-  }, [])
-
   return (
     <PaymentContainer
       paymentProviderId={paymentProviderId}
@@ -108,18 +103,17 @@ export const StripeCardContainer = ({
       {selectedPaymentOptionId === paymentProviderId &&
         (stripeReady ? (
           <div className="my-4 transition-all duration-150 ease-in-out">
-            <Text className="txt-medium-plus text-ui-fg-base mb-1">
+            <Text className="txt-medium-plus text-ui-fg-base mb-3">
               <T k="checkout.cardDetails" />
             </Text>
-            <CardElement
-              options={useOptions as StripeCardElementOptions}
+            <PaymentElement
+              options={{ layout: { type: "tabs", defaultCollapsed: false }, wallets: { applePay: "auto", googlePay: "auto" } }}
               onChange={(e) => {
-                setCardBrand(
-                  e.brand && e.brand.charAt(0).toUpperCase() + e.brand.slice(1)
-                )
-                setError(e.error?.message || null)
+                setCardBrand(e.value?.type ?? null)
+                setError(null)
                 setCardComplete(e.complete)
               }}
+              onLoadError={(e) => setError(e.error?.message ?? null)}
             />
           </div>
         ) : (

package/templates/storefront/src/modules/checkout/components/payment-wrapper/stripe-wrapper.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { Stripe, StripeElementsOptions } from "@stripe/stripe-js"
+import { Appearance, Stripe, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js"
 import { Elements } from "@stripe/react-stripe-js"
 import { HttpTypes } from "@medusajs/types"
-import { createContext } from "react"
+import { createContext, useEffect, useState } from "react"
 
 type StripeWrapperProps = {
   paymentSession: HttpTypes.StorePaymentSession
@@ -14,15 +14,53 @@ type StripeWrapperProps = {
 
 export const StripeContext = createContext(false)
 
+/** Valeur calculée (rgb…) d'une variable CSS du thème : Stripe n'accepte pas var(--x) ni color-mix. */
+function themeColor(name: string): string | undefined {
+  const probe = document.createElement("span")
+  probe.style.color = `var(${name})`
+  document.body.appendChild(probe)
+  const value = getComputedStyle(probe).color
+  probe.remove()
+  return value || undefined
+}
+
+function isDark(rgb?: string): boolean {
+  const [r, g, b] = (rgb?.match(/\d+(\.\d+)?/g) ?? []).map(Number)
+  if ([r, g, b].some((v) => v === undefined)) return false
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128
+}
+
+/** Bloc de paiement Stripe aux couleurs du thème de la boutique (lu dans les variables CSS de data-theme). */
+function themeAppearance(): Appearance {
+  const background = themeColor("--bg")
+  const radius = getComputedStyle(document.documentElement).getPropertyValue("--ub-r-card").trim()
+  return {
+    theme: isDark(background) ? "night" : "stripe",
+    variables: {
+      colorPrimary: themeColor("--primary"),
+      colorBackground: themeColor("--surface") ?? background,
+      colorText: themeColor("--ink"),
+      colorTextSecondary: themeColor("--ink-muted"),
+      colorDanger: "#df1b41",
+      fontFamily: getComputedStyle(document.body).fontFamily,
+      borderRadius: radius && radius.endsWith("px") ? radius : "8px",
+    },
+  }
+}
+
 const StripeWrapper: React.FC<StripeWrapperProps> = ({
   paymentSession,
   stripeKey,
   stripePromise,
   children,
 }) => {
-  const options: StripeElementsOptions = {
-    clientSecret: paymentSession!.data?.client_secret as string | undefined,
-  }
+  // Calculé après montage (document indisponible au rendu serveur) ; Elements applique la mise à jour.
+  const [appearance, setAppearance] = useState<Appearance | undefined>()
+  const [locale, setLocale] = useState<StripeElementLocale>("auto")
+  useEffect(() => {
+    setAppearance(themeAppearance())
+    setLocale((document.documentElement.lang || "auto") as StripeElementLocale)
+  }, [])
 
   if (!stripeKey) {
     throw new Error(
@@ -42,9 +80,16 @@ const StripeWrapper: React.FC<StripeWrapperProps> = ({
     )
   }
 
+  const options: StripeElementsOptions = {
+    clientSecret: paymentSession.data.client_secret as string,
+    appearance,
+    locale,
+  }
+
   return (
     <StripeContext.Provider value={true}>
-      <Elements options={options} stripe={stripePromise}>
+      {/* key : un nouveau PaymentIntent (panier modifié) recrée les Elements */}
+      <Elements key={options.clientSecret} options={options} stripe={stripePromise}>
         {children}
       </Elements>
     </StripeContext.Provider>

package/templates/storefront/src/proxy.ts

@@ -24,12 +24,12 @@ function contentSecurityPolicy(nonce: string) {
 
   return [
     "default-src 'self'",
-    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://js.stripe.com${isDev ? " 'unsafe-eval'" : ""}`,
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://js.stripe.com https://*.js.stripe.com${isDev ? " 'unsafe-eval'" : ""}`,
     "style-src 'self' 'unsafe-inline'",
     `img-src 'self' data: blob: ${files} https://*.stripe.com`,
     "font-src 'self'",
     `connect-src 'self' https://api.stripe.com https://m.stripe.network https://*.stripe.com${isDev ? " ws:" : ""}`,
-    "frame-src https://js.stripe.com https://hooks.stripe.com",
+    "frame-src https://js.stripe.com https://*.js.stripe.com https://hooks.stripe.com",
     "frame-ancestors 'none'",
     "form-action 'self'",
     "base-uri 'self'",
@@ -68,7 +68,7 @@ export function proxy(request: NextRequest) {
   response.headers.set("X-Frame-Options", "DENY")
   response.headers.set("X-Content-Type-Options", "nosniff")
   response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
-  response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=(self \"https://js.stripe.com\")")
+  response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=(self \"https://js.stripe.com\" \"https://*.js.stripe.com\")")
   if (request.headers.get("x-forwarded-proto") === "https" || request.nextUrl.protocol === "https:") {
     response.headers.set("Strict-Transport-Security", "max-age=63072000; includeSubDomains")
   }