AxisPayment Gateway | Test Suite

HTML & JS

L'implémentation standard pour une intégration rapide et légère. Sans dépendances.

Tests rapides en vanilla JS
Structure HTML sémantique
Zéro configuration requise
Modèle de redirection direct

Configuration rapide

Intégrez AxisPayment en quelques minutes en ajoutant simplement notre script via CDN.

                        <!-- 1. Inclusion du script via CDN -->
                        <script src="https://axispay.dabil.io/cdn/js/client.js"></script>
                    

Mise en place

Préparez votre bouton HTML.

                        <!-- Bouton de paiement -->
                        <button id="pay-btn">Payer avec Axis</button>
                    

Logique JavaScript

Récupérez le token depuis votre backend et lancez le paiement.

                        document.getElementById('pay-btn').onclick = async () => {

                        // 1. Récupérer le token depuis VOTRE backend
                        const res = await
                        fetch('/api/pay-init');
                        const { token } = await
                        res.json();

                        // 2. Démarrer le paiement sécurisé
                        axisApi.processPayment(token);
                        };
                    

React App

Une application moderne avec TypeScript pour une expérience utilisateur interactive.

Hooks personnalisés (Polling)
Typage TypeScript sécurisé
Composants réutilisables
Gestion d'état réactive

Lancer la Démo

Installation

                        # Installation via npm
                        npm install @axispay/react
                    

Composant AxisPayButton

Utilisez le composant dédié pour une intégration React fluide et typée.

                        import { useState, useEffect } from 'react';
                        import { AxisPayButton } from '@axispay/react';

                        const PaymentPage = () => {
                        const [token, setToken] = useState(null);

                        // 1. Récupérer le token depuis votre backend au chargement
                        useEffect(() => {
                        fetch('/api/pay-init')
                        .then(res => res.json())
                        .then(data => setToken(data.token));
                        }, []);

                        if (!token) return <Loader />;

                        // 2. Afficher le bouton de paiement sécurisé
                        return (
                        <AxisPayButton
                        token={token}
                        onSuccess={(data) => console.log(data)}
                        />
                        );
                        };
                    

Propriétés disponibles

Le bouton est hautement personnalisable : text, logo (bool), style, className, etc.

Backend API

Sécurisez vos transactions en initialisant les paiements depuis votre serveur (Node.js, PHP).

Signature HMAC-SHA256 requise
Protection de la Clé Secrète
Flux Tokenisé (Server-to-Server)
Compatible tous langages

Pourquoi une initialisation serveur ?

Pour garantir qu'aucun client ne puisse modifier le montant de la transaction, l'initialisation et la signature HMAC doivent se faire côté serveur.

                            const crypto = require('crypto');
                            const axios = require('axios');

                            async function initPayment(order) {
                            const payload = {
                            merchant_id: 'VOTRE_ID_MARCHAND',
                            order_id: order.id,
                            amount: order.amount
                            };

                            // Important: Trier les clés pour la signature cohérente
                            const sortedKeys = Object.keys(payload).sort();
                            const payloadString = JSON.stringify(payload, sortedKeys);

                            // Signature HMAC (Backend uniquement)
                            const nonce = crypto.randomUUID().replace(/-/g, '');
                            const signature = crypto
                            .createHmac('sha256', 'VOTRE_CLE_SECRETE')
                            .update(payloadString)
                            .digest('base64');

                            const response = await
                            axios.post('https://axispay.dabil.io/api/v1/init-payment',
                            payload, {
                            headers: {
                            'X-Merchant-ID': 'VOTRE_ID',
                            'X-Nonce': nonce,
                            'X-Signature': signature,
                            'X-Timestamp': new
                            Date().toISOString()
                            }
                            });

                            // Retourne le token au frontend
                            return response.data.payment_token;
                            }
                        

                            <?php
                            $merchant_id = 'VOTRE_ID_MARCHAND';
                            $secret_key = 'VOTRE_CLE_SECRETE';

                            $payload = [
                            'merchant_id' => $merchant_id,
                            'order_id' => 'CMD-123',
                            'amount' => 5000
                            ];

                            // Important : Trier les clés pour la signature cohérente et
                                nonce unique
                            ksort($payload);
                            $nonce = bin2hex(random_bytes(16));
                            $signature = base64_encode(hash_hmac('sha256', json_encode($payload), $secret_key,
                            true));

                            // Appel API AxisPay
                            $ch = curl_init('https://axispay.dabil.io/api/v1/init-payment');
                            curl_setopt($ch, CURLOPT_HTTPHEADER, [
                            'X-Signature: ' . $signature,
                            'X-Merchant-ID: ' . $merchant_id,
                            'X-Nonce: ' . $nonce,
                            'Content-Type: application/json'
                            ]);
                            // ... (suite de l'exécution curl)
                        

