How to Make M-Pesa Payments on Shopify Seamless with Pay Hero (Direct to Bank, Paybill, or Till)

Running a Shopify store in Kenya comes with a unique challenge: automating M-Pesa payments. Manual verification is time-consuming, and disconnected payment channels can hurt your cash flow.

Pay Hero offers a robust solution that allows you to link your Shopify store directly to your preferred payment channels—whether that is a Paybill, Till Number, Bank Account, or Wallet. The best part? The system automatically updates your Shopify order status to “Paid” once the transaction is successful, ensuring a seamless experience for both you and your customer.

Here is your comprehensive guide to setting up Pay Hero V2 for Shopify.

Why Use Pay Hero for Shopify?

• Diverse Collections: You are not limited to one channel. You can link your store to receive payments directly into your specific bank account, Paybill, or Till number.
• Automatic Reconciliation: When a customer pays, Pay Hero communicates with Shopify to update the order status to “Paid” instantly. You no longer need to manually check your phone for SMS messages to confirm orders.
• Seamless Customer Journey: Customers are redirected back to your shop immediately after a successful payment.

Step-by-Step Integration Guide

Follow these five steps to link your Shopify store to Pay Hero.

Prerequisite

Ensure you have a verified and active Pay Hero account and that you have added your payment channels (Bank, Paybill, etc.) to the platform.

Step 1: Add Your Shop to Pay Hero

1. Log into your Pay Hero account and navigate to the Shopify menu.
2. Click Add Shop.
3. You will need to enter your Shop URL, Access Token, and a Description.
   • Shop URL: Go to your Shopify settings and copy the URL that ends with .myshopify.com. Ensure you add https:// to the beginning when pasting it into Pay Hero.
   • Access Token: This requires creating a custom app in Shopify (see Step 2 below).

Step 2: Generate the Access Token (Shopify Admin)

To allow Pay Hero to update your orders, you need to grant it permission via an Access Token.

1. In your Shopify Admin, go to Settings > Apps and sales channels > Develop apps.
2. Click Create an app. Name it “Hero” (or similar) and select yourself as the App developer.
3. Click Configure Admin API scopes.
4. Search for and verify the permissions (scopes) for Orders and Payments. You must ensure the app has permission to write_orders and read_orders. If unsure, you can check all scopes related to payments and orders to be safe.
5. Click Save, then go to the API credentials tab and click Install app.
6. Once installed, click Reveal token once. Copy this token immediately, as you won’t be able to see it again.
7. Go back to your Pay Hero dashboard, paste the token into the “Access Token” field, select your desired payment channel (e.g., NCBA Bank), and save.

Step 3: Create a Manual Payment Method

Now that the systems are linked, you need a way for customers to initiate the process at checkout.

1. In Shopify Settings, go to Payments.
2. Scroll down and choose Create custom payment method (Manual payment method).
3. Name the method: “Complete order to view payment instructions” (or something similar so the customer knows there is one more step).
4. Activate the payment method.

Step 4: Add the Payment Button (Using Checkout Blocks)

You need a button on your “Thank You” page that leads customers to the payment gateway.

1. Go to the Shopify App Store and install an app called Checkout Blocks (look for the green and yellow box icon).
2. In Pay Hero, view your connected shop to find your unique Payment Button URL.
3. Open the Checkout Blocks app and create a new block. Add a Button and a Text area.
   • Button Setup: Label it “Lipa na M-Pesa.” In the URL field, paste the Payment Button URL you copied from Pay Hero. You can add a phone icon for better visibility.
   • Text Instructions: Add text instructing the customer to “Copy the order confirmation number (starts with #) and click the button to pay”.
4. Save changes and click Add to Editor.
5. In the Shopify Editor (specifically on the Thank You page settings), add the “Dynamic Content” block you just created. Ensure the visibility settings allow it to be seen by everyone.

Step 5: The Customer Experience

Once setup is complete, here is how the flow works:

1. The customer places an order using the “Complete order to view payment instructions” method.
2. On the confirmation page, they will see your instructions and the Lipa na M-Pesa button.
3. They copy their Order Number (e.g., #1001), click the button, and paste the number into the Pay Hero gateway.
4. They enter their phone number and receive an STK prompt to enter their PIN.
5. Upon successful payment, they are redirected back to your store, and the order status in your Shopify Admin automatically updates to Paid.

Conclusion

By using Pay Hero, you remove the friction of manual payment tracking. Whether you are collecting to a bank or a till, the system handles the reconciliation for you, letting you focus on fulfilling orders.

Ready to streamline your collections? Log in to your Pay Hero account today to get started.

Video Guide