• Get Started
• Pre-Approved Loan
• Health Insurance
• Personalised Offer
• Purchase Intent
• Guides
• Reference
• Playground
• Help - Status and Support
• Changelog

WhatsApp Business Platform

​

Use Case Guide: Get leads for a pre-approved loan / credit card

​

Intro and Overview

• Resent user-specific options, which can then be customised by a user
• Build user selections and input fields to collect data from a user
• Create a mechanism to confirm the user’s identity, in this case by asking for their date of birth (could be by uploading a photo or a document etc.).
• Confirm the Flow has been completed, both in the Flow and with a follow up message.
• Publish, Send, and Monitor your Flow

​

Getting Started

• Completed prerequisites for building Flows.
• A Glitch account

​

Flows JSON Template

​

Here is your pre-approved loan

​

Loan amount

​

₹ 7,20,000

​

Tenure

​

48 months

​

Create new flow from a template

1. In the Flows section of WhatsApp Manager click on the Create Flow button in the top right corner.
2. In the Create page, fill in the details for the pre-approved loan Flow:
   • Name - Type Pre-Approved Loan, or choose another name you like.
   • Categories - Select Lead generation.
   • Template - Choose Pre-Approved Loan. You can further customize the template to suit your use case.
3. Click Create to create Flow.

• Flow JSON Overview

​

Configure Demo Backend on Glitch

​

1. Remix (fork) Glitch endpoint

​

2. Setup encryption key

1. Generate the public-private key pair by running the command below in the Glitch terminal. Replace YOUR_PASSPHRASE with your designated passphrase. Access the Glitch terminal by clicking the TERMINAL tab at the bottom of the page a run following command: node src/keyGenerator.js YOUR_PASSPHRASE
2. Copy the passphrase and private key and paste them to the .env file ( Make sure to add quotes around values). Click on the file labeled .env on the left sidebar, then click on ✏️ Plain text on top. Do not edit it directly from the UI, as it will break your key formatting.
3. After you set the environment variables, copy the public key that you generated and upload the public key via the Graph API.

​

3. Set endpoint URI

1. At the top right of the Glitch page, click on Share and copy the Live Site URL from the displayed modal.
2. Head to the Flow Builder and in the Flow Builder click on the three dot menu in top right corner of the screen. Select Setup under the Endpoint section.
3. A popup will appear, allowing you to configure the endpoint URI, business phone number, and app on Meta for Developers. Save the Live Site URL copied from the Glitch into the first step of modal.

​

4. Set App Secret (optional)

• Detailed code walk through for demo backend
• Implementing endpoint for Flows for full details on how to build production endpoint

​

Testing and Debugging

​

Debug flow using the interactive preview

1. Trigger the interactive preview by clicking on settings menu in the Preview section of the Flow Builder and enabling Interactive mode toggle.
2. In the modal that appears, select the phone number, enter any string as Flow token and choose the Request data option under Request data on the first screen. This sends a request to the endpoint to retrieve data for the first screen.

​

Send draft flow to your device

• Flow Testing and debugging guide

​

Publishing

• All validation errors and publishing checks have been resolved.
• The Flow meets the design principles of WhatsApp Flows
• The Flow complies with WhatsApp Terms of Service, the WhatsApp Business Messaging Policy and, if applicable, the WhatsApp Commerce Policy

​

Sending

• Template messages - these do not require a 24-hour customer service window to be open between you and the message recipient before the message can be sent.
• Interactive Flow messages - these can only be sent to a user when a customer service window is open between you and the user.

​

Receiving flow response

​

Monitoring

• Metrics Dashboard in WhatsApp Account Manager
  • Navigate to Flow section of Whatsapp Account Manager and click on any published flow with the endpoint. You will be presented with a Details page with a Performance Metrics Dashboard.
• Metrics API
  • All the data presented in the Details page is also available to be queried through Flows Metrics API.
• Quality Webhooks
  • You should also subscribe to Flows Quality Webhooks to be updated in real time about the statuses and performance of your business’ Flows.

​

Next Steps

​

Overview of demo backend

​

server.js

const { APP_SECRET, PRIVATE_KEY, PASSPHRASE, PORT = "3000" } = process.env;

if (!PRIVATE_KEY) {
  throw new Error('Private key is empty. Please check your env variable "PRIVATE_KEY".');
}

if(!isRequestSignatureValid(req)) {
// Return status code 432 if request signature does not match.
// To learn more about return error codes visit: https://developers.facebook.com/docs/whatsapp/flows/reference/error-codes#endpoint_error_codes
  return res.status(432).send();
}

let decryptedRequest = null;
try {
  decryptedRequest = decryptRequest(req.body, PRIVATE_KEY, PASSPHRASE);
} catch (err) {
  console.error(err);
  if (err instanceof FlowEndpointException) {
    return res.status(err.statusCode).send();
  }
  return res.status(500).send();
}

const { aesKeyBuffer, initialVectorBuffer, decryptedBody } = decryptedRequest;
console.log("💬 Decrypted Request:", decryptedBody);

const screenResponse = await getNextScreen(decryptedBody);
console.log("👉 Response to Encrypt:", screenResponse);

res.send(encryptResponse(screenResponse, aesKeyBuffer, initialVectorBuffer));

​

encryption.js

​

keyGenerator.js

​

flow.js

const { screen, data, version, action, flow_token } = decryptedBody;

• A data_exchange request signified by a data_exchange action
• An error notification request signified by a data.error element
• A health check request signified by a ping action

​

Health check and Error handler

// handle health check request
if (action === "ping") {
    return {
        version,
        data: {
            status: "active",
        },
    };
}

// handle error notification
if (data?.error) {
    console.warn("Received client error:", data);
    return {
        version,
        data: {
            acknowledged: true,
        },
    };
}

​

INIT handler

// handle initial request when opening the flow and display LOAN screen
if (action === "INIT") {
  return {
    ...SCREEN_RESPONSES.LOAN,
  };
}

​

data-exchange handlers

// Handles user selecting UPI or Banking selector
if (data.payment_mode != null) {
  return {
    ...SCREEN_RESPONSES.DETAILS,
    data: {
      is_upi: data.payment_mode == "UPI",
      is_account: data.payment_mode == "Bank",
    },
  };
}

return {
  ...SCREEN_RESPONSES.SUMMARY,
  data: {
    // copy initial screen data then override specific fields
    ...SCREEN_RESPONSES.SUMMARY.data,
    amount: data.amount,
    tenure: data.tenure,
    emi: data.emi,
    payment_mode: "Transfer to " + payment_string,
  },
};