Developer Guide

Setup Automated Checkout Flow for WhatsApp Cart Orders

Pratik Patil

May 27, 2025

8 min read

Custom Checkout Integration Overview

This guide helps you set up an automated checkout flow for WhatsApp cart orders with your custom payment gateway or e-commerce store. You'll learn how to receive order webhooks from Chatterswift, generate payment links, and send checkout templates to customers.

Process WhatsApp orders with your custom payment gateway

Automated Checkout Flow

Customer Places Order

Customer adds products to WhatsApp cart and places an order

Webhook Triggered

Chatterswift sends order data to your webhook endpoint

Generate Payment Link

Your system creates a payment link using your payment gateway

Send Checkout Template

Send WhatsApp template with payment link to customer

Payment & Confirmation

Customer completes payment and receives confirmation message

Prerequisites

Requirements Checklist

Active Chatterswift account with WhatsApp Business API
Payment gateway account (Razorpay, Stripe, PayPal, etc.)
Web server to host webhook endpoint
Basic knowledge of REST APIs and webhooks
SSL certificate for webhook URL (HTTPS required)

Chatterswift Requirements

Active Chatterswift subscription
WhatsApp Business API number
Facebook Commerce Product catalog configured

Payment Gateway Requirements

Payment gateway API access
Payment link generation capability
Webhook notifications for payment status

Setting Up Your Webhook Endpoint

Webhook Payload Structure

When a customer places an order through WhatsApp cart, Chatterswift will send the following payload to your webhook:

javascriptJSON

{
    "event": "whatsapp_order_received",
    "timestamp": "2025-05-27T09:34:03.528Z",
    "order": {
      "id": "wamid.ABGGFlCGg0cvAgo6cHbBhfK5760V",
      "catalogId": "the-catalog_id",
      "type": "order",
      "text": "text-message-sent-along-with-the-order",
      "productItems": [
        {
          "productRetailerId": "product_123",
          "quantity": 2,
          "itemPrice": 29.99,
          "currency": "USD"
        }
      ]
    },
    "customer": {
      "name": "Kerry Fisher",
      "phoneNumber": "16315551234",
      "waId": "16315551234"
    },
    "metadata": {
      "phoneNumberId": "phone-number-id",
      "messageId": "wamid.ABGGFlCGg0cvAgo6cHbBhfK5760V",
      "messageTimestamp": "1603069091",
      "receivedAt": "2025-05-27T09:34:03.529Z"
    }
  }

Create Webhook Endpoint

Create a POST endpoint on your server to receive order webhooks. Example implementation:

javascriptNode.js

// Node.js/Express example
  app.post('/webhook/orders', async (req, res) => {
    try {
      const { event, order, customer } = req.body;
      
      if (event === 'whatsapp_order_received') {
        // Process the order
        const paymentLink = await generatePaymentLink(order, customer);
        await sendCheckoutTemplate(customer.phoneNumber, paymentLink);
      }
      
      res.status(200).json({ success: true });
    } catch (error) {
      console.error('Webhook error:', error);
      res.status(500).json({ error: 'Internal server error' });
    }
  });

Configure Webhook in Chatterswift

Login to your Chatterswift dashboard
Navigate to Connect → Webhook Settings
Enable Order Notifications
Add your Endpoint URL (must be HTTPS)
Save and test the webhook

Payment Gateway Integration

Generate Payment Links

When you receive an order webhook, generate a payment link using your payment gateway. Here's an example with Razorpay:

javascriptExample

// Razorpay payment link generation
  async function generatePaymentLink(order, customer) {
    const totalAmount = order.productItems.reduce((sum, item) => 
      sum + (item.itemPrice * item.quantity), 0
    );
  
    const paymentLinkData = {
      amount: totalAmount * 100, // Amount in paise
      currency: 'INR',
      description: `Order #${order.id}`,
      customer: {
        name: customer.name,
        contact: customer.phoneNumber
      },
      notify: {
        sms: false,
        email: false
      },
      callback_url: `${process.env.BASE_URL}/payment/callback`,
      callback_method: 'get'
    };
  
    const response = await razorpay.paymentLink.create(paymentLinkData);
    return response.short_url; // Returns: https://rzp.io/i/xyz123
  }

Payment Gateway Examples

Razorpay: https://razorpay.me/order/1457943

Stripe: https://buy.stripe.com/payment_link_id

PayPal: https://paypal.me/merchant/amount

Handle Payment Callbacks

Set up endpoints to handle payment success/failure notifications:

Setup webhooks from your payment gateway or e-commerce store
Handle payment success to send order confirmation message to customers
Implement payment failure to send abandoned checkout message to customers

Creating WhatsApp Templates

Checkout Template Setup

Create Template in Chatterswift

Go to Manage Templates → Create New Template
Add header, body, and button components
Use dynamic variables for personalization
Provide standard payment link with dynamic variable at the end in dynamic URL buttons

Example Checkout Template:

Header: Hi {{1}}, your order is ready!

Body: Thank you for your order, {{1}}. Please complete your payment to confirm your purchase.

Button: Pay Now → https://razorpay.me/order/{{1}}

Sending Templates via API

Use the Chatterswift API to send checkout templates with dynamic payment links:

javascriptSend template

// Send checkout template
  async function sendCheckoutTemplate(phoneNumber, paymentId) {
    const templateData = {
      recipient: phoneNumber,
      templateName: "checkout_template",
      parameters: {
        header: [customer.name],
        body: [customer.name],
        button: [paymentId] // Unique payment ID
      }
    };
  
    const response = await fetch('https://backend.chatterswift.com/api/v1/connect/send-template', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': process.env.CHATTERSWIFT_API_KEY
      },
      body: JSON.stringify(templateData)
    });
  
    return response.json();
  }

API Response

Successful template sending returns:

javascriptResponse

{
    "statusCode": 200,
    "data": {
      "messageContent": "checkout_template",
      "whatsappMessageId": "wamid.HBgMOTE5MDQ5OTEwNjE2FQIAERgSQzM4NzY4NEFGRUE2MTE1RDg2AA==",
      "status": "sent"
    },
    "message": "Message sent successfully",
    "success": true
  }

Testing & Deployment

Testing Your Integration

Test Flow Steps:

Set up a test webhook endpoint (use ngrok for local testing)
Configure webhook URL in Chatterswift dashboard
Create a test order through WhatsApp cart
Verify webhook payload is received correctly
Check payment link generation
Test template sending functionality
Complete test payment and verify confirmation

Development Tips

Use ngrok for local webhook testing: eg. ngrok http 3000
Enable payment gateway sandbox mode for testing
Log all webhook payloads for debugging
Test with different order scenarios (single/multiple items)
Verify template approval status before going live

Production Deployment

Security Checklist

Use HTTPS for all endpoints
Validate webhook signatures
Secure API keys in environment variables
Implement rate limiting

Monitoring

Set up webhook failure alerts
Monitor payment success rates
Track template delivery status
Log order processing times

Frequently Asked Questions

Can I customize the payment link format?

Yes, the payment link format depends on your payment gateway. You can customize the template to include any dynamic parameters your gateway supports.

How do I handle failed payments?

Set up payment gateway webhooks to receive failure notifications. You can then send follow-up templates or create new payment links for retry attempts.

What payment gateways are supported?

Any payment gateway that supports payment link generation can be integrated. Popular options include Razorpay, Stripe, PayPal, Square, and regional providers.

How long do payment links remain valid?

Payment link validity depends on your gateway settings. Most providers allow you to set expiration times (typically 24-48 hours for e-commerce orders).