Introduction

Plandalf helps you put a buying action on a website, collect payment through your connected payment stack, and carry the purchase context into the work that happens next.

The path

1. Place one buying action

   The first visible change on your site.

   Put a button or link on a page. That is the only thing the customer sees before Plandalf opens checkout.

2. Open an offer

   The checkout surface behind that button.

   The button opens an Offer. The offer owns the checkout layout, products, prices, add-ons, payment options, redirects, and completion behavior.

3. Attach buyer context

   Only add this when your site already knows the visitor.

   If the visitor is logged in, pass identity so the purchase can connect back to an account, membership, course seat, or customer record.

4. React to checkout state

   The browser learns what happened next.

   Listen for SDK events or the checkout result so your page can redirect, unlock UI, record analytics, or show the next action.

5. Hand work to your backend

   Move from page behavior to business workflow.

   When the browser is no longer enough, use authenticated API calls or webhooks to route purchase context into fulfillment, CRM, email, or internal systems.

Words you learn on the way

Do not memorize the whole platform before the first button works. These terms show up in order as your build grows.

First build

The first build should do only three things. Everything else can wait.

1. Load the SDK

   Make Plandalf available on the page.

   Add the browser SDK or framework wrapper on the page that owns the buying action.

2. Open one offer

   Use a test offer first.

   Keep checkout mode, identity, and promo behavior simple until the button works.

3. Handle the result

   React only after checkout answers.

   Decide what happens when checkout completes, dismisses, or fails.

<button data-buy>Buy now</button>
<script src="https://cdn.plandalf.com/sdk.js" defer></script>

document.querySelector("[data-buy]").addEventListener("click", async () => {
  const result = await window.Plandalf.openOffer({
    offerId: "offer_123",
    mode: "modal"
  });

  if (result.status === "completed") {
    window.location.href = "/thanks";
  }
});

Choose one next layer

After the first button works, choose the next page by the problem in front of you. Do not read all of these in order.

Common web builds

These are examples, not the first thing you need to learn. Pick one after the basic button makes sense.

Where to go next

If you are new, go to the quickstart. If you already understand the first button, go to Offers overview and learn the checkout surface itself.