Boutique en ligne hébergée : publier vos produits, encaisser et suivre vos commandes

Une boutique en ligne hébergée vous permet de vendre sans construire de site : chaque produit publié reçoit sa propre page de vente, avec son prix en dirhams et, si vous le souhaitez, son stock ; vous partagez cette page où vous voulez, l'acheteur y commande et paie par carte ou en espèces en agence, et vous suivez chaque commande depuis votre portail, de l'attente de paiement à la livraison. Ce guide montre comment publier un produit depuis le portail ou par l'API, partager sa page, suivre les commandes, être prévenu d'un paiement, synchroniser un catalogue — et à quel moment passer à un outil plus complet.

La boutique en ligne hébergée, en clair

ChariPay est une plateforme de paiement marocaine, un PSP opéré par Chari Money, établissement de paiement agréé par Bank Al-Maghrib. Sa boutique hébergée répond à une situation précise : pas encore de site ? Publiez vos produits sur votre vitrine hébergée et suivez vos commandes — en attente de paiement, payée, expédiée, livrée — depuis votre portail. Par l'API, le module Produits porte le prix, le stock optionnel et la page de vente de chaque produit.

Concrètement, l'outil fait deux choses, et les fait simplement :

• Une page de vente par produit. Elle présente le produit et son prix, et elle se partage comme un lien.
• Un suivi des commandes. Chaque commande passée sur cette page apparaît dans votre portail avec son statut.

Côté paiement, sur la boutique hébergée, l'acheteur choisit à la commande de payer par carte — sur la page de paiement hébergée, avec 3-D Secure — ou en espèces : il reçoit alors une référence à régler dans une agence du réseau Chari. Le paiement par carte se fait sur la même page que le checkout hébergé : vous ne voyez jamais le numéro de carte.

Ce que la boutique hébergée ne fait pas, pour être clair dès le départ : elle ne gère ni la livraison ni les transporteurs, elle ne propose ni panier regroupant plusieurs produits, ni nom de domaine à vous. C'est une vitrine simple, pensée pour quelques références et pour démarrer.

Publier un produit depuis le portail

Depuis le portail, la publication tient en quelques gestes :

1. 1Créez le produit avec son prix en dirhams et, si besoin, son stock. Sans stock indiqué, le produit reste en vente sans limite de quantité.
2. 2Récupérez sa page de vente. C'est l'adresse que vous partagerez, exactement comme vous partageriez un lien de paiement.
3. 3Vérifiez-la en mode test. Ouvrez la page comme le ferait un client, passez une commande fictive par carte, et regardez la commande apparaître dans le portail avec son statut.

Essayez avec un vrai produit de votre catalogue : Commencer en mode test. Trois champs (nom, e-mail professionnel, entreprise), un lien d'activation reçu par e-mail pour choisir votre mot de passe, puis le portail, où vous publiez votre produit et créez, si vous intégrez par l'API, votre clé de test après une ré-authentification. Payez votre commande fictive avec la carte de test 4918 9141 0719 5005, CVV 123, n'importe quelle date d'expiration future, code 3-D Secure 555 : seule cette carte est acceptée, et aucun argent réel ne circule. Le mode test est gratuit, sans limite de durée et sans engagement ; un dépôt d'espèces réel en agence n'y est pas simulé.

Publier par l'API : le module Produits

Si votre catalogue vit déjà dans un outil, ou si vous voulez automatiser, le module « Produits » de la documentation expose six endpoints sur la base unique https://api-psp.charipay.ma :

Créer un produit, en curl :

curl -X POST 'https://api-psp.charipay.ma/v1/products' \
  -H 'X-CHARI-PAY-API-KEY: chari_sk_test_...' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Coffret savon noir 500 g",
    "description": "Savon noir artisanal, coffret cadeau",
    "price": 149.90,
    "stockQuantity": 40,
    "externalId": "sku-savon-noir-500",
    "metadata": { "sku": "SN-500" }
  }'

Seuls name et price sont requis. Le prix est en dirhams, en unités majeures (149.90 = 149,90 MAD) ; stockQuantity est optionnel, et son absence signifie un stock illimité ; description, imageUrl et expiresAt (date de fin de vente, dans le futur) complètent la fiche. La réponse — 201, ou 200 si l'externalId existe déjà — porte la reference du produit (prod_…) et son shopUrl, la page de vente à partager, ainsi que les quantités disponible et réservée. Le metadata, facultatif, est renvoyé tel quel dans les lectures du produit et dans l'événement de paiement des commandes de ce produit.

La clé chari_sk_test_… travaille en sandbox ; la même requête avec une clé de production publie en production. Une clé est un secret : jamais dans le navigateur, une application mobile, un dépôt git ou une capture d'écran.

