From db96b6fd4f62cf5e90dcc64146fbbd850b28a989 Mon Sep 17 00:00:00 2001 From: patcapulong Date: Fri, 20 Feb 2026 14:36:35 -0800 Subject: [PATCH 1/5] feat: add Flow Builder iframe embed page - New flow-builder.mdx with iframe embedding the visualizer - Bidirectional theme sync via postMessage with theme-request handshake - Full-bleed fixed container (desktop 112px, mobile 120px offset) - Hide Mintlify chrome: header, page title, pagination, breadcrumb text - Replace breadcrumb with hamburger + (0, 0, 0) label - Prevent outer page scroll when flow-builder is active - Kill Mintlify's aspect-ratio wrapper on iframe - Flash prevention via document.write in head.raw Co-Authored-By: Claude Opus 4.6 --- mintlify/docs.json | 13 ++++++- mintlify/flow-builder.mdx | 66 +++++++++++++++++++++++++++++++ mintlify/style.css | 82 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 mintlify/flow-builder.mdx diff --git a/mintlify/docs.json b/mintlify/docs.json index b5ef95f..790fa69 100644 --- a/mintlify/docs.json +++ b/mintlify/docs.json @@ -61,6 +61,17 @@ } ] }, + { + "tab": "Build your flow", + "groups": [ + { + "group": "Build your flow", + "pages": [ + "flow-builder" + ] + } + ] + }, { "tab": "Payouts & B2B", "groups": [ @@ -298,7 +309,7 @@ }, "footer": {}, "head": { - "raw": "", + "raw": "", "links": [ { "rel": "preload", diff --git a/mintlify/flow-builder.mdx b/mintlify/flow-builder.mdx new file mode 100644 index 0000000..1807f76 --- /dev/null +++ b/mintlify/flow-builder.mdx @@ -0,0 +1,66 @@ +--- +title: "Flow Builder" +description: "Design your payment flow and get the API calls for your exact use case" +mode: "custom" +--- + +export const FlowBuilderEmbed = () => { + const [src, setSrc] = React.useState(null); + + React.useEffect(() => { + const isDark = document.documentElement.classList.contains('dark'); + setSrc('http://localhost:3000/?embed=true&theme=' + (isDark ? 'dark' : 'light')); + + let ignoreNextMutation = false; + + const sendTheme = () => { + const t = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; + const iframe = document.getElementById('flow-builder-iframe'); + if (iframe && iframe.contentWindow) { + iframe.contentWindow.postMessage({ type: 'theme-sync', theme: t }, '*'); + } + }; + + const handleMessage = (e) => { + if (e.data && e.data.type === 'theme-request') { + sendTheme(); + return; + } + if (e.data && e.data.type === 'theme-sync') { + const isDark = document.documentElement.classList.contains('dark'); + const wantsDark = e.data.theme === 'dark'; + if (isDark !== wantsDark) { + ignoreNextMutation = true; + document.documentElement.classList.toggle('dark'); + } + } + }; + window.addEventListener('message', handleMessage); + + const obs = new MutationObserver(() => { + if (ignoreNextMutation) { ignoreNextMutation = false; return; } + sendTheme(); + }); + obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); + + return () => { + window.removeEventListener('message', handleMessage); + obs.disconnect(); + }; + }, []); + + if (!src) return null; + + return ( +