Plandalf
Browse Product guides

Create your first offer

An offer is the checkout experience you build in Plandalf. The app calls these Checkouts. Create the offer before embedding it: the SDK opens it by its public offer slug.

Create a draft

  1. Open Checkouts, select Create New Checkout, and choose Simple Checkout.
  2. Select Use this template to open the editor.
  3. Open Settings, give the checkout a name you can recognize, and select Save changes.
  4. Wait for All changes saved, then reload and confirm the name persists. Keep the checkout in Draft while configuring it.

If saving reports a validation error or stays on Saving, resolve that before continuing. Reloading an unsaved editor can lose changes.

Add your product

In the editor’s Products tab, select Create a new product. Enter the product name and a unique lookup key, then select Create product. If you already have a product, select that product instead.

Create product dialog in the real checkout editor, with a dedicated Vue integration test product and lookup key.

A disposable local product used to replay these setup steps. Use your own product name and lookup key.

  1. Enter the product name.
  2. Create the product to continue to its price.

Create a price

The new-product flow opens Add a price. For a simple one-time test purchase:

  1. Enter a price name and a unique lookup key.
  2. Choose List Price and One time.
  3. Enter the amount and choose the currency. The example uses 25.00 USD.
  4. Check the final lookup key shown by the form, then select Create price.
  5. Confirm that the price is attached to the checkout and that the order summary shows the intended quantity and total.
Add a price dialog showing List Price, One time, 25.00 USD and the Create price button.

The observed setup uses a USD 25 one-time price. Subscription and usage pricing need their own payment replay.

  1. Choose One time for this example.
  2. Check both the amount and currency before creating the price.

Check the draft

Use the editor preview to check the product, quantity, currency and total. Review the buyer fields and the next step after purchase. Wait for All changes saved before leaving the editor.

Saved draft checkout with a required USD 25 product, an order summary totalling USD 25 and a Connect Stripe prompt.

This local draft saved successfully and contains its product. Connect Stripe is still visible, so payment setup is not complete.

  1. Keep the offer in Draft while completing setup.
  2. Connect the intended test payment account before attempting payment.

Note. What was replayed These three screenshots record a fresh local draft, product and price created on 2 October 2026. The draft persisted after a reload. This account had no payment connection, so this setup replay stops before payment. It uses a separate USD 25 fixture from the USD 50 purchase shown in the Vue integration guide. Local editor fixes were required for the template to save; verify your deployed editor before relying on the same steps.

Test and publish

Use Preview to review the interface. For payment testing, connect Stripe (Test) in Settings → Advanced, then open Share → Test mode link while signed in as a member of the organization. Configure Test domains for embedded development pages. A mode: "test" setting alone does not guarantee a sandbox session; verify the resolved mode before entering payment details.

Connect the payment provider’s test account and follow Testing before you publish. Check the actual provider mode and price binding before submitting a sandbox payment. Match the buyer confirmation to a paid Plandalf invoice and the provider’s successful test payment.

Also test the buyer’s next step: access, download, redirect or automation delivery. A successful payment alone does not establish delivery. Test purchases skip sequences unless Run on test purchases is enabled for that sequence. Once the complete journey passes, publish the offer. In Share, choose Hosted link to copy the checkout URL or On your site to get the script and button or inline embed.

The examples below assume your organization SDK is already loaded and use placeholders. See Add to your site for installation.

Open it from code

await plandalf.present("your-offer-slug", { mode: "test" });

Open it from HTML

<button data-plandalf-present="your-offer-slug" data-plandalf-mode="test">
  Open test checkout
</button>

For a complete JavaScript or React example, follow Sell your first offer.

Feature detail