# Plandalf docs Public implementation docs for Plandalf Offers, Timers, checkout surfaces, SDK setup, platform guides, API authentication, and webhook handoffs. Use the HTML pages for human reading and the `.md` URLs for agent-readable Markdown exports. ## Entrypoints - [Docs home](https://plandalf.com/docs) - [Component showcase](https://plandalf.com/docs/components/showcase) - [Component showcase Markdown](https://plandalf.com/docs/components/showcase.md) ## Pages ### Get started - [Introduction](https://plandalf.com/docs/introduction) - Learn Plandalf by adding one commerce primitive at a time: a button, an offer, purchase state, browser events, and backend handoff. Markdown: https://plandalf.com/docs/introduction.md - [Quickstart](https://plandalf.com/docs/quickstart) - Install the Plandalf SDK, open an offer from a button, and handle the completed checkout result. Markdown: https://plandalf.com/docs/quickstart.md - [Going live](https://plandalf.com/docs/going-live) - Run the final checks before a Plandalf offer accepts real customers and live payments. Markdown: https://plandalf.com/docs/going-live.md - [Components](https://plandalf.com/docs/components) - Browse Plandalf's Mintlify-style MDX component library for structure, attention, API docs, navigation, and visual context. Markdown: https://plandalf.com/docs/components.md - [Mintlify compatibility](https://plandalf.com/docs/components/mintlify-compatibility) - Map Mintlify MDX components to the Plandalf docs components that render the same authoring patterns in our theme. Markdown: https://plandalf.com/docs/components/mintlify-compatibility.md - [MDX component reference](https://plandalf.com/docs/components/reference) - Use Plandalf's Mintlify-style MDX components for implementation guides, API docs, examples, prompts, cards, tiles, and agent-aware content. Markdown: https://plandalf.com/docs/components/reference.md - [MDX component showcase](https://plandalf.com/docs/components/showcase) - A review surface for the Plandalf docs components that mirror the Mintlify-style documentation primitives. Markdown: https://plandalf.com/docs/components/showcase.md - [Steps](https://plandalf.com/docs/components/steps) - Use numbered steps to teach setup flows one action at a time, with anchors, custom numbers, icons, and heading-size control. Markdown: https://plandalf.com/docs/components/steps.md - [Tabs](https://plandalf.com/docs/components/tabs) - Use tabs to switch between implementation views such as HTML, React, API, and Agent. Markdown: https://plandalf.com/docs/components/tabs.md - [Text formatting](https://plandalf.com/docs/components/text) - Use Mintlify-style Markdown text formatting for prose, links, quotes, inline code, and anchors before reaching for heavier MDX components. Markdown: https://plandalf.com/docs/components/text.md - [Code formatting](https://plandalf.com/docs/components/code) - Use Mintlify-style code fence metadata for titled snippets, line numbers, wrapping, highlighted lines, focused lines, diffs, and expandable examples. Markdown: https://plandalf.com/docs/components/code.md - [Lists and tables](https://plandalf.com/docs/components/lists-tables) - Use Mintlify-style Markdown lists, task lists, nested lists, and tables for structured docs content without adding extra component chrome. Markdown: https://plandalf.com/docs/components/lists-tables.md - [Code groups](https://plandalf.com/docs/components/code-groups) - Use code groups for language choices, framework variants, and synced implementation examples. Markdown: https://plandalf.com/docs/components/code-groups.md - [Tabs and code groups](https://plandalf.com/docs/components/tabs-code-groups) - Use tabs and code groups for language, framework, platform, and implementation choices that should stay synchronized across a docs page. Markdown: https://plandalf.com/docs/components/tabs-code-groups.md - [Headings](https://plandalf.com/docs/components/headings) - Render Mintlify-style explicit Heading components in Plandalf MDX without rewriting imported section structure. Markdown: https://plandalf.com/docs/components/headings.md - [Columns](https://plandalf.com/docs/components/columns) - Use columns for short side-by-side explanations that are easier to compare than read sequentially. Markdown: https://plandalf.com/docs/components/columns.md - [Panel](https://plandalf.com/docs/components/panel) - Use panels for supporting context that can sit in the right rail or inline with the page. Markdown: https://plandalf.com/docs/components/panel.md - [Accordions](https://plandalf.com/docs/components/accordions) - Use Mintlify-style accordions to group optional details without interrupting the main implementation path. Markdown: https://plandalf.com/docs/components/accordions.md - [Expandables](https://plandalf.com/docs/components/expandables) - Use expandables for optional field details, nested properties, and advanced notes. Markdown: https://plandalf.com/docs/components/expandables.md - [Badge](https://plandalf.com/docs/components/badge) - Use badges for compact status labels, version markers, and small inline metadata in Plandalf docs. Markdown: https://plandalf.com/docs/components/badge.md - [Banner](https://plandalf.com/docs/components/banner) - Use banners for page-level notices that need to sit above the reader's current task. Markdown: https://plandalf.com/docs/components/banner.md - [Callouts](https://plandalf.com/docs/components/callouts) - Use Mintlify-style callouts and semantic aliases for notes, tips, checks, warnings, danger states, and custom emphasis. Markdown: https://plandalf.com/docs/components/callouts.md - [Attention components](https://plandalf.com/docs/components/attention) - Use Mintlify-style callouts, banners, badges, updates, frames, snippets, and tooltips without turning docs into card-heavy pages. Markdown: https://plandalf.com/docs/components/attention.md - [Update component](https://plandalf.com/docs/components/updates) - Use Mintlify-style Update blocks for changelog notes, release entries, and docs change history. Markdown: https://plandalf.com/docs/components/updates.md - [Update](https://plandalf.com/docs/components/update) - Use update blocks for release notes, docs changelog entries, and filterable component changes. Markdown: https://plandalf.com/docs/components/update.md - [Frames](https://plandalf.com/docs/components/frames) - Use frames to present screenshots, media, and browser-like previews with captions. Markdown: https://plandalf.com/docs/components/frames.md - [Snippet](https://plandalf.com/docs/components/snippet) - Use snippets for compact copyable values and reusable MDX fragments inside prose, tables, callouts, and setup instructions. Markdown: https://plandalf.com/docs/components/snippet.md - [Reusable snippets](https://plandalf.com/docs/components/reusable-snippets) - Reuse MDX fragments and compact copyable values across Plandalf docs with Mintlify-style authoring patterns. Markdown: https://plandalf.com/docs/components/reusable-snippets.md - [Tooltips](https://plandalf.com/docs/components/tooltips) - Use tooltips for short inline definitions that should not interrupt the reader's path. Markdown: https://plandalf.com/docs/components/tooltips.md - [Prompt](https://plandalf.com/docs/components/prompt) - Use Prompt blocks for copyable AI instructions with concrete constraints, source files, links, and verification steps. Markdown: https://plandalf.com/docs/components/prompt.md - [Prompt, disclosure, and views](https://plandalf.com/docs/components/disclosure-views) - Use Mintlify-style prompt blocks, accordions, expandables, views, and visibility controls for progressive docs and agent-aware content. Markdown: https://plandalf.com/docs/components/disclosure-views.md - [View](https://plandalf.com/docs/components/view) - Use views to switch between human, agent, framework, and implementation-specific versions of the same guidance. Markdown: https://plandalf.com/docs/components/view.md - [Visibility](https://plandalf.com/docs/components/visibility) - Use visibility controls to keep human-readable docs and agent-only context separate without duplicating pages. Markdown: https://plandalf.com/docs/components/visibility.md - [Cards](https://plandalf.com/docs/components/cards) - Use Mintlify-style cards for links, icons, images, horizontal rows, CTAs, and callout-toned containers. Markdown: https://plandalf.com/docs/components/cards.md - [Tiles](https://plandalf.com/docs/components/tiles) - Use tiles for dense icon grids, component catalogs, and compact next-page navigation. Markdown: https://plandalf.com/docs/components/tiles.md - [Cards and tiles](https://plandalf.com/docs/components/cards-tiles) - Use cards for high-value links and tiles for dense visual grids, with icons, images, CTAs, arrows, and callout-style variants. Markdown: https://plandalf.com/docs/components/cards-tiles.md - [Fields](https://plandalf.com/docs/components/fields) - Use fields to document parameters, request body properties, headers, attributes, nested objects, defaults, and validation notes. Markdown: https://plandalf.com/docs/components/fields.md - [Responses](https://plandalf.com/docs/components/responses) - Document API response structures and fields with Mintlify-compatible response components. Markdown: https://plandalf.com/docs/components/responses.md - [Response fields](https://plandalf.com/docs/components/response-fields) - Use response fields to describe API response objects, nested properties, and returned resource shapes. Markdown: https://plandalf.com/docs/components/response-fields.md - [Examples](https://plandalf.com/docs/components/examples) - Use request, response, and generic examples to keep copyable code beside the endpoint or concept a reader is viewing. Markdown: https://plandalf.com/docs/components/examples.md - [API fields and examples](https://plandalf.com/docs/components/api-fields-examples) - Use fields, response fields, request examples, and response examples to build Mintlify-style API docs with endpoint-aware right-rail samples. Markdown: https://plandalf.com/docs/components/api-fields-examples.md - [API playground pages](https://plandalf.com/docs/components/api-playground) - Build Mintlify-style API reference pages in Plandalf with endpoint metadata, request fields, response fields, examples, multiple responses, SDK samples, schema notes, visibility, and troubleshooting. API: POST /api/checkout/sessions. Markdown: https://plandalf.com/docs/components/api-playground.md - [Visual context components](https://plandalf.com/docs/components/visual-context) - Use Mintlify-style icons, Mermaid diagrams, color swatches, trees, frames, and images to explain implementation context. Markdown: https://plandalf.com/docs/components/visual-context.md - [Images and embeds](https://plandalf.com/docs/components/image-embeds) - Add screenshots, media-library images, videos, and iframe embeds to Plandalf docs with Mintlify-style MDX patterns. Markdown: https://plandalf.com/docs/components/image-embeds.md - [Files](https://plandalf.com/docs/components/files) - Link downloadable files, static assets, and reference artifacts from Plandalf docs without breaking the reading flow. Markdown: https://plandalf.com/docs/components/files.md - [Color](https://plandalf.com/docs/components/color) - Use color swatches to document Plandalf palette values, tokens, and theme-aware pairs. Markdown: https://plandalf.com/docs/components/color.md - [Icons](https://plandalf.com/docs/components/icons) - Use inline icons and icon-led surfaces to make component grids and docs actions easier to scan. Markdown: https://plandalf.com/docs/components/icons.md - [Mermaid](https://plandalf.com/docs/components/mermaid) - Use Mermaid diagrams for small flows, system relationships, and decision paths. Markdown: https://plandalf.com/docs/components/mermaid.md - [Tree](https://plandalf.com/docs/components/tree) - Use trees to show file structures, docs layouts, and nested implementation folders. Markdown: https://plandalf.com/docs/components/tree.md ### SDK setup - [Install the SDK](https://plandalf.com/docs/sdk/install) - Load the Plandalf browser SDK on any site, app, page builder, or framework route. Markdown: https://plandalf.com/docs/sdk/install.md - [Configure the SDK](https://plandalf.com/docs/sdk/configure) - Configure frame style, test mode, size, promos, identity, session continuity, metadata, properties, and close behavior. Markdown: https://plandalf.com/docs/sdk/configure.md - [Identify customers](https://plandalf.com/docs/sdk/identity) - Attach Plandalf checkout sessions to logged-in users with email identity or signed JWT identity. Markdown: https://plandalf.com/docs/sdk/identity.md - [Live events](https://plandalf.com/docs/sdk/events) - Use FlowHandle events and DOM events to observe checkout starts, purchases, completions, and cancellations. Markdown: https://plandalf.com/docs/sdk/events.md - [Session continuity](https://plandalf.com/docs/sdk/session-continuity) - Control whether draft checkout sessions resume in a tab, across the browser, from a token, or from a fresh session. Markdown: https://plandalf.com/docs/sdk/session-continuity.md - [Gates](https://plandalf.com/docs/sdk/gates) - Use Plandalf gates to check access before showing a checkout, upgrade, or protected product action. Markdown: https://plandalf.com/docs/sdk/gates.md - [React SDK](https://plandalf.com/docs/sdk/react) - Use PlandalfProvider and React hooks to present offers, identify customers, check gates, and render checkout experiences. Markdown: https://plandalf.com/docs/sdk/react.md ### Offers - [Offers overview](https://plandalf.com/docs/offers/overview) - Understand Plandalf Offers: hosted checkout pages, embedded checkout flows, products, prices, add-ons, order bumps, upsells, save offers, and purchase context. Markdown: https://plandalf.com/docs/offers/overview.md - [Create your first offer](https://plandalf.com/docs/offers/create) - Create a checkout offer that can be hosted, embedded, tested, and connected to follow-up workflows. Markdown: https://plandalf.com/docs/offers/create.md - [Templates](https://plandalf.com/docs/offers/templates) - Use offer templates to start from a proven checkout structure instead of building every page from scratch. Markdown: https://plandalf.com/docs/offers/templates.md - [Design your checkout](https://plandalf.com/docs/offers/design) - Customize offer pages, blocks, themes, mobile behavior, and brand details without changing your site embed code. Markdown: https://plandalf.com/docs/offers/design.md - [Products](https://plandalf.com/docs/offers/products) - Attach products and prices to offers so checkout sessions, invoices, and integrations carry clean catalog context. Markdown: https://plandalf.com/docs/offers/products.md - [Pricing models](https://plandalf.com/docs/offers/pricing) - Model one-time prices, subscriptions, tiered pricing, volume pricing, trials, discounts, and promo-driven price changes. Markdown: https://plandalf.com/docs/offers/pricing.md - [Add-ons and variants](https://plandalf.com/docs/offers/add-ons) - Let customers add related products, variants, upgrades, and optional line items during checkout. Markdown: https://plandalf.com/docs/offers/add-ons.md - [Multi-page flows](https://plandalf.com/docs/offers/multi-page-flows) - Split longer checkouts into focused pages for plan selection, buyer details, payment, upsells, and confirmation. Markdown: https://plandalf.com/docs/offers/multi-page-flows.md - [Add to your site](https://plandalf.com/docs/offers/add-to-site) - Add Plandalf offers to any site with declarative attributes or programmatic SDK calls. Markdown: https://plandalf.com/docs/offers/add-to-site.md - [Buy buttons](https://plandalf.com/docs/offers/buy-buttons) - Create buttons and links that open a Plandalf offer in the right frame with the right customer and promo context. Markdown: https://plandalf.com/docs/offers/buy-buttons.md - [Returning customers](https://plandalf.com/docs/offers/returning-customers) - Use identity and session continuity so returning customers can resume a checkout or buy with the right account context. Markdown: https://plandalf.com/docs/offers/returning-customers.md - [Hosted checkout](https://plandalf.com/docs/offers/hosted-checkout) - Plandalf's hosted checkout — managed URL, theme-able down to fonts and layout, with test and preview sessions. Markdown: https://plandalf.com/docs/offers/hosted-checkout.md - [Order bumps](https://plandalf.com/docs/offers/order-bumps) - Add a one-click companion product inside the same checkout, then test the selected line item, invoice, taxes, coupons, webhooks, and automation context. Markdown: https://plandalf.com/docs/offers/order-bumps.md - [Save offers](https://plandalf.com/docs/offers/save-offers) - Present a discount, plan switch, pause, or deadline-bound offer when a subscriber starts a cancellation path. Markdown: https://plandalf.com/docs/offers/save-offers.md ### Timers and promos - [Timers and promos overview](https://plandalf.com/docs/timers/overview) - Use Plandalf timers and promos to coordinate deadline campaigns across pages, emails, CTA links, and checkout prices. Markdown: https://plandalf.com/docs/timers/overview.md - [Countdown timers](https://plandalf.com/docs/timers/countdowns) - Embed countdown timers on pages and in email while keeping the timer connected to the campaign state. Markdown: https://plandalf.com/docs/timers/countdowns.md - [Create a promo](https://plandalf.com/docs/timers/create-promo) - Create a deadline promo that can drive countdowns, active tiers, redirect targets, and checkout price changes. Markdown: https://plandalf.com/docs/timers/create-promo.md - [Tiers and timing](https://plandalf.com/docs/timers/tiers) - Model campaign phases so each deadline window can change copy, CTA targets, and checkout prices. Markdown: https://plandalf.com/docs/timers/tiers.md - [CTA links and redirects](https://plandalf.com/docs/timers/cta-links) - Use promo links and participant references so campaign CTAs send each visitor to the right destination. Markdown: https://plandalf.com/docs/timers/cta-links.md - [Embedded promos](https://plandalf.com/docs/timers/embedded-promos) - Embed a promo countdown and a Plandalf checkout on the same page so deadline state and pricing stay aligned. Markdown: https://plandalf.com/docs/timers/embedded-promos.md - [Hosted landing pages](https://plandalf.com/docs/timers/hosted-landing-pages) - Use Plandalf-hosted promo pages when you want the campaign URL, deadline state, and checkout handoff in one place. Markdown: https://plandalf.com/docs/timers/hosted-landing-pages.md - [Promo reporting](https://plandalf.com/docs/timers/reporting) - Track promo participants, tier state, CTA clicks, checkout handoff, and paid outcomes for deadline campaigns. Markdown: https://plandalf.com/docs/timers/reporting.md ### Affiliates - [Affiliates overview](https://plandalf.com/docs/affiliates/overview) - Use Plandalf attribution context to carry referral data from campaign links into checkout sessions and invoices. Markdown: https://plandalf.com/docs/affiliates/overview.md - [Affiliate attribution](https://plandalf.com/docs/affiliates/attribution) - Capture partner, referral, and campaign references with URL parameters, SDK metadata, and checkout events. Markdown: https://plandalf.com/docs/affiliates/attribution.md ### Platforms - [Platforms overview](https://plandalf.com/docs/platforms/overview) - Choose the right install path for Plandalf across custom HTML, React, Next.js, Webflow, Shopify, WordPress, Stripe, and PayPal. Markdown: https://plandalf.com/docs/platforms/overview.md - [Custom HTML](https://plandalf.com/docs/platforms/custom-html) - Install Plandalf on any HTML page with one script tag, checkout attributes, inline mounts, and optional promo widgets. Markdown: https://plandalf.com/docs/platforms/custom-html.md - [React app](https://plandalf.com/docs/platforms/react-app) - Install Plandalf in a React app with checkout attributes, the browser SDK, or the React provider and hooks. Markdown: https://plandalf.com/docs/platforms/react-app.md - [Next.js](https://plandalf.com/docs/platforms/nextjs) - Use Plandalf from Next.js App Router or Pages Router with next/script, client components, identity, and checkout attributes. Markdown: https://plandalf.com/docs/platforms/nextjs.md - [Webflow](https://plandalf.com/docs/platforms/webflow) - Add Plandalf checkouts, inline embeds, and promo countdowns to Webflow with custom code and Webflow custom attributes. Markdown: https://plandalf.com/docs/platforms/webflow.md - [Shopify](https://plandalf.com/docs/platforms/shopify) - Use Plandalf beside Shopify for focused offers, campaign pages, paid upgrades, deadline promos, and checkout flows outside the native cart. Markdown: https://plandalf.com/docs/platforms/shopify.md - [WordPress](https://plandalf.com/docs/platforms/wordpress) - Add Plandalf checkout buttons, inline embeds, countdown widgets, and customer identity to WordPress pages. Markdown: https://plandalf.com/docs/platforms/wordpress.md - [Stripe](https://plandalf.com/docs/platforms/stripe) - Connect Stripe as the payment account behind Plandalf offers, then test checkout, products, prices, and payout behavior before going live. Markdown: https://plandalf.com/docs/platforms/stripe.md - [PayPal](https://plandalf.com/docs/platforms/paypal) - Offer PayPal as a payment option on Plandalf checkouts alongside cards and your broader offer flow. Markdown: https://plandalf.com/docs/platforms/paypal.md ### API - [API authentication](https://plandalf.com/docs/api/authentication) - Authenticate protected Plandalf API requests, confirm the active user, and understand which organization the API will use. API: GET /api/users/me. Markdown: https://plandalf.com/docs/api/authentication.md - [SDK checkout API](https://plandalf.com/docs/api/sdk-checkout) - Understand the public checkout endpoints the Plandalf SDK calls for offer loading, session creation, session lookup, mutations, and discounts. Markdown: https://plandalf.com/docs/api/sdk-checkout.md - [Catalog API](https://plandalf.com/docs/api/catalog) - Read catalog products, product plans, and related product metadata from the protected Plandalf API. Markdown: https://plandalf.com/docs/api/catalog.md - [Webhooks](https://plandalf.com/docs/api/webhooks) - Start Plandalf automations from generated catch URLs or send outbound HTTP requests from automation actions. API: POST /hooks/catch/{sequence}/{trigger}. Markdown: https://plandalf.com/docs/api/webhooks.md - [Developer API reference](https://plandalf.com/docs/api/reference) - Reference the main SDK methods, HTML attributes, FlowHandle events, and protected API authentication model. Markdown: https://plandalf.com/docs/api/reference.md ### Components - [Mermaid diagrams](https://plandalf.com/docs/components/mermaid-diagrams) - Mintlify-style alias for Plandalf Mermaid component docs. Markdown: https://plandalf.com/docs/components/mermaid-diagrams.md - [Changelogs compatibility route](https://plandalf.com/docs/create/changelogs) - Mintlify-compatible route for Plandalf changelog and update authoring docs. Markdown: https://plandalf.com/docs/create/changelogs.md - [Code formatting compatibility route](https://plandalf.com/docs/create/code) - Mintlify-compatible route for Plandalf code formatting docs. Markdown: https://plandalf.com/docs/create/code.md - [Files compatibility route](https://plandalf.com/docs/create/files) - Mintlify-compatible route for Plandalf file authoring docs. Markdown: https://plandalf.com/docs/create/files.md - [Images and embeds compatibility route](https://plandalf.com/docs/create/image-embeds) - Mintlify-compatible route for Plandalf image and embed authoring docs. Markdown: https://plandalf.com/docs/create/image-embeds.md - [Lists and tables compatibility route](https://plandalf.com/docs/create/list-table) - Mintlify-compatible route for Plandalf list and table formatting docs. Markdown: https://plandalf.com/docs/create/list-table.md - [Personalization compatibility route](https://plandalf.com/docs/create/personalization) - Mintlify-compatible route for Plandalf visibility and audience-specific docs authoring. Markdown: https://plandalf.com/docs/create/personalization.md - [Redirects compatibility route](https://plandalf.com/docs/create/redirects) - Mintlify-compatible route for Plandalf docs redirect and alias handling. Markdown: https://plandalf.com/docs/create/redirects.md - [Reusable snippets compatibility route](https://plandalf.com/docs/create/reusable-snippets) - Mintlify-compatible route for Plandalf reusable snippet authoring docs. Markdown: https://plandalf.com/docs/create/reusable-snippets.md - [Text formatting compatibility route](https://plandalf.com/docs/create/text) - Mintlify-compatible route for Plandalf text formatting docs. Markdown: https://plandalf.com/docs/create/text.md ## Navigation source Navigation is generated from Plandalf docs content and grouped to match the public sidebar.