# Introduction
Learn Plandalf by adding one commerce primitive at a time: a button, an offer, purchase state, browser events, and backend handoff.
Source: /docs/introduction
Last modified: 2026-06-20
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.


> **Start smaller than you think**
>

  Your first build is one button that opens one test Offer. Add identity, timers, events, and webhooks only after that path makes sense.


## The path


### 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.


### Open an offer

The checkout surface behind that button.


    The button opens an [Offer](/docs/offers/overview). The offer owns the checkout layout, products, prices, add-ons, payment options, redirects, and completion behavior.


### 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.


### React to checkout state

The browser learns what happened next.


    Listen for [SDK events](/docs/sdk/events) or the checkout result so your page can redirect, unlock UI, record analytics, or show the next action.


### 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](/docs/api/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.


  - [Offer](/docs/offers/overview): The checkout surface opened from your page.
  - [Product](/docs/offers/products): The thing being sold inside an offer.
  - [Price](/docs/offers/pricing): How that product is charged.
  - [Timer](/docs/timers/overview): A deadline or promo state before checkout.
  - [Event](/docs/sdk/events): A browser signal from checkout.
  - [Webhook](/docs/api/webhooks): The backend handoff after purchase.


## First build

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


### Load the SDK

Make Plandalf available on the page.


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


### Open one offer

Use a test offer first.


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


### Handle the result

React only after checkout answers.


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


### Smallest useful button


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

```js open-offer.js
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";
  }
});
```


> **Keep the first pass boring**
>

  Do not start with identity, webhooks, promo tiers, embedded checkout, or API automation unless your first page already needs them. The first win is understanding what opens and what comes back.


## 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.


  - [Need a checkout surface?](/docs/offers/create): Create the offer.
  - [Need a different frame?](/docs/sdk/configure): Choose modal, slideout, fullscreen, or inline.
  - [Need account context?](/docs/sdk/identity): Attach a logged-in customer.
  - [Need page behavior?](/docs/sdk/events): Listen for checkout events.
  - [Need urgency?](/docs/timers/overview): Add a deadline or promo.
  - [Need backend work?](/docs/api/webhooks): Route purchase context downstream.


## Common web builds

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


> **Webflow sales page**
>

    Add a buy button and countdown widget to a campaign page without rebuilding checkout. Start with [Webflow](/docs/platforms/webflow).


> **Next.js app upgrade**
>

    Identify a logged-in user, open an upgrade offer, and redirect after completion. Start with [Next.js](/docs/platforms/nextjs).


> **Email deadline campaign**
>

    Preserve `pf_ref` from an email link, show the active promo, and apply the right checkout price. Start with [timer CTA links](/docs/timers/cta-links).


> **Shopify VIP offer**
>

    Sell a focused add-on, service, event, or digital upgrade outside the native cart. Start with [Shopify](/docs/platforms/shopify).


> **WordPress membership**
>

    Generate a signed user token and open checkout with account context. Start with [WordPress](/docs/platforms/wordpress).


> **Custom HTML page**
>

    Paste the SDK script and use declarative attributes on plain HTML. Start with [Custom HTML](/docs/platforms/custom-html).


> **Ask an agent to implement the first pass**
>

  Add Plandalf to my page with one buy button. Use a test offer, open checkout in a modal, and redirect to `/thanks` only when checkout completes.


## Where to go next

If you are new, go to the [quickstart](/docs/quickstart). If you already understand the first button, go to [Offers overview](/docs/offers/overview) and learn the checkout surface itself.