Acceptez les paiements dans votre application grâce à l’infrastructure de paiement en marque blanche lomi.

lomi. Payment Elements

lomi. Payment Elements permet d’encaisser par carte directement dans votre application, sans rediriger vers un tunnel hébergé. Vous gardez la maîtrise de l’expérience utilisateur tandis que lomi. prend en charge la complexité du traitement des paiements.

lomi. Payment Elements s’appuie sur une infrastructure sécurisée et conforme PCI. Vous ne manipulez jamais les données brutes de carte.

Vue d’ensemble

Trois façons d’intégrer les paiements lomi. :

Méthode	Cas d’usage
SDK JS (`@lomi/js`)	Applications web en JavaScript vanilla ou framework
SDK React Native (`@lomi/react-native`)	Applications natives iOS et Android
Tunnel intégré (`@lomi/embed`)	Intégration en iframe conservant l’interface complète du tunnel lomi.

Installation

bash npm install @lomi/js

bash npm install @lomi/react-native

bash npm install @lomi/embed

Démarrage rapide

Obtenir vos clés API

Deux clés sont nécessaires dans le Dashboard lomi. :

Clé publique (lomi_pk_...) : côté client pour initialiser le SDK
Clé secrète (lomi_sk_...) : côté serveur pour créer les Payment Intents

N’exposez jamais la clé secrète dans le code client.

Créer un Payment Intent (serveur)

Avant l’encaissement, créez un Payment Intent sur votre serveur :

// Votre serveur (exemple Node.js)
const response = await fetch('https://api.lomi.africa/payment-intents', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.LOMI_SECRET_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    amount: 10000, // Amount in smallest currency unit (e.g., 10000 XOF)
    currency: 'XOF',
    customer_email: 'customer@example.com',
  }),
});

const { clientSecret } = await response.json();
// Pass clientSecret to your frontend

Encaisser le paiement (client)

import { loadLomi } from '@lomi/js';

// Initialize Lomi
const lomi = await loadLomi('lomi_pk_your_publishable_key');

// Create payment elements
const elements = lomi.elements({ clientSecret });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// Handle form submission
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const { error } = await lomi.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://yoursite.com/success',
    },
  });

  if (error) {
    console.error(error.message);
  }
});

import { LomiProvider, LomiCardField, useLomi } from '@lomi/react-native';

function App() {
  return (
    <LomiProvider publishableKey="lomi_pk_your_publishable_key">
      <PaymentScreen />
    </LomiProvider>
  );
}

function PaymentScreen() {
  const { confirmPayment } = useLomi();

  const handlePay = async () => {
    const { error } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Card',
    });

    if (error) {
      console.error(error.message);
    }
  };

  return (
    <>
      <LomiCardField
        postalCodeEnabled={false}
        style={{ width: '100%', height: 50 }}
      />
      <Button title="Pay" onPress={handlePay} />
    </>
  );
}

<!DOCTYPE html>
<html>
<body>
  <div id="lomi-checkout"></div>
  
  &lt;script type="module"&gt;
    import { loadLomiCheckout } from '@lomi/embed';
    
    loadLomiCheckout({
      elementId: 'lomi-checkout',
      sessionId: 'cs_your_checkout_session_id',
      publicKey: 'lomi_pk_your_publishable_key',
    });
  &lt;/script&gt;
</body>
</html>

Le tunnel intégré conserve l’interface et le parcours lomi. et se redimensionne automatiquement au conteneur.

Référence API

Point de terminaison Payment Intent

POST https://api.lomi.africa/payment-intents

Paramètre	Type	Obligatoire	Description
`amount`	number	Oui	Montant dans la plus petite unité monétaire
`currency`	string	Oui	Code devise (XOF, EUR, USD)
`customer_email`	string	Non	Adresse e-mail du client
`customer_name`	string	Non	Nom complet du client
`description`	string	Non	Libellé sur le reçu
`metadata`	object	Non	Paires clé-valeur

Réponse :

{
  "success": true,
  "data": {
    "id": "pi_abc123",
    "clientSecret": "pi_abc123_secret_xyz",
    "amount": 152,
    "currency": "eur",
    "original_amount": 10000,
    "original_currency": "XOF"
  }
}

Webhooks

Après un paiement réussi, lomi. envoie un webhook vers votre URL configurée :

{
  "event": "PAYMENT_SUCCEEDED",
  "data": {
    "transaction_id": "txn_abc123",
    "amount": 10000,
    "currency": "XOF",
    "status": "completed",
    "metadata": {}
  }
}

Voir Documentation Webhooks.

Tests

Utilisez les clés de test (lomi_pk_test_... et lomi_sk_test_...) pour tester sans transaction réelle.

Numéros de carte de test :

Carte	Numéro
Paiement réussi	`4242 4242 4242 4242`
Refusée	`4000 0000 0000 0002`
Authentification requise	`4000 0025 0000 3155`

Utilisez une date d’expiration future et un CVC à trois chiffres quelconque.

lomi. Payment Elements

Sur cette page