To initialize the Pay Hero payment button, add the following script to your HTML file. This script configures the payment widget with the necessary parameters.
<script>
PayHero.init({
paymentUrl: "https://app.payhero.co.ke/lipwa/5",//Replace this with your own lipwa link here
width: "100%",
height: "100%",
containerId: "payHero",
channelID: 100,//Provide your payment channel ID
amount: 1,//Provide the amount to be paid
phone: "0712345678",//Provide the customer phone number,
name:"Customer Name",//Provide Customer name
reference: "somerandomstring",//Provide payment reference here
buttonName: "Pay Now KES 1",//Provide button display text
buttonColor: "#00a884", //Provide button color
successUrl: "https://google.com",//url user will be redirected after successfull payment
failedUrl: "https://google.com",//url user will be redirected after failed payment
callbackUrl: "https://free.beeceptor.com",// The url the successful payment payload will be sent to via POST method
});
</script>
Parameters
paymentUrl: The URL to initiate the payment process. Your Lipwa Link.
width: The width of the payment widget (e.g., "100%").
height: The height of the payment widget (e.g., "100%").
containerId: The ID of the HTML element where the payment widget will be rendered.
channelID: The payment channel ID to be used for the payment.
amount: The amount to be paid.
phone: The phone number of the payer.
name: The customer namer
reference: A unique reference string for the payment.
buttonName: The text to be shown on the payment button.
buttonColor: The background color of the payment button (in hex format).
successUrl: The URL to redirect to upon successful payment.
failedUrl: The URL to redirect to upon failed payment.
callbackUrl: The url the successful payment payload will be sent to via POST method
Example
Here is a complete example of an HTML file integrating the Pay Hero payment button widget:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>PayHero Integration</title>
</head>
<body>
<!-- PayHero Payment Container -->
<div id="payHero"></div>
<!-- Include PayHero SDK -->
<script src="https://applet.payherokenya.com/cdn/button_sdk.js?v=3.1s"></script>
<!-- Initialize PayHero Payment Widget -->
<<script>
PayHero.init({
paymentUrl: "https://app.payhero.co.ke/lipwa/5",//Replace this with your own lipwa link here
width: "100%",
height: "100%",
containerId: "payHero",
channelID: 100,//Provide your payment channel ID
amount: 1,//Provide the amount to be paid
phone: "0712345678",//Provide the customer phone number,
name:"Customer Name",//Provide Customer name
reference: "somerandomstring",//Provide payment reference here
buttonName: "Pay Now KES 1",//Provide button display text
buttonColor: "#00a884", //Provide button color
successUrl: "https://google.com",//url user will be redirected after successfull payment
failedUrl: "https://google.com",//url user will be redirected after failed payment
callbackUrl: "https://free.beeceptor.com",// The url the successful payment payload will be sent to via POST method
});
</script>
</body>
</html>
Notes
Ensure that the PayHero SDK script URL is correct and accessible.
Customize the payment parameters as needed for your specific use case.See comments for guidance
Make sure the containerId corresponds to an existing HTML element where the payment widget will be rendered.
Success Callback URL Payload
Note: This callback payload will ONLY be sent if you provide a successUrl , so make sure to provide both successUrl and callbackUrl
