AxisPayment | Documentation Marchand

Frontend Setup

La première étape consiste à intégrer la librairie cliente sur votre page de paiement. Cette librairie va gérer l'interaction utilisateur.

Ajoutez le script dans votre <head> ou avant la fermeture du <body>.

HTML

                                <script src="https://cdn.axispay-fictif.io/js/axispay-client.js"></script>
                            

Installez le package via npm ou yarn.

TERMINAL

npm install @axispay/react

Création de Commande (Backend)

L'utilisateur clique sur "Payer". Votre frontend doit appeler VOTRE backend. Ne jamais appeler l'API AxisPay directement depuis le navigateur pour l'initialisation.

Architecture

                            // Pseudocode controlleur Backend
                            function initiatePaymentFlow(userRequest)
                            {
                            // 1. Créer une commande en base de données avec statut 'PENDING'
                            const order = await OrderModel.create({
                            amount: 5000,
                            user: userRequest.userId,
                            status: 'PENDING'
                            });

                            // 2. Passer à l'étape suivante : Demander le token à AxisPay
                            return getAxisToken(order);
                            }
                        

Génération Token & Signature

Votre backend s'authentifie auprès d'AxisPay en signant les données avec votre SECRET_KEY. Cette signature HMAC-SHA256 garantit l'intégrité du montant.

Node.js

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

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

                            // Signature HMAC-SHA256
                            const signature = crypto
                            .createHmac('sha256',
                            process.env.AXIS_SECRET)
                            .update(JSON.stringify(payload))
                            .digest('base64');

                            // Appel API (Server-to-Server)
                            const res = await axios.post('https://api.axispay.dabil.io/init',
                            payload, {
                            headers: { 'X-Signature': signature }
                            });

                            // Retourner ce token a votre Frontend
                            return res.data.token;
                            }
                        

Validation du Paiement

Le Frontend reçoit le token et lance l'interface sécurisée AxisPay.

CLIENT JS

                                // Réception du token depuis votre backend
                                const token = await fetch('/my-api/pay').then(r => r.json());

                                // Initialiser le client Axis
                                const axis = new AxisApiClient();

                                // Lancer le paiement
                                axis.processPayment(token)
                                .then(status => {
                                if (status === 'SUCCESS') {
                                window.location.href = '/success';
                                }
                                });
                            

REACT COMPONENT

                                import { AxisPayButton } from '@axispay/react';

                                return (
                                <AxisPayButton
                                token={paymentToken}
                                onSuccess={() => navigate('/success')}
                                onError={(err) => toast(err)}
                                />
                                );
                            

Callback & Webhook

Une fois le paiement terminé, AxisPay notifie votre serveur via une requête POST. C'est ici que vous validez la commande (statut 'PAID').

Node.js / Express

                            app.post('/webhooks/axis', (req, res) => {
                            const { order_id, status, signature } = req.body;

                            // 1. Vérifier la signature (CRITIQUE)
                            if (!iframeSignatureValid(signature,
                            req.body)) {
                            return res.sendStatus(403);
                            }

                            // 2. Mettre à jour la commande
                            if (status === 'PAID') {
                            deliverService(order_id);
                            }

                            res.sendStatus(200);
                            });
                        