← Retour aux paramètres boutique

Kubiq Connect — Guide d'intégration

API REST ou snippet HTML : intégrez boutique, prise de RDV et avis Google sur WordPress, Django, React, etc. Le paiement Stripe reste géré par Kubiq.

Démarrage rapide

Deux parcours selon votre site. Aucune variable d'environnement n'est requise en production.

WordPress / HTML

  1. Paramètres boutique → Kubiq Connect : enregistrez l'URL de production.
  2. Copiez le snippet « Grille produits » dans un bloc HTML personnalisé.
  3. Le script embed.js charge automatiquement vos produits selon le domaine.

API REST / site sur mesure

  1. Enregistrez l'URL de production dans Kubiq Connect.
  2. Appelez GET /api/kubiq-connect/public/by-site?host=… depuis votre serveur (Django, Node, PHP…).
  3. Affichez products[] avec votre UI (templates, React, Vue…). Paiement : POST checkout-mint.

Variables .env (NEXT_PUBLIC_KUBIQ_CONNECT_SHOP_ID) : optionnelles, uniquement pour faciliter le dev local.

Parcours visuel

Deux intégrations. Kohi Store illustre API + React — la même API fonctionne avec Django ou tout autre stack.

WWordPress / HTML

Snippet embed.js — design via CSS .kubiq-connect-*

1

Enregistrer le domaine

Paramètres boutique → Kubiq Connect → URL de production.

2

Coller le snippet

Bloc HTML personnalisé sur votre page boutique.

<div data-kubiq-host="…"> + embed.js
3

Personnaliser le design

CSS de votre thème sur les classes .kubiq-connect-* générées par embed.js.

APIAPI REST — site sur mesure

JSON + votre UI (React, Django templates, Vue, etc.) — pas embed.js

1

Enregistrer le domaine

Paramètres boutique → Kubiq Connect → URL de production. Aucun .env requis en prod.

2

API catalogue (serveur)

Votre serveur appelle Kubiq par domaine et reçoit shop + products en JSON.

3

Votre interface

Grille, fiches produit, boutons — libre choix de stack front ou templates serveur.

React (Kohi Store), Django templates, Vue, PHP…
4

Panier local

Panier côté client (localStorage) ou session serveur — votre logique.

5

Paiement Stripe

POST checkout-mint → redirection Stripe → page de confirmation sur votre domaine.

6

Suivi commandes

Références invité stockées chez vous → API Kubiq pour le suivi.

Exemples de code

Même API REST pour toutes les stacks. Kohi Store est un exemple React ; voici aussi Django.

React / Next.js (Kohi Store)

Python / Django
Personnalisation : votre CSS/composants pour le design ; contenu produit (nom, prix, options) dans Kubiq Shop admin.
  • Grille & cartes : KubiqProductCard.tsx (Tailwind, typo Kohi)
  • Options & ajout panier : KohiProductPurchase.tsx + KohiProductOptions.tsx
  • Contenu produit : géré dans Kubiq Shop (admin) — synchronisé via l'API
Voir la démo live →
Vue d'ensemble
Kubiq Connect sépare le catalogue (votre site) et le paiement (Stripe via Kubiq). Vous contrôlez le design ; Kubiq gère produits, stocks, commandes et Stripe Connect.
  1. Le visiteur parcourt les produits sur votre site (grille, fiches, votre CSS).
  2. Le panier est local sur votre site (localStorage ou votre backend).
  3. Au paiement : POST checkout-mint → redirection directe vers Stripe (pay.kubiq.app).
  4. Après paiement : retour sur votre page de confirmation ; la commande apparaît dans Kubiq.
Configuration
Depuis Paramètres boutique → Kubiq Connect :
  • Enregistrez l'URL de production (domaine public) — obligatoire pour tous les sites.
  • WordPress : snippet HTML. API REST : appelez by-site depuis votre backend.
  • Dev local (optionnel) : URL localhost dans Kubiq, ou bouton « Connecter avec Kubiq » sur le site.
