Path A

Product purchase — catalogue

The visitor browses the product catalogue, opens a product detail, selects a plan, enters contact details, and is sent to Stripe Checkout.

Status Implemented Last reviewed 2026-08-06 All user flows →

User intent

What the visitor is trying to do

“I want to buy a product, reserve a seat, or pay an invoice — and I need to know exactly what I am paying for before I enter my card details.”

Entry points

Element	Destination
Nav “Ressources”	`/ressources/produits/`
Resources “Explorer les produits”	`/ressources/produits/`
Product category filter chips	`/ressources/produits/<category>/`
Product detail CTA	`/ressources/produits/<category>/<slug>/`

Flow

flowchart LR
      LAND["Landing page"] --> PRODS["/ressources/produits/"]
      PRODS --> CAT["Product category"]
      CAT --> DETAIL["Product detail"]
      DETAIL --> FORM["Checkout form
(plan + identity + consent)"]
      FORM --> POST["POST /paiement/produit/<slug>"]
      POST --> SESSION["Stripe Checkout session"]
      SESSION --> RETURN["/paiement/<ref>/retour/"]
      SESSION --> CANCEL["/paiement/<ref>/annule/"]
      RETURN --> WEBHOOK["Webhook confirms PAID"]
      WEBHOOK --> ENTITLE["Entitlement + delivery link"]

Screen inventory

ID	Screen	User task
P0	Landing	Choose an entry point
P1	Product catalogue	Browse categories and products
P2	Product detail	Review format, price, and pay form
P3	Checkout form	Select plan, enter identity, accept terms
P11	Stripe hosted checkout	Enter card and confirm
P12	Return / cancelled	See confirmation or backing-out notice
P13	Webhook (machine)	Settle payment and grant entitlement
P14	Entitlement / delivery	Download file or see access instructions

Flow scenario

Scenario A1

Buy a framework PDF

Trigger

Visitor clicks “Ressources” in the nav
Opens a product category
Selects a priced framework

Experience

The product detail shows the price and a single checkout form.
The visitor selects the plan (if multiple), enters email, name, organisation, and accepts the CGV.
POST to /paiement/produit/<slug>/ creates a Payment row and redirects to Stripe.
On success, the return page shows the download link; on cancel, the page explains that nothing was charged.
The webhook grants the entitlement and the buyer can re-download from the entitlement page.

Trust and safety rules

The amount charged is always read from a ProductPrice — never from a browser field.
The terms version is frozen at payment creation time; later CGV updates do not retroactively change an open payment.
The return page never declares a payment settled: it shows “confirmation en cours” until the signed webhook arrives.
No card data touches the server. Stripe hosts the checkout page and returns the buyer via HTTPS.
Pending checkouts are throttled per email address to prevent probing.
Payment pages are blocked by robots.txt and carry no editorial SEO value.

Interaction rules

A product with no payable price shows no checkout form; the page keeps its existing CTAs only.
A visitor cannot start a second pending payment from the same email address more than ten times per hour.
Mobile fields use 16 px text to avoid browser zoom; choice targets are at least 44×44 px.
Reduced-motion preferences disable nonessential transitions.

Result states

State	What the visitor sees	What happens next
Pending	Checkout form, “continuer vers le paiement sécurisé”	Redirect to Stripe
Processing	Return page: “confirmation en cours”	Webhook settles the row
Paid	Return page: download links, entitlements, next instalment if any	Buyer downloads or books
Cancelled	“Vous avez annulé le paiement” — nothing was charged	Buyer may restart
Failed	Error message, no charge	Buyer retries or contacts support