Documentation

Encaissez en quelques lignes

Ouvrir la démo → Espace marchand

1Vue d'ensemble

📦

📱

🔑

🌗

⚠️

2Installation 

<body>
  <!-- ... -->
  <script src="https://cdn.quick-wallet.com/sdks/js/v2.0.0/index.min.js"></script>
</body>
💡

3Bouton de paiement

Le conteneur

<div id="quickwallet-button-container"></div>

L'initialisation

const checkout = new QuickWalletSDK();

await checkout.initialize({
  apiKey: "qw_live_votre_cle_publique",
  amount: 15000,
  currency: "XOF",
  description: "Commande #A-1042",

  onPaymentInited: (payment) => {
    console.log("référence de la demande", payment.verificationHash);
  },
  onSuccess: (transaction) => {
    window.location.href = "/merci?ref=" + transaction.reference;
  },
  onFailure: (transaction) => {
    console.warn("paiement non abouti", transaction.status);
  },
  onError: (error) => {
    console.error(error.type, error.message);
  },
});
💡

4Initialisation automatique 

<div
  data-quickwallet-auto-init="true"
  data-quickwallet-config='{
    "apiKey": "qw_live_votre_cle_publique",
    "amount": 15000,
    "currency": "XOF",
    "description": "Commande #A-1042",
    "buttonText": "Payer maintenant",
    "color": "#4c5aef",
    "onSuccess": "maBoutique.onPaid",
    "onFailure": "maBoutique.onFailed",
    "onError": "maBoutique.onError"
  }'
></div>

window.maBoutique = {
  onPaid: (transaction) => console.log("payé", transaction.reference),
  onFailed: (transaction) => console.warn("échec", transaction.status),
  onError: (error) => console.error(error.message),
};
💡

5Configuration

Option Type Requis Description
apiKey string
amount number
currency string
description string
onSuccess function
onFailure function
onError function
onPaymentInited function
onClose function
buttonText string
buttonContainer Element
metadata string
color string
theme string
lang string
closeOnSuccess boolean
verbose boolean
🔒

6Méthodes

Signature Description
updateConfig(patch)
getInfo()
getTransactionStatus()
setLanguage("fr" | "en")
setTheme("light" | "dark")
destroy() 
checkout.updateConfig({ amount: 22500, description: "Commande #A-1043" });

const status = await checkout.getTransactionStatus();
console.log(status.status, status.reference);

checkout.setLanguage("en");
checkout.destroy();
⚠️

7Flux de paiement

1

2

3

4

🔒

8API & endpoints

POST /payins/session x-api-key
POST /payins/widget-init x-qw-session
POST /payins/widget-check x-qw-session
🌐

En-têtes

Header Value
x-api-key qw_live_… — /payins/session
x-qw-session token — widget-init, widget-check
x-custom-lang fr | en
Content-Type application/json

Appel direct

const base = "https://api.quick-wallet.com/api/v1";

// 1. Une session, avec la clé publique.
const opened = await fetch(base + "/payins/session", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-api-key": "qw_live_votre_cle_publique",
    "x-custom-lang": "fr",
  },
  body: JSON.stringify({
    amount: 15000,
    currency: "XOF",
    description: "Commande #A-1042",
  }),
}).then((response) => response.json());

const session = opened.data.token;

// 2. Le paiement, avec le jeton de session. Le montant vient de la session.
const started = await fetch(base + "/payins/widget-init", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-qw-session": session,
  },
  body: JSON.stringify({ phoneCode: "+229", phoneNumber: "0161101180" }),
}).then((response) => response.json());

// 3. Le statut, sans corps.
const current = await fetch(base + "/payins/widget-check", {
  method: "POST",
  headers: { "x-qw-session": session },
}).then((response) => response.json());

// Après initialize(), le SDK gère le jeton lui-même.
const info = await checkout.apiRequest("/payins/widget-check", "POST");

9Erreurs

Type Quand
INITIALIZATION_ERROR
MERCHANT_DATA_LOAD_ERROR
PAYMENT_INIT_ERROR
TRANSACTION_STATUS_CHECK_ERROR
POLLING_ERROR
MODAL_ERROR

10Démo

Ouvrir la démo →
💬