Bouton de paiement

Ajoutez un bouton de paiement à n'importe quelle page web avec quelques lignes de HTML. Au clic, la page de paiement s'ouvre dans une fenêtre, sans quitter votre site. Aucun serveur n'est nécessaire.

Le plus simple : le générateur

Dans votre espace, rubrique Bouton de paiement, choisissez un de vos liens : le code à coller dans votre page est prêt, avec la bonne adresse du script.

Intégration

Créez d'abord un lien de paiement, puis collez :

index.html

<!-- 1. Le script, une seule fois par page -->
<script src="https://integralpay.tech/static/js/integralpay-button.js"></script>

<!-- 2. Le bouton (autant que vous voulez) -->
<button class="integralpay-btn"
        data-token="TOKEN_DE_VOTRE_LIEN"
        data-label="Payer 5 000 XOF"
        data-success-url="https://mon-site.bf/merci/"
        data-cancel-url="https://mon-site.bf/panier/"></button>

Attribut	Obligatoire	Description
data-token	oui	token du lien de paiement
data-amount	non	Montant proposé, uniquement pour un lien à montant libre (ignoré si le montant du lien est fixe)
data-label	non	Texte du bouton, si le bouton est vide
data-success-url	non	Page affichée après un paiement réussi ; payment_token y est ajouté
data-cancel-url	non	Page affichée si le client annule

Le script fonctionne aussi avec les boutons ajoutés après le chargement de la page (React, Vue, contenu chargé dynamiquement).

Montant libre

Un montant passé par data-amount est modifiable par le client (il peut éditer la page). Pour une commande à prix déterminé, créez un lien à montant fixe par commande depuis votre serveur (Retour sur votre site).

Ouvrir depuis votre propre code

checkout.js

IntegralPay.open({ token: 'TOKEN_DE_VOTRE_LIEN', amount: 5000 });   // amount : lien à montant libre uniquement
IntegralPay.close();

Réagir au paiement dans la page

Le bouton émet des événements, utiles pour un retour visuel : integralpay:success, integralpay:cancel et integralpay:close.

listener.js

document.querySelector('.integralpay-btn').addEventListener('integralpay:success', (event) => {
  afficherMessage('Merci ! Votre paiement est en cours de confirmation.');
  // Retour visuel uniquement : validez la commande sur le webhook ou côté serveur
});

Vérifier un paiement sans serveur

Pour un vendeur sans serveur, la page data-success-url peut confirmer le paiement avec le point d'accès public GET https://integralpay.tech/pay/verify/ (sans clé API, limité à quelques appels par minute et par adresse IP).

Paramètre	Description
token	Le payment_token reçu dans l'adresse de la page de succès
claim	1 : marque le paiement comme utilisé ; un second appel répond already_claimed: true

JavaScript

merci.js

const token = new URLSearchParams(location.search).get('payment_token');

fetch(`https://integralpay.tech/pay/verify/?token=${encodeURIComponent(token)}&claim=1`)
  .then((r) => r.json())
  .then((data) => {
    if (data.status !== 'SUCCEEDED') return afficherMessage('Paiement non confirmé.');
    afficherMessage(data.already_claimed
      ? 'Ce paiement a déjà été utilisé.'
      : `Merci ! Paiement de ${data.amount} ${data.currency} reçu.`);
  });

cURL

terminal

curl "https://integralpay.tech/pay/verify/?token=TOKEN"           # consultation
curl "https://integralpay.tech/pay/verify/?token=TOKEN&claim=1"   # consultation et marquage

Réponse · 200

{
  "status": "SUCCEEDED",
  "amount": "5000.00",
  "currency": "XOF",
  "phone": "226701****",
  "provider": "orange_bf",
  "paid_at": "2026-11-06T10:15:30+00:00",
  "already_claimed": false,
  "verified_at": "2026-11-06T10:16:02+00:00"
}

Un paiement non confirmé renvoie seulement son statut ({"status": "PENDING"}), un jeton inconnu {"status": "NOT_FOUND"} avec le code 404.

Limite de sécurité

Cette vérification prouve qu'un paiement existe, pas qu'il correspond à cette commande : ni la référence ni les métadonnées ne sont renvoyées. Elle convient à un produit à prix unique. Pour un panier ou des commandes à montants variables, utilisez les webhooks.