# Relier un site existant à la boutique Ondes PRO

> Affichez le catalogue Ondes PRO sur votre site existant et encaissez par Stripe, quelle que soit sa technologie : CORS, panier, paiement, webhook et agent IA.

Mis à jour le 2026-10-21 · L’équipe Ondes PRO · https://ondes.pro/fr/integrations/mcp/guides/relier-son-site

Votre site tourne déjà — en Next.js, Astro, WordPress, Symfony ou en HTML pur — et vous voulez y vendre sans migrer vers un constructeur de site. Ce guide montre comment **afficher le catalogue Ondes PRO**, gérer le **panier** et **encaisser par Stripe** depuis vos propres pages, avec deux variantes : tout dans le navigateur, ou côté serveur avec l’**API REST**. Ondes PRO garde la main sur les prix, le stock et les commandes.

## Navigateur ou serveur : quelle API de boutique utiliser ?

Ondes PRO expose deux portes, qui ne se mélangent pas. La **boutique publique** (`/shop/api/…`) est anonyme et pensée pour être appelée en `fetch()` depuis le navigateur d’un visiteur : catalogue, panier, paiement. L’**API REST v1** (`/api/v1/…`) exige une clé et se réserve au code qui tourne chez vous, côté serveur.

La règle qui en découle est simple : **une clé API ne quitte jamais votre serveur**. Un site statique ou une application monopage utilise la boutique publique ; un site rendu côté serveur peut préférer l’API v1, qui offre l’idempotence et le mode test. Les deux aboutissent au même endroit : une commande dans **Boutique & Commandes**, payée sur le compte Stripe de votre société.

## Afficher le catalogue et encaisser depuis votre site, étape par étape

Cette variante fonctionne avec n’importe quelle technologie, puisque tout se passe dans le navigateur. Remplacez le sous-domaine en haut de page pour adapter les adresses.

1. **Déclarez l’origine de votre site** — Dans **API & Développeurs → Origines autorisées** (ou, dans **Configuration**, la section « Laisser un site web interroger cet espace »), ajoutez l’adresse exacte de votre site (`https://www.atelier-lumen.fr`, sans chemin). Sans cette déclaration, le navigateur bloque les réponses de votre espace et rien ne s’affiche — ce n’est pas une panne de l’API, c’est la protection CORS. Le réglage est réservé au superutilisateur.
2. **Connectez votre compte Stripe** — Toujours dans **Configuration**, cliquez sur « Connecter mon compte Stripe ». Le paiement arrive directement sur votre compte, par Stripe Connect. Une filiale sans compte propre encaisse sur celui de la société mère.
3. **Chargez le catalogue** — Un appel anonyme renvoie les produits publiés, groupés par catégorie. La réponse est mise en cache côté Ondes PRO : appelez-la à chaque affichage sans scrupule.

```javascript
const reponse = await fetch('https://votre-espace.ondes.pro/shop/api/products/');
const catalogue = await reponse.json();
// Affichez nom, prix et image de chaque produit dans vos propres gabarits.
```
4. **Créez le panier et ajoutez des articles** — Un premier `GET /shop/api/cart/` sans paramètre crée un panier et renvoie son `cart_token` : conservez-le dans le `localStorage`. Chaque ajout ou changement de quantité passe par `POST /shop/api/cart/update/?cart_token=…`.

```javascript
await fetch('https://votre-espace.ondes.pro/shop/api/cart/update/?cart_token=' + cartToken, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ action: 'set', product_id: 12, quantity: 2 }),
});
```
5. **Préparez le paiement** — `POST /shop/api/payment-intent/` avec le `cart_token` et les coordonnées du client renvoie un `client_secret`. Le montant est recalculé par Ondes PRO à partir du panier : un prix modifié dans le navigateur ne change rien. Un panier qui mélange les produits de deux sociétés est refusé (400), car un encaissement ne se partage pas entre deux comptes.
6. **Confirmez avec Stripe.js** — Chargez Stripe.js par la balise `<script src="https://js.stripe.com/v3/">` et confirmez le paiement avec le `client_secret`. La clé publiable de votre compte se lit une fois côté serveur (voir plus bas) ; elle est publique par construction et peut figurer dans la page.
7. **Recevez la confirmation par webhook** — Déclarez l’adresse de votre serveur dans **API & Développeurs**, onglet **Mode test**, section webhooks : l’événement `commande.payee` y arrive, signé par l’en-tête `Ondes-Signature`. Les endpoints de test et de production sont distincts, et chacun s’active séparément.