Partager une page produit avec paiement

Une page produit avec paiement n'a de valeur que si vos clients la voient. Elle se partage partout où vous parlez à vos clients :

• Sur les réseaux sociaux, en lien dans votre profil, une publication ou une story.
• En messagerie, quand un client vous demande un produit précis : la page lui donne le prix, la description et le moyen de payer, sans aller-retour.
• Par e-mail, dans une lettre d'information ou une réponse à une demande.
• Sur un site existant, derrière un bouton « Acheter » : la méthode est détaillée dans bouton de paiement sur un site web.

Le client commande sur la page hébergée, puis paie par carte, avec 3-D Secure, ou choisit les espèces et reçoit une référence à régler en agence. Pour une prestation qui n'est pas un produit de catalogue — un devis, une réparation, un montant qui change à chaque fois —, le bon outil est le lien de paiement : voyez créer un lien de paiement.

Suivre vos commandes et leurs statuts

Chaque commande passée sur une page produit apparaît dans votre portail avec son statut. Voici les quatre étapes de son parcours, et ce qu'elles signifient pour votre travail.

Au statut « payée », l'argent est déjà là : dès qu'un paiement réussit — carte authentifiée par 3-D Secure ou référence réglée en espèces en agence —, le montant est disponible sur votre compte de paiement ChariPay, utilisable tout de suite. « Disponible à l'instant sur le compte » ne veut pas dire « virement bancaire instantané » : le versement vers votre banque reste une opération distincte.

Si un client renvoie un produit payé par carte, remboursez-le depuis le portail ou par l'API, en totalité ou partiellement : le remboursement est gratuit, son montant est déduit de votre solde disponible, et il n'est pas instantané côté banque.

Être prévenu : order.paid et payment.succeeded

Pour réagir automatiquement à une commande payée — décrémenter un stock dans votre outil, prévenir l'atelier, envoyer votre propre confirmation —, déclarez un endpoint de webhooks. Deux événements vous concernent :

• `order.paid` signale qu'une commande de votre boutique est payée.
• `payment.succeeded`, l'événement de paiement qui l'accompagne, porte le metadata de votre produit, renvoyé tel quel. C'est donc dans payment.succeeded, et non dans order.paid, que vous retrouvez vos propres identifiants, comme le sku de l'exemple plus haut.

Trois règles de réception, communes à tous les webhooks : vérifiez la signature (X-CHARI-SIGNATURE, X-CHARI-TIMESTAMP) sur le corps brut ; routez sur l'en-tête Chari-Event-Type ; et dédupliquez sur Chari-Event-Id, pas sur Chari-Webhook-Id — ce dernier identifie la livraison, pas l'événement.

Le webhook ne remplace pas la lecture : relisez les commandes d'un produit par GET /v1/products/{reference}/orders pour un rapprochement ou après une indisponibilité de votre serveur. Pour une commande réglée en espèces en agence, ne bâtissez pas votre traitement sur un événement : suivez le statut de la commande dans le portail, ou relisez-la par l'API.

Synchroniser un catalogue existant par l'API

Votre catalogue vit dans un tableur ou un logiciel de gestion ? Faites-en la source, et laissez la boutique hébergée le refléter.

1. 1Créez chaque produit une fois, par POST /v1/products, avec un externalId par produit — votre référence d'article. Si l'appel est rejoué, après un délai d'attente ou un script relancé, l'API renvoie le produit existant en 200 au lieu d'en créer un second.
2. 2Mettez à jour par `PATCH`, en n'envoyant que ce qui change : un prix, un stock, une description.
3. 3Désactivez au lieu de supprimer : DELETE /v1/products/{reference} désactive le produit, qui ne peut plus être commandé.

Une mise à jour de prix et de stock ressemble à ceci :

curl -X PATCH 'https://api-psp.charipay.ma/v1/products/prod_2Bc9Zt' \
  -H 'X-CHARI-PAY-API-KEY: chari_sk_test_...' \
  -H 'Content-Type: application/json' \
  -d '{
    "price": 159.90,
    "stockQuantity": 25
  }'

Pour lister vos produits, parcourez la liste page par page (page à partir de zéro, size) jusqu'à totalPages. Si vous synchronisez beaucoup de produits d'un coup, respectez les limites de débit : une réponse 429 RATE_LIMITED indique, par l'en-tête Retry-After, quand réessayer. Gardez l'externalId comme pivot entre votre outil et ChariPay : c'est lui qui rend chaque synchronisation rejouable sans doublon.

Quand passer à Shopify, WooCommerce ou à votre propre site

La boutique hébergée est faite pour démarrer et pour les catalogues courts. Certains besoins signalent qu'il est temps de passer à un outil plus complet :

