Payment Button
Overview
The UpesiPay Payment Button Widget allows merchants and developers to easily integrate a payment button into their websites or applications. The widget provides a seamless way for customers to make payments through UpesiPay without leaving the merchant's site.
Features
- Easy Integration - Just include the JavaScript SDK and configure a few parameters
- Customizable Button - Set button text, color, and dimensions
- Event Handling - Listen for successful or failed payments using JavaScript event listeners
- Redirection Support - Define success and failure URLs for post-payment actions
- Callback URL Support - Receive a payment payload for backend processing
Installation
Include the UpesiPay Button SDK in your HTML file:
<script src="https://applet.upesipay.com/cdn/button_sdk.js?v=3.1"></script>Usage
Insert the following code into your HTML page:
<!-- UpesiPay Payment Container -->
<div id="payHero"></div>
<script>
PayHero.init({
paymentUrl: "https://upesipay.com/lipwa/5",
width: "100%",
height: "100%",
containerId: "payHero",
channelID: 100,
amount: 1,
phone: "0712345678",
name: "Good Samaritan",
reference: "buttonTesting",
buttonName: "Pay Now KES 1",
buttonColor: "#00a884",
successUrl: null,
failedUrl: null,
callbackUrl: null
});
// Handling payment success or failure
window.addEventListener('message', function(event) {
if (event.data.paymentSuccess) {
console.log("Payment Successful:", event.data);
alert('Payment successful!');
} else {
alert('Oopsie! Payment failed');
}
});
</script>Parameters
| Parameter | Required | Description |
|---|---|---|
paymentUrl |
Yes | Your UpesiPay Lipwa payment link |
width |
No | Width of the button (default: 100%) |
height |
No | Height of the button (default: 100%) |
containerId |
Yes | The HTML element ID where the button will be injected |
channelID |
Yes | Your unique payment channel ID |
amount |
Yes | The amount to be paid |
phone |
No | Customer's phone number (optional) |
name |
No | Customer's name (optional) |
reference |
No | A unique reference for tracking payments |
buttonName |
Yes | The text displayed on the payment button |
buttonColor |
Yes | The color of the payment button (hex code) |
successUrl |
No | URL to redirect upon successful payment |
failedUrl |
No | URL to redirect if payment fails |
callbackUrl |
No | Webhook URL for payment details on success |
Success Callback Payload
The callback URL will receive the following payload upon successful payment:
{
"paymentSuccess": true,
"reference": "c632-4e27-9718-f9fcdec511d826234",
"user_reference": "buttonTesting",
"provider": "m-pesa",
"providerReference": "TCT3K99UFZ",
"amount": 1,
"phone": "0708344101",
"customerName": "Good Samaritan",
"channel": "100"
}