Aller au contenu

Components

Le checkout Wajub, dans vos propres pages.

Votre client paie sans quitter votre site : le checkout complet dans votre page ou en fenêtre modale, ou nos champs dans votre propre formulaire. Mobile money, cartes et portefeuilles, à vos couleurs.

Créer un compte gratuitEssayer la démo(nouvel onglet)

  • Vos clients restent sur votre site

    Le paiement se fait dans votre page ou dans une fenêtre par-dessus. Votre client ne quitte pas votre site et sait toujours chez qui il paie.

  • Les moyens de vos clients

    Le mobile money des opérateurs du pays, les cartes, Apple Pay et Google Pay. Chaque client voit les moyens de son pays, et ceux qu'il a déjà utilisés reviennent au paiement suivant.

  • À l'image de votre marque

    Vos couleurs, votre police, vos arrondis, et la langue du client parmi cinq, arabe compris. Le paiement ressemble au reste de votre site.

  • Des paiements protégés

    Le numéro de carte est saisi dans les champs du fournisseur de cartes, comme Stripe ou Flutterwave : il n'atteint ni votre serveur ni ceux de Wajub. La vérification 3-D Secure de la banque se fait dans le paiement.

Moyens de paiement

Le checkout montre à chaque client les moyens de son pays.

Les opérateurs de mobile money ouverts dans le pays, le numéro écrit comme sur place, la devise du pays. Votre code ne change pas.

Pays
  • MTN MoMo
  • Orange Money
  • Express Union

Cartes bancaires avec votre connexion Stripe, PayPal, Flutterwave, Paystack, CinetPay, FedaPay ou KkiaPay.

Sécurisé par Wajub

Payer en XAFFrançais

Total

15 000 FCFA

1 article

Pays

Cameroun

Choisir un mode de paiement

Mobile MoneyRecommandé

Carte bancaire

Mobile MoneyChanger

MTN MoMo
Orange Money

Numéro de téléphone

+237

Payer 15 000 FCFA

Orange Money

Vérifiez votre téléphone. Aucun code à saisir.

+237 6 99 45 67 89

Paiement réussi

15 000 FCFA

Orange Money
+237 6 99 45 67 89
Référence
order-4172

Paiement échoué

Paiement refusé par l'émetteur.

Réessayer

Indicatif +237, montant en francs CFA (XAF)

Apparence

Le paiement porte vos couleurs, et parle la langue du client.

Logo, couleurs, police et arrondis se règlent une fois dans votre tableau de bord, et chaque paiement les reprend. Vous pouvez aussi les passer dans votre code, comme ci-dessous. Le paiement s'affiche dans la langue de votre client, l'arabe compris.

Toutes les options de l'apparence(nouvel onglet)
Style
Couleur
Langue
import { mount } from '@wajub/js'

// Logo and name: your Dashboard branding
await mount('#checkout', {
  sessionId,
  locale: 'fr',
  appearance: {
    primaryColor: '#006a8e',
    colorScheme: 'light',
    theme: 'stripe',
  },
  onSuccess: showPaidOrder,
})

Champs de paiement

Votre formulaire, nos cinq champs.

Avec components(), vous gardez votre page, votre récapitulatif et votre bouton. Chaque champ s'affiche dans son iframe, se monte où vous voulez et vous dit quand il est complet.

Les champs de paiement dans la documentation(nouvel onglet)

  • Votre page, votre bouton

    Vous gardez votre formulaire, votre récapitulatif de commande et votre bouton de paiement. Le champ vous dit quand il est valide : votre bouton s'active, et confirmPayment() envoie le paiement.

    • Valide ne veut pas dire payé : votre webhook confirme le paiement
    • Un composant prêt pour React, Vue et Svelte

  • Chaque champ dans son iframe

    Wajub affiche dans des iframes séparées les champs qui ne doivent pas toucher à votre page. Le numéro de carte est saisi dans les champs du fournisseur de cartes : il n'atteint ni votre serveur ni ceux de Wajub.

    • Les champs carte de Stripe, Adyen ou Mollie
    • Couleurs et langue changées en direct avec update()

  • Toujours à la bonne hauteur

    Le SDK ajuste la hauteur de chaque iframe dès que son contenu change. Vous n'avez rien à mesurer ni à réserver dans votre page.

    • L'événement resize vous donne chaque nouvelle hauteur
    • Le composant payment s'ouvre sur le formulaire du moyen choisi