• Un panier de plusieurs produits, parce que vos clients achètent rarement un seul article.
• La livraison intégrée au parcours d'achat, avec calcul des frais selon l'adresse.
• Un design sur mesure, au-delà d'une page de vente par produit.
• Un nom de domaine à vous, et un site qui porte votre marque de bout en bout.

Shopify et WooCommerce répondent à ces besoins, et le paiement suit. Il n'existe pas d'extension ChariPay pour Shopify ni pour WooCommerce : vous envoyez un lien de paiement pour chaque commande, sans une ligne de code, ou vous branchez le checkout hébergé par l'API pour une redirection automatique. Un site sur mesure utilise les sessions de paiement et les webhooks. La vue d'ensemble de ces montages est dans notre page sur le paiement e-commerce au Maroc. Et si vous en êtes au tout début, le parcours complet du débutant est dans lancer sa boutique en ligne au Maroc.

Questions fréquentes

Comment créer une boutique en ligne avec paiement au Maroc sans développeur ?

Avec la boutique hébergée : depuis le portail, vous créez chaque produit avec son prix en dirhams et, si besoin, son stock ; chaque produit reçoit une page de vente que vous partagez sur vos réseaux, en message ou par e-mail. L'acheteur y commande et paie par carte ou en espèces en agence, et vous suivez les commandes dans le portail. Aucune ligne de code n'est nécessaire.

Qu'est-ce qu'une boutique hébergée, concrètement ?

Une vitrine tenue par la plateforme : une page de vente par produit, avec son prix et son stock optionnel, et un suivi des commandes dans votre portail — en attente de paiement, payée, expédiée, livrée. L'acheteur y commande et paie par carte ou en espèces en agence. Vous n'hébergez rien et ne développez rien. En contrepartie, elle reste simple : pas de panier multi-produits, pas de nom de domaine à vous.

Peut-on gérer le stock de ses produits ?

Oui, si vous le souhaitez : le stock est optionnel. Indiquez une quantité en stock à la création du produit, depuis le portail ou par stockQuantity dans l'API ; sans stock indiqué, le produit reste en vente sans limite. Vous mettez la quantité à jour à tout moment, par exemple par PATCH depuis votre logiciel de gestion, et l'API distingue quantité disponible et quantité réservée.

Quels statuts de commande voit-on dans le portail ?

Le suivi reprend le parcours de la commande : en attente de paiement, payée, expédiée, livrée. Le statut « payée » est le signal pour préparer la commande : le montant est alors disponible sur votre compte de paiement. « Expédiée » et « livrée » vous servent à suivre la suite et à répondre aux questions de vos clients sans chercher dans vos messages ou vos tableurs.

La boutique hébergée s'occupe-t-elle de la livraison ?

Non. La boutique hébergée publie vos produits, encaisse les paiements et suit les commandes ; elle ne gère ni la livraison ni les transporteurs. Vous choisissez vous-même qui livre et à quel moment, idéalement après le statut « payée ». Si vous avez besoin d'une livraison intégrée au parcours d'achat, c'est un signal pour passer à Shopify, à WooCommerce ou à un site sur mesure.

Comment être prévenu d'une nouvelle commande payée ?

Dans le portail, chaque commande apparaît avec son statut. Côté serveur, déclarez un endpoint de webhooks : order.paid signale la commande payée, et le payment.succeeded qui l'accompagne porte le metadata de votre produit. Routez sur Chari-Event-Type, dédupliquez sur Chari-Event-Id, et relisez au besoin les commandes par GET /v1/products/{reference}/orders, notamment après une indisponibilité de votre serveur.

Peut-on importer un catalogue existant ?

Oui, par l'API : créez chaque produit par POST /v1/products avec un externalId égal à votre référence d'article, puis mettez-le à jour par PATCH. Si une création est rejouée, l'API renvoie le produit existant en 200 au lieu de le dupliquer : chaque synchronisation reste ainsi rejouable sans doublon. Désactivez par DELETE les produits retirés : ils ne peuvent plus être commandés.

Quand faut-il passer à Shopify ou à WooCommerce ?

Quand vos besoins dépassent une page de vente par produit : un panier regroupant plusieurs articles, une livraison intégrée au parcours d'achat, un design sur mesure ou un nom de domaine à vous. Le paiement suit sans extension : un lien de paiement par commande, sans code, ou le checkout hébergé branché par l'API pour une redirection automatique.

Prochaine étape

Publiez deux ou trois produits en mode test, partagez une page avec vous-même et suivez une commande fictive jusqu'au statut « payée » : Commencer en mode test. Préparez ensuite le passage en production, puis, si votre catalogue vit ailleurs, branchez la synchronisation avec le module « Produits » de la documentation.