La boutique doit être active et Stripe Connect configuré avant le premier paiement.
WordPress
Collez le snippet dans un bloc HTML personnalisé. Le script embed.js charge la grille selon data-kubiq-host ou data-kubiq-shop.
<div id="kubiq-connect-shop" data-kubiq-host="www.monsite.fr"></div>
<script src="https://kubiq.net/kubiq-connect/embed.js" async></script>
Personnalisez le CSS de votre thème pour cibler .kubiq-connect-* dans embed.js.
Intégration API (agnostique)
Endpoints REST sans authentification (CORS ouvert). Utilisables depuis n'importe quel langage.
GET /api/kubiq-connect/public/by-site?host=...
GET /api/kubiq-connect/public/{pageId}/catalog
POST /api/kubiq-connect/checkout-mint
Flux typique :
  • Catalogue : GET by-site?host= ou GET /{shopId}/catalog
  • Affichage : votre HTML/templates/composants (pas embed.js)
  • Panier : chez vous (session, localStorage, base…)
  • Paiement : POST checkout-mint → checkoutUrl Stripe
API publique
Endpoints sans authentification (CORS ouvert) :
GET /api/kubiq-connect/public/by-site?host=...
GET /api/kubiq-connect/public/{pageId}/catalog
POST /api/kubiq-connect/checkout-mint
checkout-mint exige successUrl et cancelUrl sur un host lié à la boutique. Réponse : checkoutUrl (session Stripe).
Panier & paiement
Flux recommandé :
  1. Stocker les lignes côté client (productId, qty, prix affiché).
  2. Afficher un compteur panier dans le header (événement custom sur mise à jour).
  3. POST checkout-mint avec prefill, successUrl, cancelUrl.
  4. window.location.href = checkoutUrl — le client paie sur Stripe puis revient sur votre site.
Les commandes Firestore ne sont confirmées qu'après paiement Stripe (webhook).
Design libre
Vous gardez la main sur :
  • Grille produits, typographie, animations d'ajout au panier.
  • Mise en page fiche produit (images, description, CTA).
  • Page panier et page de confirmation de commande.
  • Couleurs — les couleurs boutique Kubiq sont optionnelles dans l'API.
Widget prise de RDV
Si la prise de rendez-vous est activée sur la page, collez le snippet « Prise de RDV » (même script embed.js que la boutique). Le widget affiche convives, prochaines disponibilités, horaires, puis le formulaire de réservation.
Site sur mesure : GET /booking (réglages + prochaines dates), GET /slots?date=YYYY-MM-DD, POST /book avec nom, e-mail, créneau. CORS ouvert.
Endpoints RDV
GET /api/kubiq-connect/public/by-site?host=...
GET /api/kubiq-connect/public/{pageId}/catalog
POST /api/kubiq-connect/checkout-mint
Widget avis Google
Les avis Google n’apparaissent que s’ils ont déjà été récupérés et qu’il en reste au moins un (après le filtre de note minimum). Sinon le bloc reste vide — aucun placeholder. Fonctionne aussi pour une page organisation (pas seulement boutique).
API : GET /reviews?minRating=4&limit=8 → { available, reviews, averageRating, totalReviewCount, minRating, mapsUrl }. minRating effectif = max(réglage page Kubiq, query). Les étoiles du bandeau restent la note Google officielle ; les extraits affichés respectent le plancher (ex. 4★). available=false si 0 avis après filtre.
Snippet : data-min-rating="4" (optionnel, ne descend pas sous le réglage page), data-theme="dark" sur fond photo, data-title pour le titre, data-limit pour le nombre de cartes.
Endpoint avis
GET /api/kubiq-connect/public/by-site?host=...
GET /api/kubiq-connect/public/{pageId}/catalog
POST /api/kubiq-connect/checkout-mint