SDK JavaScript (Browser)

Intégration côté client

Installation

<!-- Via CDN -->
<script src="https://devs.mypaie.tech/sdk/javascript/mypaie.js"></script>

<!-- Ou téléchargement local -->
<script src="/js/mypaie.js"></script>

Bouton de paiement intégré (Plus simple)

<div id="pay-button"></div>

<script>
new MyPaieButton('#pay-button', {
    apiKey: 'pk_test_votre_cle',
    amount: 5000,
    currency: 'XOF',
    description: 'Commande #123',
    buttonText: 'Payer 5 000 XOF',
    buttonStyle: 'default', // default, orange, dark, outline
    successUrl: 'https://votresite.com/success',
    cancelUrl: 'https://votresite.com/cancel',
    onError: (error) => {
        alert('Erreur: ' + error.message);
    }
});
</script>

default

orange

dark

outline

Checkout hébergé (Manuel)

const mypaie = new MyPaie('pk_test_votre_cle');

// Redirection automatique
document.getElementById('payBtn').addEventListener('click', async () => {
    await mypaie.checkout.redirectToCheckout({
        amount: 5000,
        currency: 'XOF',
        description: 'Commande #123',
        success_url: 'https://votresite.com/success',
        cancel_url: 'https://votresite.com/cancel'
    });
});

// OU ouvrir en popup
const popup = await mypaie.checkout.openCheckout({
    amount: 5000,
    currency: 'XOF',
    description: 'Commande'
});

Orange Money

const payment = await mypaie.payments.orangeMoney({
    amount: 5000,
    currency: 'XOF',
    phone: '+22370123456',
    description: 'Achat produit'
});

// Rediriger manuellement
window.location.href = payment.payment_url;

// OU utiliser la méthode raccourcie
await mypaie.payments.initiateAndRedirect({
    amount: 5000,
    currency: 'XOF',
    payment_method: 'orange_money',
    phone: '+22370123456'
});

Carte bancaire

const payment = await mypaie.payments.card({
    amount: 10000,
    currency: 'XOF',
    customer_email: 'client@email.com',
    description: 'Abonnement'
});

window.location.href = payment.payment_url;

Vérifier le statut

const status = await mypaie.payments.retrieve('PAY_20260110_ABC123');

console.log(status.status); // completed, pending, failed
console.log(status.amount);
console.log(status.payment_method);

Exemple complet

<!DOCTYPE html>
<html>
<head>
    <title>Ma Boutique</title>
</head>
<body>
    <h1>Panier</h1>
    <p>Total: 5 000 XOF</p>
    
    <div id="mypaie-button"></div>

    <script src="https://devs.mypaie.tech/sdk/javascript/mypaie.js"></script>
    <script>
        const button = new MyPaieButton('#mypaie-button', {
            apiKey: 'pk_test_xxx',
            amount: 5000,
            currency: 'XOF',
            description: 'Panier',
            buttonText: 'Payer maintenant',
            successUrl: window.location.origin + '/success'
        });

        // Mettre à jour le montant dynamiquement
        function updateCart(newAmount) {
            button.setAmount(newAmount);
        }
    </script>
</body>
</html>

Sécurité : N'utilisez jamais votre clé secrète (sk_) côté client. Uniquement la clé publique (pk_).

Retour à la documentation