## Le paiement côté navigateur, en entier

Un exemple minimal avec le Payment Element de Stripe. La clé publiable (`pk_…`) est celle de votre compte connecté.

```javascript
const stripe = Stripe('pk_live_…');

const reponse = await fetch('https://votre-espace.ondes.pro/shop/api/payment-intent/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    cart_token: cartToken,
    email: 'contact@maison-verdier.fr',
    first_name: 'Claire',
    last_name: 'Verdier',
  }),
});
const { client_secret } = await reponse.json();

const elements = stripe.elements({ clientSecret: client_secret });
elements.create('payment').mount('#paiement');

document.querySelector('#payer').addEventListener('click', async () => {
  await stripe.confirmPayment({
    elements,
    confirmParams: { return_url: 'https://www.atelier-lumen.fr/merci' },
  });
});
```

Le montant ne transite jamais par le navigateur : il est calculé par Ondes PRO à partir du panier.

## Variante côté serveur : créer la commande avec l’API REST

Si votre site a un serveur (Next.js, Laravel, Django, Rails…), la ressource `shop/commandes` de l’API v1 crée en un appel la commande **et** son paiement : la réponse contient déjà `paiement.client_secret`, à transmettre à Stripe.js. Ce secret n’est renvoyé qu’à la création, jamais relu ensuite. Une clé portant `shop:write` suffit.

Deux protections rendent cette voie confortable. L’en-tête `Idempotency-Key` garantit qu’un réessai après une coupure réseau ne crée pas une seconde commande — donc ne débite pas deux fois. Et le jumeau `/api/v1/test/shop/commandes/` crée une commande de test, invisible des chiffres d’affaires, avec une page de paiement simulée renvoyée dans `paiement.checkout_url`.

## Créer une commande de test depuis votre serveur

```bash
curl -X POST https://votre-espace.ondes.pro/api/v1/test/shop/commandes/ \
  -H "Authorization: ApiKey opk_…" \
  -H "Idempotency-Key: panier-7f3c2a91" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [{"product": 12, "quantity": 2}],
    "email": "contact@maison-verdier.fr",
    "first_name": "Claire",
    "last_name": "Verdier",
    "return_url": "/merci"
  }'
```

Retirez `/test` pour la production. `GET /api/v1/shop/commandes/configuration-paiement/` indique le compte Stripe applicable et sa `publishable_key`.

## « Relier mon site » : un agent qui fait l’intégration dans votre dépôt GitHub

Vous préférez déléguer ? Dans **Boutique & Commandes**, l’onglet **Mon site** relie le dépôt de votre site, sur GitHub ou dans Ondes GIT. Un agent IA lit votre code, **pose ses questions avant d’écrire** (où placer la grille de produits, quelle page de remerciement), puis propose un diff à relire. Rien n’est validé ni envoyé sur votre dépôt sans votre décision, et l’agent ne force jamais un envoi : en cas de conflit, il crée une branche.

