Documentation
Intégrez le widget de paiement en quelques lignes. Utilisez vos clés publiques en sandbox pour tester.
Paramètres requis : public_key, country_code, environment, amount.
<!-- Widget CorisPay -->
<script src='https://cdn.corispay.com/widget-min.js'></script>
<corispay-widget
label='Payer maintenant'
amount='1000'
public_key='pk_test_********************************'
country_code='229'
environment='sandbox'
email='dev@example.com'
firstname='Clément'
lastname='Kouwenon'>
</corispay-widget>
// Ouverture programmatique (alternative)
corispay.openWidget(
'pk_test_********************************', // Clé publique
'229', // Indicatif pays
'sandbox', // Environnement: sandbox | live
'2333', // Montant
'#e44d26' // Couleur du thème (optionnel)
);
Paramètres supplémentaires
Le widget supporte des attributs/arguments optionnels pour personnaliser l’UI, le mode d’ouverture, et passer des métadonnées.
Attributs (balise <corispay-widget>)
| Nom | Type | Valeur par défaut | Description |
|---|---|---|---|
| primary_color | string (hex) | — | Couleur de thème interne du widget. |
| bg_color | string (hex) | #FA9A08FF | Couleur de fond du bouton rendu par le Web Component. |
| text_color | string (hex) | #ffffff | Couleur du texte du bouton. |
| mode | enum | POPUP | POPUP (superposition) ou PAGE (nouvel onglet). |
| orientation | enum | AUTO | ROW | COLUMN | AUTO (mise en page interne). |
| inject_description | string (HTML) | '' | Petit contenu HTML à afficher dans le widget (sanitisé côté lib). |
| string | — | E-mail client (pré-rempli). | |
| firstname | string | — | Prénom du client. |
| lastname | string | — | Nom du client. |
| comment | string | --- | Note/Commentaire associé au paiement. |
<corispay-widget
label="Payer maintenant"
amount="2500"
public_key="pk_test_********************************"
country_code="229"
environment="sandbox"
email="dev@example.com"
firstname="Clément"
lastname="Kouwenon"
primary_color="#4e54c8"
bg_color="#4e54c8"
text_color="#ffffff"
mode="PAGE"
orientation="ROW"
inject_description="<p>Merci de votre confiance.</p>"
comment="Commande #A-1029">
</corispay-widget>
Arguments (API JS corispay.openWidget(...))
| # | Argument | Type | Défaut | Notes |
|---|---|---|---|---|
| 1 | public_key | string | — | Obligatoire (SDK Keys > Public). |
| 2 | country_code | string | — | Indicatif (ex. 229). |
| 3 | environment | string | — | sandbox ou live. |
| 4 | amount | string | number | — | Montant en plus petite unité si applicable. |
| 5 | primary_color | string (hex) | null | Thème interne. |
| 6 | inject_desc | string (HTML) | '' | Contenu HTML (sanitisé). |
| 7 | mode | enum | POPUP | POPUP | PAGE. |
| 8 | orientation | enum | AUTO | ROW | COLUMN | AUTO. |
| 9 | string | null | Pré-remplissage client. | |
| 10 | firstname | string | null | — |
| 11 | lastname | string | null | — |
| 12 | service | string | CORISPAY | Tag service/filière. |
| 13 | comment | string | --- | Note jointe à la transaction. |
// Exemple avancé (POPUP, orientation FORCÉE, thème, description)
corispay.openWidget(
'pk_test_********************************', // public_key
'229', // country_code
'sandbox', // environment
'2500', // amount
'#4e54c8', // primary_color (optionnel)
'<p>Commande #A-1029</p>', // inject_desc (optionnel, sanitisé)
'POPUP', // mode: POPUP | PAGE
'ROW', // orientation: ROW | COLUMN | AUTO
'user@example.com', // email
'Clément', // firstname
'KOUWENON', // lastname
'LINKUP', // service tag
'Commande #A-1029' // comment
);
Callbacks & gestion des événements
La librairie émet des événements personnalisés au window : success, failure et close. Vous pouvez aussi fermer le widget manuellement.
// Écoute des événements
window.addEventListener('success', (e) => {
console.log('Paiement OK', e.detail); // { message, uuid }
});
window.addEventListener('failure', (e) => {
console.warn('Paiement KO', e.detail); // { message, uuid }
});
window.addEventListener('close', () => {
console.log('Widget fermé');
});
// Fermeture manuelle si besoin
corispay.closeWidget();
window.message, filtrez toujours par
event.origin === 'https://widget.corispay.com'. Les événements côté front
(success, failure, close) servent uniquement de feedback UX.
Bonnes pratiques :
- N’exécutez jamais d’actions critiques (livraison, activation d’accès, provisionning) sur la seule base d’un événement front.
- Implémentez un webhook côté serveur pour recevoir la notification officielle de CorisPay lorsqu’un paiement est succeeded/failed.
- Vérifiez la signature/secret du webhook, l’UUID de la transaction, le montant et la devise avant tout traitement.
- Synchronisez votre UI en lisant vos webhooks ou via votre API serveur plutôt que depuis le navigateur.
Consultez la section Webhooks pour l’exemple de configuration, la liste des événements et la validation de signature.
Webhooks
Les webhooks notifient votre serveur des événements (paiement, remboursement, reversement, etc.). Configurez une URL, sélectionnez les événements et validez les signatures avec le secret fourni. Pour plus de détails veuillez consulté la section sur les webhooks.
Corispay Widget - v1
- via Mobile Money
- via carte MASTERCARD / VISA
