Payout Widget

The Payout Widget allows merchants to perform payouts directly from your site, mirroring the functionality available on our dashboard.

React Integration

Installation:

npm i clickpesa/payout-widget

Usage:

import PayoutWidget from 'clickpesa/payout-widget';

function App() {
    return (
        <PayoutWidget 
            clientId="your-client-id" // required
            theme={{
              primaryColor: "primary color";
              fontFamily: "font-family";
              mode: "dark" // or light
            }} // optional
            payoutDetails={{
              amount: 10000;
              orderReference: "1234";
              channel: "BANK TRANSFER" // or MOBILE MONEY
            }} // optional
            close={(payout: PayoutCallBackData) => {
              console.log(payout)
            }} // optional
        />
    )
}

// where
type PayoutCallBackData = {
  updatedAt: string;
  createdAt: string;
  id: string;
  orderReference?: string;
  amount: string;
  currency: string;
  fee: string;
  status: string;
  channel: string;
  channelProvider: string;
  settlementType?: string;
  notes?: string;
  beneficiary?: {
    accountNumber: string;
    accountName: string;
    swiftNumber?: string;
    routingNumber?: string;
    beneficiaryMobileNumber?: string;
    beneficiaryEmail?: string;
  };
}

export default App;

HTML Integration

Setup:

<!-- Include in the head -->
<link crossorigin rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@clickpesa/payout-widget@latest/lib/scripts/style.css">

<!-- Include in the body -->
<div id="clickpesa-payout-widget"></div>

<script defer async>
    window.clickpesaVariables = {
        clientId: "${clientId}",
        theme: {
            primaryColor: "${color}",
            fontFamily: "${fontFamily}",
            mode: "${mode}"
        }, // optiona;
        payoutDetails: {
          amount: 10000;
          orderReference: "1234";
          channel: "BANK TRANSFER" // or MOBILE MONEY
        }, // optional
        close: (payout: PayoutCallBackData) => {
          console.log(payout)
        } // optional
    }
</script>

<script crossorigin src="https://cdn.jsdelivr.net/npm/@clickpesa/payout-widget@latest/lib/scripts/script.js"></script>

Dynamic Configuration: Developers can dynamically change the clientId and other properties using the clickpesaVariablesChange event.

<script>
    const changeVariables = () => {
        window.clickpesaVariables.clientId = "Different Client ID"
        const event = new CustomEvent("clickpesaVariablesChange", { 
            detail: { 
                clickpesaVariables: {
                    ...window.clickpesaVariables,
                    // updated variables 
                } 
            } 
        })
        window.dispatchEvent(event)
    }
</script>

Payout Widget handles authentication, where by merchant will have to login within the widget to complete payouts. and signs them out when they close the widget which will send the payout record in the close callback if payout was created.

Listening to Payout Events

Payout Webhooks Events

Querying For Payouts

Query payouts by order reference API