Bouton de paiement sur un site web : quatre façons d'encaisser sans boutique en ligne

Un bouton de paiement sur un site web n'exige pas de boutique en ligne : c'est un simple lien vers une page de paiement hébergée par ChariPay, que vous posez sur n'importe quelle page — site WordPress sans WooCommerce, site fait avec un constructeur, page d'atterrissage. Quatre options existent selon votre besoin : un bouton vers un lien de paiement réutilisable, à prix fixe, créé par l'API ; un formulaire, puis votre serveur crée un lien ou une session au bon montant ; une page produit hébergée, sans développeur ; ou, si le site devient une vraie boutique, WooCommerce ou Shopify. Ce guide les détaille, puis dit quoi écrire autour du bouton et comment savoir qui a payé.

Un bouton de paiement sur un site web, sans boutique : le principe

ChariPay est une plateforme de paiement marocaine, un PSP opéré par Chari Money, établissement de paiement agréé par Bank Al-Maghrib. Le principe d'un bouton de paiement avec ChariPay est volontairement simple : le bouton n'est qu'un lien. Quand le visiteur clique, il quitte votre page pour une page de paiement hébergée par ChariPay, y saisit sa carte, confirme avec 3-D Secure auprès de sa banque, et le montant arrive sur votre compte de paiement.

Conséquence pratique : le bouton se pose sur tout site qui accepte un lien. Un site vitrine sous WordPress sans WooCommerce, une page faite avec un constructeur de sites, une page d'atterrissage pour une campagne, un mini-site d'événement : il suffit de pouvoir créer un bouton et de lui donner une adresse. Vous n'avez rien à installer et aucun code à copier dans la page ; les fonctions de paiement propres à chaque constructeur de sites ne sont pas le sujet ici.

Ce qui change d'une option à l'autre, c'est la façon dont l'adresse derrière le bouton est créée : une fois pour toutes, ou à chaque visiteur.

Option 1 : un bouton vers un lien de paiement réutilisable

C'est l'option du prix fixe, avec un seul appel à l'API, fait une fois pour toutes. Un lien de paiement, c'est un montant et une description ; le client paie sur une page hébergée par ChariPay. Il est à usage unique ou réutilisable, avec une expiration au choix — 24 heures, 7 jours, 30 jours, jamais, ou une date précise — et un statut clair : actif, payé, annulé, expiré. Pour un bouton, il faut le lien réutilisable : la même adresse sert à tous les visiteurs, au même prix. Depuis le portail, chaque lien de paiement créé est à usage unique. Le lien réutilisable — un même montant payé par plusieurs clients — se crée par l'API, avec singleUse: false ; une fois créé, il apparaît dans le portail comme les autres. La page de paiement se personnalise depuis les paramètres du compte, avec votre nom et votre logo.

1. 1Créez le lien une fois, par l'API : POST /v1/payment-links avec singleUse: false, un montant fixe, une description claire (« Consultation de 45 minutes », « Adhésion annuelle ») et, si l'offre a une fin, une date d'expiration (expiresAt) ; l'appel complet, en version à usage unique, est montré à l'option 2.
2. 2Copiez son adresse : le payUrl renvoyé à la création.
3. 3Collez-la comme cible du bouton dans l'éditeur de votre site, et donnez au bouton un libellé explicite.
4. 4Testez : cliquez sur le bouton, vérifiez la page qui s'ouvre, le montant et la description.

Les cas types : un prix unique (une consultation, un atelier, un droit d'entrée), une adhésion à montant fixe, une séance de coaching. Un coach sportif à Tanger peut ainsi placer « Réserver et payer ma séance » sous sa grille de tarifs. Une règle à retenir : un lien réutilisable n'encaisse que la carte ; les espèces passent par un lien à usage unique, une référence par dépôt. Sans développeur, pour vendre plusieurs fois au même prix, publiez un produit sur votre boutique hébergée et partagez son lien : c'est l'option 3.

L'offre complète est sur la page liens de paiement, et chaque champ du lien est détaillé dans le guide pour créer un lien de paiement.

Essayez tout de suite, sur une page de préproduction : 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 créez vous-même votre clé de test après une ré-authentification ; avec elle, vous créez un lien réutilisable de test, le posez derrière un bouton et le réglez avec la carte de test. C'est gratuit, sans limite de durée et sans validation à attendre : la vérification de votre entreprise (KYB) ne conditionne que le passage en production.

Option 2 : un formulaire, et votre serveur crée le lien ou la session

Quand le montant ou le client change à chaque fois — un devis, une réservation à options, une commande sur mesure —, un lien fixe ne suffit plus. Le bouton déclenche alors un petit formulaire, qui envoie la demande à votre serveur ; c'est votre serveur qui crée le paiement au bon montant, puis redirige le visiteur vers la page hébergée.

Votre serveur a deux possibilités. La première est un lien à usage unique. Un appel suffit : POST /v1/payment-links renvoie le payUrl à partager.

curl -X POST 'https://api-psp.charipay.ma/v1/payment-links' \
  -H 'X-CHARI-PAY-API-KEY: chari_sk_test_...' \
  -H 'Content-Type: application/json' \
  -H 'Idempotency-Key: order-1042-link' \
  -d '{
    "amount": 149.90,
    "description": "Commande #1042",
    "singleUse": true,
    "externalId": "order-1042",
    "customerEmail": "amine.bennani@example.com",
    "customerPhone": "+212600000000",
    "metadata": { "cartId": "c_987" }
  }'

