fix(baileys): render the PIX button on Android/iOS, not only on WhatsApp Web

src/api/integrations/channel/whatsapp/helpers/interactiveMessage.helper.ts

@@ -15,6 +15,36 @@ export function buildInteractiveBizNode(): BinaryNode {
   };
 }
 
+/**
+ * Stanza nodes for the PIX button (`payment_info`).
+ *
+ * The generic `mixed` node above is enough for WhatsApp Web, but Android/iOS
+ * only render the payment card when the native_flow is named `payment_info`
+ * and, in 1:1 chats, when the stanza also carries `<bot biz_bot="1"/>`.
+ * Without them the message is delivered but nothing shows up on the phone.
+ */
+export function buildPixBizNodes(jid: string): BinaryNode[] {
+  const nodes: BinaryNode[] = [
+    {
+      tag: 'biz',
+      attrs: {},
+      content: [
+        {
+          tag: 'interactive',
+          attrs: { type: 'native_flow', v: '1' },
+          content: [{ tag: 'native_flow', attrs: { name: 'payment_info' } }],
+        },
+      ],
+    },
+  ];
+
+  if (!/@(g\.us|newsletter|broadcast)$/.test(jid)) {
+    nodes.push({ tag: 'bot', attrs: { biz_bot: '1' } });
+  }
+
+  return nodes;
+}
+
 /**
  * Biz node específico para `listMessage` legado.
  * Necessário para o WhatsApp Web/Desktop renderizar a lista — o moderno

src/api/integrations/channel/whatsapp/whatsapp.baileys.service.ts

@@ -139,7 +139,7 @@ import { Label } from 'baileys/lib/Types/Label';
 import { LabelAssociation } from 'baileys/lib/Types/LabelAssociation';
 import { spawn } from 'child_process';
 import { isArray, isBase64, isURL } from 'class-validator';
-import { createHash } from 'crypto';
+import { createHash, randomBytes } from 'crypto';
 import EventEmitter2 from 'eventemitter2';
 import ffmpeg from 'fluent-ffmpeg';
 import FormData from 'form-data';
@@ -157,7 +157,12 @@ import { PassThrough, Readable } from 'stream';
 import { v4 } from 'uuid';
 
 import { BaileysMessageProcessor } from './baileysMessage.processor';
-import { buildInteractiveBizNode, buildListBizNode, toNativeFlowButton } from './helpers/interactiveMessage.helper';
+import {
+  buildInteractiveBizNode,
+  buildListBizNode,
+  buildPixBizNodes,
+  toNativeFlowButton,
+} from './helpers/interactiveMessage.helper';
 import { useVoiceCallsBaileys } from './voiceCalls/useVoiceCallsBaileys';
 
 export interface ExtendedIMessageKey extends proto.IMessageKey {
@@ -3671,21 +3676,27 @@ export class BaileysStartupService extends ChannelStartupService {
         throw new BadRequestException('PIX button cannot be mixed with other button types');
       }
 
+      // Mobile clients need the `order_details` params, `messageVersion` and a
+      // `messageSecret` to render the payment card; WhatsApp Web renders it
+      // either way. Do NOT wrap it in `documentWithCaptionMessage`: mobile
+      // accepts the wrapper, but Web then shows nothing.
       const message: proto.IMessage = {
         interactiveMessage: {
+          ...(data?.title ? { body: { text: data.title } } : {}),
           nativeFlowMessage: {
             buttons: [
               {
                 name: this.mapType.get('pix'),
                 buttonParamsJson: this.toJSONString(data.buttons[0]),
               },
             ],
-            messageParamsJson: JSON.stringify({
-              from: 'api',
-              templateId: v4(),
-            }),
+            messageParamsJson: JSON.stringify({ native_flow_name: 'order_details', version: 1 }),
+            messageVersion: 1,
           },
         },
+        messageContextInfo: {
+          messageSecret: randomBytes(32),
+        },
       };
 
       return await this.sendMessageWithTyping(
@@ -3699,7 +3710,7 @@ export class BaileysStartupService extends ChannelStartupService {
           mentioned: data?.mentioned,
         },
         false,
-        [buildInteractiveBizNode()],
+        buildPixBizNodes(createJid(data.number)),
       );
     }