How Pay Hero’s Payment Button Simplifies Collections on Websites and Apps

Businesses in Kenya and beyond need efficient, secure, and user-friendly ways to collect payments online. Whether you’re running an e-commerce store, a service-based platform, or a mobile app, integrating a seamless payment solution is critical to boosting conversions and enhancing customer experience.

 Pay Hero, a powerful payment gateway, offers a customizable, embeddable widget that enables businesses to accept mobile money payments, primarily through M-Pesa, directly on their websites or apps. By integrating this button, businesses can initiate an M-Pesa STK Push, prompting customers to complete payments via their phones with just a few clicks. The button is backed by Pay Hero’s robust API, which supports secure transactions, real-time payment tracking, and seamless integration with platforms like WooCommerce, Shopify, and custom-built applications.

Here’s how the Pay Hero Payment Button transforms payment collection for businesses:

1. Effortless Integration for Websites and Apps
   • Simple Setup: Pay Hero provides a ready-made deposit page and API documentation, making it easy to embed the Payment Button into any website or app. Whether you’re using WordPress, Shopify, or a custom framework like React, the integration process is straightforward. For example, a simple HTML form or JavaScript snippet can trigger an STK Push, allowing customers to pay without leaving your platform.
   • Customizable Design: The button can be styled to match your brand’s look and feel, ensuring a cohesive user experience. Businesses can adjust colors, sizes, and text to align with their website or app design.
   • Cross-Platform Compatibility: The Payment Button works seamlessly across desktop and mobile devices, catering to Kenya’s mobile-first market, where over 90% of adults use mobile money services like M-Pesa.

2. Fast and Convenient M-Pesa Payments

• STK Push for Speed: The Payment Button triggers an M-Pesa STK Push, which sends a payment prompt directly to the customer’s phone. Customers simply enter their PIN to confirm the transaction, reducing friction compared to manual payment methods like Paybill numbers or bank transfers.
• Wide Reach: With M-Pesa boasting over 50 million active users in Kenya, the Payment Button taps into a massive customer base, making it ideal for businesses targeting local markets.
• Flexible Payment Options: Beyond M-Pesa, Pay Hero supports payments to bank accounts and other providers like Sasapay, giving businesses flexibility to cater to diverse customer preferences.

3. Enhanced Customer Experience

Localized Solution: The button supports payments in Kenyan Shillings and is tailored to local payment habits, ensuring customers feel confident and familiar with the process.

Seamless Checkout: The Payment Button enables a two-step checkout process—customers enter their phone number and amount, then confirm the payment on their phone. This simplicity reduces cart abandonment rates, which can be as high as 70% in e-commerce due to complex payment flows.

4. Improved Cash Flow and Business Efficiency

Reduced Manual Work: The Payment Button automates payment collection, reducing the need for manual follow-ups or customer support to confirm payments, saving time and resources.

Instant Payment Processing: Payments are processed in real-time, with funds credited to the business’s registered M-Pesa Paybill, Till Number, or bank account. This eliminates delays associated with traditional bank transfers or cash payments.

Automated Tracking: Pay Hero’s dashboard at app.payhero.co.ke provides detailed transaction logs, helping businesses monitor cash flow, reconcile payments, and generate reports effortlessly.

Real-Time Confirmation: Pay Hero’s callback system notifies businesses instantly when a payment is queued or completed, allowing for quick order processing and customer updates.

5. Secure and Reliable Transactions

Callback Verification: Businesses receive secure callbacks to confirm payment status, ensuring no transactions are missed or duplicated.

PCI DSS Compliance: Pay Hero adheres to global security standards, ensuring customer data and transactions are protected with encryption and secure APIs.

Fraud Prevention: The STK Push requires customers to authenticate payments via their M-Pesa PIN, adding an extra layer of security to prevent unauthorized transactions.

How to Get Started with Pay Hero’s Payment Button

Sign Up: Create a merchant account at app.payhero.co.ke and complete verification.

Register a Payment Channel: Add your M-Pesa Paybill, Till Number, or bank account via the Pay Hero dashboard or API.

Integrate the Button:

• Use the ready-made deposit page or download the WooCommerce/Shopify plugin from payherokenya.com.
• For custom integration, embed the Payment Button using the POST /api/v2/payments API endpoint. Example:

<form action="/process-payment" method="POST">
  <label>Amount (KES):</label>
  <input type="number" name="amount" required>
  <label>Phone Number:</label>
  <input type="text" name="phone_number" required>
  <button type="submit">Pay with M-Pesa</button>
</form>

Backend code (e.g., Node.js) to trigger the STK Push:

const axios = require('axios');
app.post('/process-payment', async (req, res) => {
  const { amount, phone_number } = req.body;
  try {
    const response = await axios.post('https://backend.payhero.co.ke/api/v2/payments', {
      amount,
      phone_number,
      channel_id: 911,
      provider: 'm-pesa',
      external_reference: `INV-${Date.now()}`,
      customer_name: 'Customer',
      callback_url: 'https://your-site.com/callback'
    }, {
      headers: { 'Authorization': 'Basic YOUR_API_KEY', 'Content-Type': 'application/json' }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: 'Payment failed' });
  }
});

Test and Go Live: Use Pay Hero’s sandbox to test the button, then switch to live mode with your API credentials.

Monitor Transactions: Track payments and manage cash flow via the Pay Hero dashboard.