Réception du Webhook

AxisPay envoie une requête POST à votre webhookUrl avec le statut final.

                            const crypto = require('crypto');

                            // 1. Handler POST pour le callback
                            app.post('/api/axis-callback', (req, res) => {
                            const signature = req.headers['x-axispay-signature'];
                            const payload = JSON.stringify(req.body);

                            // 2. Vérifier la signature HMAC-SHA256 (HEX)
                            const expectedSignature = crypto
                            .createHmac('sha256', 'VOTRE_CLE_SECRETE')
                            .update(payload)
                            .digest('hex');

                            if (signature === expectedSignature) {
                            const { order_id, status } = req.body;
                            if (status === 'PAID') {
                            // ✅ Libérer la commande ou le service
                            updateOrder(order_id, 'COMPLETED');
                            }
                            res.sendStatus(200);
                            } else {
                            res.sendStatus(401);
                            }
                            });
                        

Champs du Payload

• event: Type d'événement (ex: payment.success)
• status: PAID, FAILED, EXPIRED
• order_id: Votre identifiant de commande
• transaction_id: Identifiant unique AxisPay

Guide Marchand

Documentation détaillée sur l'implémentation technique et les meilleures pratiques.

Lire la Documentation

Implémentation AxisPay

Guide d'intégration de la librairie cliente AxisPay pour les marchands. Cette librairie facilite la gestion de l'authentification HMAC et les appels API.

Intégration CDN

Ajoutez le script suivant à votre page HTML :

Initialisation

                            // Configuration du client
                            const client = new
                            AxisApiClient(
                            'VOTRE_MERCHANT_ID',
                            'VOTRE_SECRET_KEY'
                            );

                            // Exemple d'initialisation de paiement
                            async function initTransaction() {
                            try {
                            const result = await
                            client.initPayment({
                            orderId: 'CMD-' +
                            Date.now(),
                            amount: 5000,
                            phone: '0341234567'
                            });

                            console.log('Paiement initié:', result);
                            // Redirection ou traitement suite au succès

                            } catch (error) {
                            console.error('Erreur de paiement:', error);
                            }
                            }
                        

Intégration React

Utilisation dans un composant fonctionnel.

                            import React, { useEffect } from 'react';

                            const PaymentComponent = () => {

                            const handlePayment = async () => {
                            // On suppose que le script est chargé (via index.html ou loader
                                dynamique)
                            // Ou si le package était installé via npm
                            const client = new
                            window.AxisApiClient(
                            'VOTRE_MERCHANT_ID',
                            'VOTRE_SECRET_KEY'
                            );

                            try {
                            const response = await
                            client.initPayment({
                            orderId: 'CMD-REACT-01',
                            amount: 10000
                            });

                            alert('Token généré: ' + response.token);

                            } catch (err) {
                            console.error(err);
                            }
                            };

                            return (
                            <button onClick={handlePayment}>
                            Payer Maintenant
                            </button>
                            );
                            };
                        