@dunopay/vue

Intégration Vue 3 du widget de paiement DunoPay (Mobile Money).

npm install @dunopay/vue

Plugin global

import { createApp } from 'vue';
import { DunoPayPlugin } from '@dunopay/vue';

createApp(App).use(DunoPayPlugin, { publicKey: 'pk_sandbox_xxxxx', mode: 'sandbox' });

Composable

<script setup>
import { useDunoPay } from '@dunopay/vue';

// Avec le plugin installé : useDunoPay() sans argument
const { collect } = useDunoPay({ publicKey: 'pk_sandbox_xxxxx', mode: 'sandbox' });

function payer() {
  collect({
    amount: 5000,
    currency: 'XOF',
    description: 'Commande #42',
    customer: { firstname: 'Awa', lastname: 'Diallo', phone: '0196789966' },
    onSuccess: (data) => console.log('Payé !', data.reference),
    onError:   (err)  => console.log('Échec', err),
    onCancel:  ()     => console.log('Annulé'),
  });
}
</script>

Composant bouton

<DunoPayButton
  :amount="5000" currency="XOF" description="Commande #42"
  :customer="{ firstname: 'Awa', lastname: 'Diallo', phone: '0196789966' }"
  @success="onPaid" @error="onFail" @cancel="onCancel"
/>

⚠️ Utilisez uniquement votre clé publique (pk_…) côté navigateur.