--- description: "Add a Plandalf hosted checkout button to Carrd, understand the Pro Standard embed requirement, and verify the published buyer journey." --- # 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.
Carrd starting-point picker with Blank Page available

Start from a blank page so the checkout test is easy to identify.

  1. Choose Blank Page.
### 2\. Dismiss the editor introduction Review the toolbar labels, then choose **Okay, got it!** to enter the canvas.
Carrd editor introduction explaining the toolbar

The introduction identifies Add, Preview, Mobile View and Publish before you edit.

  1. Choose Okay, got it!
### 3\. Open the Add menu Choose the **+** control. The menu shows both **Buttons** and **Embed**.
Carrd Add menu with Buttons available and Embed locked

Use Buttons for a hosted checkout link. Embed is the inline SDK path.

  1. Open Add with the plus control.
  2. Choose Buttons for the hosted link.
  3. Embed is locked without Pro Standard.
### 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.
Carrd dialog saying Embed is available with Pro Standard

Carrd currently puts its Embed element behind Pro Standard.

  1. Confirm the required plan.
  2. Choose Maybe Later to avoid upgrading.
### 5\. Add a button Return to **Add → Buttons**, then choose **Add**. Carrd places a button on the canvas and opens its settings.
Carrd Buttons panel with a new button on the canvas

Add one normal button before changing its label and destination.

  1. Choose Add.
  2. The new button appears on the canvas.
### 6\. Name the button Expand the button row and set **Label** to a direct action such as **Join the workshop** or **Open checkout**.
Carrd button settings with Join the workshop as the label

Use a label that tells the visitor they are opening checkout.

  1. Enter the button label.
### 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.
Carrd button URL field containing a Plandalf test checkout address

Paste the complete Plandalf test-mode checkout URL into Carrd's URL field.

  1. Paste the complete test link.
### 8\. Apply the button fields Choose **Done** and confirm that the intended label appears on the canvas.
Carrd canvas showing a Join the workshop button

The canvas confirms the button label, but it does not prove the destination works.

  1. Confirm the button 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.
Carrd Publish panel requiring account details

An authenticated Carrd account is required before the test page can be published.

  1. The Publish panel requires an account.
  2. Use Log in for an existing test 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](https://plandalf.com/docs/product-guides/checkouts/add-to-site): ```html
``` 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](https://plandalf.com/docs/product-guides/checkouts/hosted-checkout) - [Add checkout to your site](https://plandalf.com/docs/product-guides/checkouts/add-to-site) - [Create an Offer](https://plandalf.com/docs/product-guides/checkouts/create) - [Custom HTML](https://plandalf.com/docs/product-guides/platforms/custom-html) ## Integration overview See [Carrd integration details](https://plandalf.com/platforms/carrd) for the supported connection paths and current constraints. Source: https://plandalf.com/docs/product-guides/platforms/carrd