Plandalf
Browse Product guides

Add to your site

Publish your checkout, then open its Share tab and choose On your site. Choose your platform under Install to get the organization script and placement instructions. Use Trigger button for an overlay or Inline embedded for a checkout inside your page.

Install the organization script

Copy the script from Share and add it once to every page where checkout should open. Replace the example host with your organization’s actual host.

<script async src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>

The script binds HTML attributes after loading, including elements added later. The following snippets use the checkout’s offer slug, not its product ID. For package-based JavaScript and React alternatives, see Add checkout to your site.

Present an offer

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

Use Frame in Share to choose how a trigger opens checkout. For example, a wide side panel uses:

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

Mount an inline checkout

<div data-plandalf-mount="pro-plan"></div>

Programmatic equivalent: create <div id="checkout"></div> first. Do not also add data-plandalf-mount to that container, or both the scanner and your code can mount it.

const handle = plandalf.mount("#checkout", "pro-plan", {
  promo: "early-bird"
});

Call this after the browser SDK has loaded. The JavaScript and React examples show complete package-based alternatives and explain the mount handle.

Add a promo widget

<div data-plandalf-promo="early-bird"></div>

Use data-plandalf-apply-promo on buttons or mounts when the promo should affect checkout pricing.

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

Test on a development site

  1. Open Settings → Advanced and connect Stripe (Test) if it is not connected yet.
  2. Under Test domains, add your development host, such as localhost, 127.0.0.1, or staging.example.com, then select Save. Use a hostname, without a scheme, port, or path. A wildcard such as *.ngrok.io matches its subdomains, not ngrok.io itself.
  3. Load the embedded checkout from that site. Requests from a matching test domain use the Stripe test account unless your code explicitly requests live mode. Keep production domains out of this list.
  4. Confirm checkout is in test mode before completing a test payment. Open View test invoices in Advanced settings to check the resulting invoice, and verify the payment in the Stripe test account.

Adding data-plandalf-mode="test" or mode: "test" only requests test mode. Without a Stripe test account or an authorized test context, checkout can run live. See Hosted checkout for the hosted test link and preview behavior.

Before publishing your site, check the layout at phone widths, dismissal and reopening, discounts, and the buyer’s next step. Confirm payment and delivery on your server before granting paid access.

Feature detail