Quickstart

This guide adds Plandalf checkout to any page with a script tag and one button.

Prerequisites

• A Plandalf account with an organization subdomain.
• An offer slug from the Offers editor.
• A live or test payment integration connected before you accept real payments.

Install the SDK

Add the stub before the SDK script. The stub lets you queue calls before the async SDK file finishes loading.

<script>
  // Queue SDK calls until the async Plandalf bundle is ready.
  window.plandalf = window.plandalf || function () {
    (window.plandalf.q = window.plandalf.q || []).push(arguments);
  };
</script>

<!-- Replace acme with your Plandalf organization subdomain. -->
<script src="https://acme.plandalf.com/js/plandalf-sdk.js" async></script>

Open an offer

Replace pro-plan with your offer slug.

<button id="buy-pro">Buy Pro</button>

<script>
  document.getElementById("buy-pro").addEventListener("click", async () => {
    // Open the published offer by slug and wait for the final checkout result.
    const result = await plandalf.present("pro-plan");

    // Redirect only after checkout completes successfully.
    if (result.status === "complete") {
      window.location.href = result.redirectUrl ?? "/thank-you";
    }
  });
</script>

plandalf.present() returns a FlowHandle. It behaves like a Promise, so await gives you the final checkout result. It also exposes .events for live purchase events and .close() for dismissing the frame programmatically.

Use declarative HTML

For simple buttons, you can skip custom JavaScript.

<button data-plandalf-present="pro-plan">
  Buy Pro
</button>

Add frame and mode options as attributes.

<button
  data-plandalf-present="pro-plan"
  data-plandalf-frame="slideout"
  data-plandalf-mode="test"
  data-plandalf-size="wide"
>
  Test checkout
</button>

<button
data-plandalf-present="pro-plan"
data-plandalf-frame="slideout"
data-plandalf-mode="test"
>
Buy Pro
</button>

const button = document.querySelector("[data-buy-pro]");

button.addEventListener("click", async () => {
// Open the offer and wait for either completion or dismissal.
const result = await plandalf.present("pro-plan", {
  frame: "slideout",
  mode: "test"
});

// Only treat completed checkout as a successful purchase.
if (result.status === "complete") {
  window.location.href = result.redirectUrl ?? "/thank-you";
}
});

export function BuyButton() {
async function openCheckout() {
  // present() resolves when the Plandalf frame finishes.
  const result = await window.plandalf.present("pro-plan", {
    frame: "modal",
    mode: "test"
  });

  // Keep fulfillment behind a completed checkout result.
  if (result.status === "complete") {
    window.location.assign(result.redirectUrl ?? "/thank-you");
  }
}

return <button onClick={openCheckout}>Buy Pro</button>;
}

Expected result

Clicking the button opens the offer in a Plandalf checkout frame. A completed checkout resolves with:

{
  status: "complete",
  session: {
    uuid: "ck_...",
    total: 2900,
    currency: "usd",
    customer: { email: "jane@example.com" }
  },
  customer: { email: "jane@example.com" },
  redirectUrl: "https://example.com/thanks"
}

Customer dismissal is not an exception:

{ status: "dismissed", reason: "cancel" }

Only real errors, such as network failures or an invalid offer slug, reject the Promise.

Next steps