Relier un site existant à la boutique Ondes PRO

Navigateur ou serveur : quelle API de boutique utiliser ?

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. 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. 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. 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.

   javascriptCopier

   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. 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=….

   javascriptCopier

   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. 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. 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. 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é.

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

Créer une commande de test depuis votre serveur

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

Avec votre assistant de code connecté par MCP

Si vous codez l’intégration vous-même, connectez votre assistant au serveur MCP de l’espace : il lit la fiche exacte des ressources au lieu de deviner les champs.

Pour aller plus loin

• StripeEncaissez les commandes de votre boutique sur votre propre compte Stripe, société par société.Lire
• GitHubPubliez un site statique depuis un dépôt GitHub, ou faites intégrer la boutique à votre site existant.Lire
• Boutique en ligneCommandes, catalogue, codes promo et expéditions pilotés par votre assistant, en mode test par défaut.Lire
• API REST v1Environ 135 ressources REST, des clés à portées, un schéma OpenAPI et des webhooks signés.Lire

Questions fréquentes

À lire aussi

• Construire une intégrationClés à portées, webhooks signés, idempotence et mode test pour un back-office qui ne crée jamais de doublon.Lire
• Migrer vers Ondes PROReprendre catalogue, clients et pièces de facturation par lots vérifiés, l’IA faisant la correspondance des colonnes.Lire
• Automatiser avec l’IARelances, rapports et automatisations décrits en une phrase, toujours relus avant d’agir.Lire