L’agent travaille avec un contrat dérivé des routes réelles de votre espace, de vos produits et de votre configuration Stripe et CORS : il ne peut pas inventer un endpoint qui répondrait 404 chez vos clients. Il n’exécute aucune commande et n’ajoute aucune dépendance — Stripe.js arrive par une simple balise `<script>`. La connexion GitHub passe par OAuth, et le jeton n’est jamais écrit dans la configuration git du dépôt. Plus de détails sur la page [GitHub](https://ondes.pro/fr/integrations/github).

## Avec votre assistant de code connecté par MCP

_Exemple de conversation · données de démonstration (Atelier Lumen)_

> **Vous** : Sur notre site Astro, génère au build une page par produit de la catégorie Suspensions, avec le prix barré quand il existe.
>
> 🔧 `ondes_ressource` Fiche `shop/produits` : champs `name`, `price`, `compare_at_price`, `sku`, filtre par catégorie, pagination.
>
> 🔧 `ondes_appeler` `GET shop/produits?page_size=50` — 9 produits, dont la Suspension Pétrole (189 €) et la Suspension Laiton (245 €, barré 290 €).
>
> **Assistant** : J’ajoute `src/pages/suspensions/[sku].astro` : l’appel à l’API se fait au build avec la clé lue dans `ONDES_API_KEY`, jamais exposée au navigateur. Le prix barré s’affiche quand `compare_at_price` est renseigné. Le bouton « Ajouter au panier » appelle la boutique publique, qui n’a pas besoin de clé.

> **Si votre site envoie lui-même la confirmation de commande** — Cochez « Mon site envoie lui-même l’e-mail de confirmation des commandes payées » (onglet **Mode test** d’API & Développeurs) : sinon votre client recevra deux e-mails, le vôtre et celui d’Ondes PRO. L’option ne vaut que si votre webhook de production est configuré — sans destinataire, Ondes PRO reprend l’envoi, car un client sans confirmation est pire qu’un doublon.

## Pour aller plus loin

- [Stripe](https://ondes.pro/fr/integrations/stripe) — Encaissez les commandes de votre boutique sur votre propre compte Stripe, société par société.
- [GitHub](https://ondes.pro/fr/integrations/github) — Publiez un site statique depuis un dépôt GitHub, ou faites intégrer la boutique à votre site existant.
- [Boutique en ligne](https://ondes.pro/fr/integrations/mcp/modules/boutique-en-ligne) — Commandes, catalogue, codes promo et expéditions pilotés par votre assistant, en mode test par défaut.
- [API REST v1](https://ondes.pro/fr/integrations/api-rest) — Environ 135 ressources REST, des clés à portées, un schéma OpenAPI et des webhooks signés.

## Questions fréquentes

### Faut-il reconstruire mon site pour vendre avec Ondes PRO ?

Non. Votre site garde sa technologie et son design ; il appelle la boutique publique d’Ondes PRO pour le catalogue, le panier et le paiement. Ondes PRO gère les prix, le stock et les commandes, que vous retrouvez dans Boutique & Commandes.

### Pourquoi mon site affiche-t-il une erreur CORS ?

Parce que son origine n’est pas déclarée. Ajoutez l’adresse exacte du site (schéma et domaine, sans chemin) dans **API & Développeurs → Origines autorisées**. Le réglage est réservé au superutilisateur de l’espace.

### Puis-je mettre ma clé API dans le JavaScript du site ?

Non, jamais. Une clé API s’utilise uniquement côté serveur. Le navigateur passe par la boutique publique `/shop/api/`, qui n’exige aucune clé et recalcule les montants elle-même.

### Sur quel compte Stripe arrive l’argent ?

Sur le compte Stripe connecté de la société qui vend les produits du panier, ou sur celui de la société mère si la filiale n’en a pas connecté. La ressource `shop/commandes/configuration-paiement/` indique le compte applicable.

### Comment tester le paiement sans encaisser ?

Côté serveur, appelez `/api/v1/test/shop/commandes/` : la commande est marquée test, n’entre dans aucun chiffre et renvoie une page de paiement simulée. Les webhooks de test et de production sont configurés séparément.

### L’agent « Relier mon site » peut-il modifier mon site sans mon accord ?

Non. Il travaille sur une copie, pose ses questions, puis présente un diff. Valider et envoyer sur votre dépôt restent deux décisions explicites de votre part, et il ne force jamais l’envoi.