Carrd

Carrd can send a visitor to a Plandalf hosted checkout from a normal button. Carrd’s Embed element can also carry the Plandalf SDK and an inline checkout, but Carrd currently requires Pro Standard for that element.

Warning. What this replay proves The screenshots below come from Carrd’s real anonymous editor. They prove the button setup and show the current account and plan gates. The draft was not published, the Embed path was not available, and the test checkout did not have a verified payment-provider sandbox. Complete the final verification steps before using this on a live site.

Before you start

Prepare:

• a Carrd account and a test site you are allowed to publish;
• Carrd Pro Standard or a higher plan if you need an inline checkout or countdown;
• a published Plandalf Offer and its Test mode link from Share → Hosted link; and
• a confirmed processor sandbox and matching test price before submitting a payment.

Use the normal button path first. It works without adding JavaScript to Carrd and gives you a smaller surface to test.

Add a hosted checkout button

1. Choose a starting point

Open Carrd and choose Choose a Starting Point. Select Blank Page for a clean integration test.

2. Dismiss the editor introduction

Review the toolbar labels, then choose Okay, got it! to enter the canvas.

3. Open the Add menu

Choose the + control. The menu shows both Buttons and Embed.

4. Check the Embed requirement

Choose Embed only if you need the SDK or an inline checkout. Carrd opens its Pro Standard requirement. Choose Maybe Later to continue with the hosted-link button without starting an upgrade.

5. Add a button

Return to Add → Buttons, then choose Add. Carrd places a button on the canvas and opens its settings.

6. Name the button

Expand the button row and set Label to a direct action such as Join the workshop or Open checkout.

7. Add the Plandalf checkout URL

Paste the Offer’s Test mode link into URL. Use the exact address copied from Plandalf; do not rebuild it from the Offer name. The replay used a local test host, so replace it with your public checkout address before publishing.

8. Apply the button fields

Choose Done and confirm that the intended label appears on the canvas.

9. Open the Publish panel

Choose the toolbar Publish control. In a signed-out editor, Carrd asks for account details before it can save or publish the site. Sign in to the designated test account rather than creating an accidental second account.

Add an inline checkout or countdown

After confirming that the Carrd site has Pro Standard, add an Embed element and install the same markup described in Add checkout to your site:

<script src="https://YOUR_ACCOUNT.plandalf.dev/js/plandalf-sdk.js" async></script>
<div data-plandalf-mount="YOUR_PUBLISHED_OFFER_SLUG" data-plandalf-mode="test"></div>

For a countdown, use the current Promo embed copied from Plandalf. Keep the script on the page once; do not add a second copy for each element.

The Embed flow still needs a fresh authenticated replay and screenshots from a Carrd plan that exposes the element. Do not treat the locked menu or the code sample as proof that it ran.

Verify the complete journey

1. Publish the page to the intended test domain.
2. Open it in a signed-out browser session and select the checkout button.
3. Confirm the Offer, product, amount, currency and test-mode indicator before entering payment details.
4. Complete a sandbox purchase and match the successful provider payment to the paid Plandalf invoice.
5. Verify the promised receipt, access, download or automation separately.
6. Repeat with a declined sandbox payment and confirm it does not create a paid invoice or grant delivery.
7. Test the published page at a phone width. If you use Embed, test that placement separately from the hosted-link button.

Related docs

• Hosted checkout
• Add checkout to your site
• Create an Offer
• Custom HTML

Integration overview

See Carrd integration details for the supported connection paths and current constraints.