La réponse (201, ou 200 au rejeu sur externalId) contient la reference du lien (pl_…) et son payUrl, vers lequel votre serveur redirige le visiteur. Sur la page d'un lien à usage unique, votre client peut choisir la carte ou les espèces en agence.

La seconde possibilité est une session de paiement : vous créez la session côté serveur, vous redirigez l'acheteur vers le checkout hébergé — carte avec 3-D Secure —, et vous recevez le résultat par webhook signé. Concrètement, votre serveur redirige le visiteur vers le checkoutUrl renvoyé à la création de la session. Une session n'encaisse que la carte.

Dans les deux cas, la clé d'API reste sur le serveur, jamais dans le code de la page : un bouton qui appellerait l'API depuis le navigateur exposerait votre clé à tous les visiteurs. Pour choisir entre les deux, lisez lien de paiement ou checkout.

Option 3 : une page produit hébergée

C'est la voie sans développeur pour un prix fixe, et un entre-deux si vous vendez quelques produits. 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. Chaque produit a son prix, son stock optionnel et sa page de vente ; votre bouton pointe simplement vers cette page, et c'est elle qui encaisse. 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.

L'avantage sur l'option 1 tient au suivi : chaque achat devient une commande, que vous suivez dans le portail jusqu'à la livraison, et chaque produit peut porter un stock. Une créatrice de céramiques à Safi peut ainsi pointer chaque bouton « Acheter » de son site vitrine vers la page hébergée de la pièce correspondante. Le pas-à-pas est dans le guide de la boutique hébergée.

Option 4 : passer à WooCommerce ou à Shopify

Il arrive un moment où le site vitrine devient une boutique : un catalogue qui grandit, un panier, des frais de livraison. Ce n'est plus un bouton qu'il vous faut, mais une plateforme de commerce. 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.

Si votre site tourne déjà sous WordPress, le guide pour encaisser sur WooCommerce au Maroc détaille les deux montages. Sous Shopify, voyez encaisser sur Shopify au Maroc. Dans tous les cas, la page de paiement reste le checkout hébergé de ChariPay.

Choisir son option : le tableau

Une lecture rapide : pour un prix fixe, l'option 1 si un développeur peut créer le lien une fois par l'API, l'option 3 sinon ; passez à l'option 2 dès que le montant dépend du client ; l'option 3 convient aussi si vous vendez des objets avec un stock ; envisagez l'option 4 quand un panier devient indispensable.

Ce qu'il faut écrire sur et autour du bouton

Un bouton qui convertit dit exactement ce qui va se passer. Trois règles simples :

• Un libellé explicite : « Payer » suivi de ce qui est acheté et du montant en dirhams — « Payer ma séance — 149,90 MAD » plutôt que « Valider ».
• Une description identique entre votre page et le lien : le client doit retrouver sur la page de paiement les mots qu'il vient de lire.
• Une phrase sur la suite : « Vous allez être redirigé vers une page de paiement hébergée par ChariPay, à notre nom ; vous confirmerez avec votre banque. »

Ajoutez une ligne qui dit qui opère le paiement, par exemple : « Paiement traité par ChariPay, un PSP opéré par Chari Money, établissement de paiement agréé par Bank Al-Maghrib. » La confiance de l'acheteur au moment de payer est un sujet en soi, traité dans paiement en ligne sécurisé.

Savoir qui a payé : le portail ou un webhook

