Multi-page flows

Split longer checkouts into focused pages for plan selection, buyer details, payment, upsells, and confirmation.

Use a multi-page flow when one screen would overload the buyer.

Good fits

  • application or intake checkout
  • plan selection before payment
  • paid upgrade with user context
  • event registration with attendee details
  • checkout followed by an upsell or save offer

SDK behavior

The SDK still opens the offer by slug:

await plandalf.present("application-flow", {
  frame: "fullscreen"
});

For embedded flows, mount the offer into a stable container:

<div data-plandalf-mount="application-flow"></div>

Close protection

For longer flows, add close confirmation.

plandalf.present("application-flow", {
  confirmClose: () => window.confirm("Leave this application?")
});

Builder context

Build the offer beside the docs.

These pages explain the setup details. The matching product surfaces show where products, prices, checkout layout, invoices, and automation live in the app.

The Numi offer editor with product, theme, automation, invoice, and checkout controls.
The offer editor connects checkout layout, products, prices, invoice settings, and automation.
The Numi checkout element palette showing content, interactive, and selling blocks.
Checkout templates expose reusable blocks for product lists, add-ons, forms, buttons, and offer content.
The Numi offer editor automation tab showing sequence controls beside the checkout canvas.
Automation is configured beside the offer so post-purchase work stays attached to the sale.

Feature detail