Plandalf

Buy buttons

Create buttons and links that open a Plandalf offer in the right frame with the right customer and promo context.

Buy buttons are the simplest way to add Plandalf to an existing page.

HTML button

<button data-plandalf-present="pro-plan">
  Buy Pro
</button>
<a href="/pricing" data-plandalf-present="pro-plan">
  Upgrade
</a>

The SDK intercepts the click and opens checkout instead of following the link.

Programmatic button

document.querySelector("#upgrade").addEventListener("click", async () => {
  const result = await plandalf.present("pro-plan", {
    frame: "modal",
    user: customerJwt
  });

  if (result.status === "complete") {
    window.location.href = "/account";
  }
});

Promo-aware button

<button
  data-plandalf-present="summit-ticket"
  data-plandalf-apply-promo="early-bird"
>
  Buy before the price changes
</button>

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.
Offers productHosted checkout, buy buttons, products, prices, coupons, bumps, upsells, invoices, and save offers.Hosted checkoutThe hosted buying surface for offers.ProductsThe commercial objects attached to an offer.PricesOne-time, subscription, package, tiered, and variant pricing.Checkout Optimization LabA builder stack for improving checkout mechanics.

Feature detail