Intégrer CinetPay en Next.js — guide complet

CinetPay supporte Wave, Orange Money, MTN Money, et les cartes bancaires. C'est la solution incontournable pour accepter des paiements en Afrique francophone. Voici comment l'intégrer dans Next.js.

Prérequis

• Un compte CinetPay avec un API Key et un Site ID
• Un projet Next.js existant

Étape 1 : Créer la route API

Crée le fichier app/api/paiement/route.ts :

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const body = await req.json();
  const { montant, email, nom } = body;

  const response = await fetch("https://api-checkout.cinetpay.com/v2/payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      apikey: process.env.CINETPAY_API_KEY,
      site_id: process.env.CINETPAY_SITE_ID,
      transaction_id: Date.now().toString(),
      amount: montant,
      currency: "XOF",
      description: "Paiement Telopex",
      customer_email: email,
      customer_name: nom,
      notify_url: process.env.NEXT_PUBLIC_URL + "/api/paiement/notification",
      return_url: process.env.NEXT_PUBLIC_URL + "/merci",
    }),
  });

  const data = await response.json();
  return NextResponse.json(data);
}

Étape 2 : Variables d'environnement

Crée un fichier .env.local :

CINETPAY_API_KEY=ta_cle_api
CINETPAY_SITE_ID=ton_site_id
NEXT_PUBLIC_URL=https://tonsite.com

Étape 3 : Le bouton de paiement

"use client";

export default function BoutonPaiement() {
  async function payer() {
    const res = await fetch("/api/paiement", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        montant: 5000,
        email: "client@email.com",
        nom: "Client Test",
      }),
    });
    const data = await res.json();
    if (data.data?.payment_url) {
      window.location.href = data.data.payment_url;
    }
  }

  return (
    <button onClick={payer}>
      Payer 5 000 FCFA
    </button>
  );
}

Étape 4 : Gérer la notification

CinetPay envoie une notification POST à ton notify_url après chaque paiement. Crée app/api/paiement/notification/route.ts pour la gérer et mettre à jour ta base de données.

La conclusion

CinetPay + Next.js = une solution de paiement complète pour l'Afrique en moins d'une heure. TeloShop utilisera exactement cette intégration.