Skip to main content

WABB integration with Razorpay

Guide to integrate Razorpay with WABB for payment links and confirmations.

Updated this week

This guide explains how to integrate Razorpay with WABB, enabling you to generate dynamic payment links and send them via WhatsApp, along with automated confirmation messages based on payment status.

Integrating Razorpay with WABB allows you to:

  1. Generate customized payment links for each user with a predefined amount.

  2. Automatically send payment confirmation or failure messages through WhatsApp using Razorpay webhooks.

This integration improves the user experience by streamlining the payment process and reducing manual follow-ups.

Part 1: Generate Dynamic Razorpay Payment Links in WABB

Prerequisites

  • An active Razorpay account

  • Access to WABB with flow creation permissions

  • A basic understanding of WABB flow blocks and custom variables

Step 1: Generate Razorpay API Keys

  1. Log in to your Razorpay Dashboard.

  2. Navigate to Account & Settings → API Keys.

  3. Select the environment:

    • Test Mode for testing the integration (does not charge real money).

    • Live Mode for real payments.

  4. Click Generate Key.

  5. Copy and save the Key ID and Key Secret securely.

For reference: Razorpay API Key Documentation

Step 2: Encode API Keys in Base64

Razorpay requires authentication via Basic Auth, which uses a Base64 encoded string.

  1. Go to https://www.base64encode.org/

  2. Enter your credentials in the format:

    KEY_ID:KEY_SECRET

  3. Click Encode and copy the resulting string.

  4. Prefix it with Basic (with a space) and save for use in the integration.

Example:


If your encoded string is dGVzdF9rZXk6c2VjcmV0, then the value for the header will be:

Basic dGVzdF9rZXk6c2VjcmV0

Step 3: Convert Rupees to Paise

Razorpay expects the amount in paise, not rupees. For instance, ₹205.25 must be sent as 20525 * 100 = 2052500.

To do this in WABB:

  1. Ensure that Amount is stored as a Number variable.

  2. Use an Action Block with:

    • Action: Set/Update new field value

    • Operation Type: Use Custom Formula

    • Formula: {Amount} * 100

This ensures Razorpay receives the amount in the correct format.

Step 4: Configure Razorpay Webhook Integration in WABB

  1. Drag an Integration Block into your flow where the payment request should be initiated.

  2. Click on the block and choose Webhook Integration.

  3. Set:

    • Request Type: POST

    • Request URL:

      https://api.razorpay.com/v1/payment_links/

Headers

Add the following header:

  • Key: Authorization

  • Value: Basic [your_base64_encoded_credentials]

Make sure there is a space after Basic.

Body (Minimal Example)

{ 
"amount": "{FinalAmount}", 
"currency": "INR", 
"customer": { "name": "{full_name}",
              "contact": "{phone}" } 
}

Explanation:

  • {FinalAmount}: Variable containing amount in paise

  • {full_name}: User’s name (can be a custom or system field)

  • {phone}: User’s mobile number with country code

  • Refer to Razorpay's Payment Links API for optional fields.

Step 5: Testing the Integration

Select a Contact for Testing

  1. In the Integration Panel, go to the Contact for Testing section.

  2. Choose a contact that already has:

    • Amount

    • full_name

    • phone

If values are missing:

  1. Go to Contacts in WABB.

  2. Select or create a contact.

  3. Click the + button in Variables section to add missing fields and populate them.

Example:

  • Amount: 2750

Once done, return to the Integration panel and click Get Test Request.

Step 6: Review Razorpay API Response

A successful API call will return a response similar to:

Step 7: Store and Use the Payment Link

  1. In the Response Mapping section:

    • JSONPath: short_url

    • Map it under "Response Mapping" section to a custom variable like PaymentLink to store this link.

2. Save the configuration.

Step 8: Send the Link in a WhatsApp Message

  1. Drag a Content Block to your flow.

  2. Add a message template like this:

Hi {full_name}, Please click the link below to complete your payment: {PaymentLink}

The dynamic link will be included for the user to proceed with the payment. They just need to click on the link and complete the payment.

Part 2: Sending Payment Confirmation Messages Using Razorpay Webhooks

Step 1: Create Webhook in Razorpay Dashboard

  1. Go to Accounts & Settings > Webhooks

  2. Click + Add New Webhook

  3. Fill in the form:

    • Webhook URL: Generated from WABB’s webhook panel

    • Secret: Recommended for security but not a required field

    • Alert Email: Your admin or support email

    • Events to select:

      • payment.captured – when payment is successful

      • payment.failed – when payment fails

  4. Click Create Webhook

For reference: Razorpay Webhooks Documentation

Step 2: Simulate a Payment

To test the webhook:

  • Use your test Razorpay environment

  • Complete a test payment

This will trigger Razorpay to send a payload to WABB.

Step 3: Configure Webhook Receiver in WABB

  1. Open WABB and navigate to the Webhook Panel

  2. View the payload received from Razorpay

  3. Map the fields and turn it on. Check the steps here.

For failed payments, you can set up a condition to send a different message.

Troubleshooting Tips

Issue

Possible Cause

Solution

Authorization error

Invalid Base64 format

Ensure Basic prefix is added before encoded string

Amount incorrect

Not converted to paise

Multiply by 100 using a custom formula

Empty Razorpay response

Missing test contact variables

Add required variables (amount, phone) in the contact

Webhook not working

Incorrect URL or domain

Cross check the urls

With this integration, you can:

  • Send personalized Razorpay payment links on WhatsApp

  • Automatically confirm payments to customers

  • Improve payment turnaround time and customer experience.

Did this answer your question?