Sans développeur, tout se suit dans le portail : vous êtes notifié à chaque encaissement, et chaque lien affiche son statut — actif, payé, annulé, expiré. Pour un lien réutilisable, l'API renvoie en plus, par GET /v1/payment-links/{reference}, le nombre de paiements reçus (useCount) et le total encaissé (totalCollected). Un lien réutilisable est le même pour tous : si vous devez rattacher chaque paiement à un client précis, l'option 2 est plus adaptée.

Avec un développeur, la session renvoie le résultat par webhook signé, et votre serveur retrouve la commande par votre metadata, renvoyé tel quel dans l'événement ; pour une session, l'événement porte aussi votre orderId. Confirmez la commande sur réception du webhook, jamais sur la seule redirection : la redirection dit que l'acheteur est revenu, pas que le paiement est acquis.

Pour les espèces, enfin : dès que le réseau confirme le dépôt, le lien passe « Payé » et vous êtes notifié dans le portail ; côté serveur, l'état du lien se lit par GET /v1/payment-links/{reference}.

Questions fréquentes

Comment ajouter un bouton de paiement à un site web ?

Collez comme cible d'un bouton, dans l'éditeur de votre site, l'adresse d'une page de paiement hébergée par ChariPay. Pour un prix fixe : un lien de paiement réutilisable, créé une fois par l'API avec singleUse: false, ou, sans développeur, la page d'un produit de votre boutique hébergée. Pour un montant variable, votre serveur crée un lien à usage unique ou une session à chaque visiteur.

Faut-il installer un plugin ou un script ?

Non. Le bouton est un simple lien vers une page de paiement hébergée : vous n'avez rien à installer ni aucun code à copier dans la page. Si votre site devient une boutique, sachez qu'il n'existe pas d'extension ChariPay pour Shopify ni pour WooCommerce : vous envoyez un lien de paiement pour chaque commande, ou vous branchez le checkout hébergé par l'API.

Le bouton fonctionne-t-il sur un site WordPress sans WooCommerce ?

Oui. Le bouton n'est qu'un lien : il fonctionne sur toute page qui permet de créer un bouton et de lui donner une adresse, WordPress sans WooCommerce comme un site fait avec un constructeur ou une page d'atterrissage. Le paiement se fait sur la page hébergée par ChariPay, et vous suivez les encaissements dans le portail.

Peut-on utiliser un bouton pour des montants variables ?

Oui, avec l'option 2. Le bouton ouvre un formulaire qui envoie la demande à votre serveur ; celui-ci crée un lien à usage unique ou une session au bon montant, puis redirige le visiteur vers la page de paiement. La clé d'API reste sur le serveur. Un lien réutilisable, lui, a toujours le même montant fixe.

Un bouton de paiement accepte-t-il les espèces en agence ?

Pas un bouton vers un lien réutilisable, qui n'encaisse que la carte, ni une session de paiement. Côté liens, les espèces passent par un lien à usage unique : si votre serveur en crée un pour chaque client, celui-ci peut choisir sur la page de payer par carte ou en espèces, avec une référence à régler dans une agence du réseau Chari. Une page produit de la boutique hébergée, elle, laisse l'acheteur choisir les espèces à la commande.

Le paiement se fait-il à l'intérieur de mon site ?

Non : le visiteur passe sur une page de paiement hébergée par ChariPay, à votre nom, puis peut revenir sur votre site. Par l'API, les URL de retour d'un lien (acceptUrl, declineUrl) ou d'une session le ramènent sur vos pages. C'est ce qui vous évite de manipuler les données de carte : vous ne voyez jamais de numéro de carte, et il ne passe pas par votre site.

Comment savoir qui a payé via le bouton ?

Dans le portail, vous êtes notifié à chaque encaissement et chaque lien affiche son statut. Pour un lien réutilisable, useCount et totalCollected donnent le nombre de paiements et le total ; pour rattacher chaque paiement à un client précis, préférez un lien à usage unique ou une session créés par votre serveur, avec votre metadata.

Prochaine étape

Essayez l'option 1 dès aujourd'hui sur une page de préproduction : Commencer en mode test, créez votre clé de test puis un lien réutilisable par l'API, posez-le derrière un bouton et réglez-le avec la carte de test 4918 9141 0719 5005, CVV 123, n'importe quelle date d'expiration future, code 3-D Secure 555. Passez ensuite à l'option 2 ou 3 si le montant varie ou si votre catalogue grandit : le guide pour créer un lien de paiement et celui de la boutique hébergée vous y accompagnent.