Checkout ou champs

Checkout complet ou champs de paiement : choisissez qui affiche le bouton.

Le checkout complet (nouvel onglet) affiche les moyens de paiement, les champs et le bouton Payer : dans votre page, dans une fenêtre au-dessus d'elle ou sur sa page hébergée. C'est l'intégration la plus courte : commencez par elle. Les champs de paiement (nouvel onglet) se glissent dans le formulaire que vous avez déjà : Wajub n'affiche que les champs, chacun dans son iframe, et votre bouton lance le paiement.

Intégration

Dans les deux cas

  • Moyens de paiement enregistrés
  • 3-D Secure
  • Apple Pay et Google Pay

Avec le checkout complet

  • Le bouton Payer de Wajub
  • Codes de confirmation (OTP)
  • Champs de checkout personnalisés

Dans le code : mount(), open() ou checkout()

Pour les développeurs

Une session sur votre serveur, le paiement dans votre page.

Démarrage rapide(nouvel onglet)Référence API(nouvel onglet)

Frameworks

Événements

  • ready
  • change
  • focus
  • blur
  • success
  • error
  • statechange

  1. Votre serveur crée la session

    Avec votre clé secrète. Votre page ne reçoit que le jeton de session, valable pour ce seul paiement.

  2. Votre page affiche le paiement

    Le checkout complet ou les champs, en JavaScript ou avec le composant de votre framework. onSuccess sert à mettre votre page à jour, pas à livrer.

  3. Votre serveur livre sur le webhook

    Livrez à la réception du webhook signé, ou après avoir relu le paiement par l'API : c'est son statut qui fait foi.

import { Wajub } from '@wajub/node'

const wajub = new Wajub({
  secretKey: process.env.WAJUB_SECRET_KEY!,
})

const payment = await wajub.payments.create(
  {
    amount: 15000,
    currency: 'XAF',
    reference: 'order-4172',
    customer: { email: 'buyer@example.com' },
  },
  { idempotencyKey: 'order-4172' },
)

// The browser only receives the session token
res.json({
  sessionId: payment.authorization_token,
})

Questions fréquentes

Une autre question ? Parler à l'équipe

Quel mode choisir pour commencer ?
Le checkout dans votre page, avec mount() : votre client reste sur votre site, et le checkout gère tous les moyens de paiement, les codes de confirmation et la 3-D Secure. Passez aux champs de paiement quand votre formulaire l'exige : vous gardez la 3-D Secure, les moyens enregistrés et les portefeuilles, mais pas les champs personnalisés ni les codes de confirmation.
Ai-je besoin d'un serveur ?
Oui. La session se crée sur votre serveur, avec votre clé secrète. Votre page ne reçoit que le jeton de session, valable pour ce seul paiement. Une clé secrète envoyée depuis un navigateur est refusée, et vous êtes prévenu par e-mail.
Quels frameworks sont pris en charge ?
JavaScript avec @wajub/js, React 18 et plus avec @wajub/react, Vue 3.3 et plus avec @wajub/vue, Svelte 5 avec @wajub/svelte. Next.js, Nuxt et SvelteKit ont chacun leur guide.
Puis-je adapter le checkout à mon design ?
Oui : partez d'un thème prêt à l'emploi, puis ajustez seize variables de couleur, de police, d'espacement et de rayon, en mode clair, sombre ou automatique. L'apparence, la langue et la devise changent en direct avec update(), sans remonter le checkout.

Intégrez le checkout à votre site aujourd'hui.

Créez votre compte, montez le checkout en sandbox avec vos clés de test, puis passez en production avec vos clés live.

Créer un compte gratuitSuivre le démarrage rapide