Checkout Link Widget

The Checkout Link Widget enables the creation of payment links that can be sent to customers, facilitating easy and secure payments.

React Integration

Installation:

npm i clickpesa/checkout-link-widget

Usage:

import CheckoutLinkWidget from 'clickpesa/checkout-link-widget';

function App() {
    return (
        <CheckoutLinkWidget 
            clientId="your-client-id" // required
            theme={{
              primaryColor: "primary color";
              fontFamily: "font-family";
              mode: "dark" // or light
            }} // optional
            orderDetails={{
              orderReference: "1234";
              orderCurrency: "TZS" // or USD
            }} // optional
            close={(checkoutLink: string) => {
              console.log(checkoutLink)
            }} // optional
        />
    )
}

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;
        orderDetails: {
          orderReference: "1234";
          orderCurrency: "TZS" // or USD
        }, // optional
        close: (checkoutLink: string) => {
          console.log(checkoutLink)
        } // 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>

Checkout Link Widget handles authentication, where by merchant will have to login within the widget to create checkout link. and signs them out when they close the widget which will send the checkout link in the close callback if it was created.

Listening to Payment Events

Payment Webhooks Events

Querying For Payments

Query payment by order reference API