WhatsApp Flows Complete Developer Guide: Building High-Converting Native In-Chat Forms

{
  "version": "3.0",
  "screens": [
    {
      "id": "LEAD_DETAILS_SCREEN",
      "title": "Request Custom Quote",
      "data": {},
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextInput",
            "name": "full_name",
            "label": "Full Legal Name",
            "required": true,
            "input-type": "text"
          },
          {
            "type": "TextInput",
            "name": "phone_number",
            "label": "WhatsApp Phone Number",
            "required": true,
            "input-type": "phone"
          },
          {
            "type": "Dropdown",
            "name": "service_type",
            "label": "Service Required",
            "required": true,
            "data-source": [
              { "id": "crm_setup", "title": "WhatsApp CRM & Meta WABA Setup" },
              { "id": "capi_sync", "title": "Meta Conversions API (CAPI) Integration" },
              { "id": "ai_agent", "title": "Autonomous Gemini 2.5 Flash Agent" }
            ]
          },
          {
            "type": "Footer",
            "label": "Submit & Connect with Specialist",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "full_name": "${form.full_name}",
                "phone_number": "${form.phone_number}",
                "service_type": "${form.service_type}"
              }
            }
          }
        ]
      }
    }
  ]
}

import crypto from 'crypto';

interface EncryptedFlowRequest {
  encrypted_aes_key: string;
  encrypted_flow_data: string;
  initial_vector: string;
}

export function decryptFlowPayload(
  body: EncryptedFlowRequest, 
  privateKeyPem: string
): any {
  // 1. Decrypt AES key with RSA Private Key
  const decryptedAesKey = crypto.privateDecrypt(
    {
      key: privateKeyPem,
      padding: crypto.constants.RSA_PKCS1_OAEP_PADDING,
      oaepHash: 'sha256',
    },
    Buffer.from(body.encrypted_aes_key, 'base64')
  );

  // 2. Decrypt Flow Data with AES-128-GCM
  const flowDataBuffer = Buffer.from(body.encrypted_flow_data, 'base64');
  const iv = Buffer.from(body.initial_vector, 'base64');
  
  // Extract 16-byte auth tag from end of ciphertext
  const authTag = flowDataBuffer.subarray(flowDataBuffer.length - 16);
  const cipherText = flowDataBuffer.subarray(0, flowDataBuffer.length - 16);

  const decipher = crypto.createDecipheriv('aes-128-gcm', decryptedAesKey, iv);
  decipher.setAuthTag(authTag);

  const decryptedJson = Buffer.concat([
    decipher.update(cipherText),
    decipher.final(),
  ]).toString('utf8');

  return JSON.parse(decryptedJson);
}