Boathouse logo

Adding Paddle Checkout to Your Website Using Carrd

Hi, I'm Alex, and welcome to the Boathouse Paddle Series! Here, we discuss everything you need to know about Paddle. In this post, I'll guide you through adding a Paddle checkout with a simple buy button to your website. We'll be using a CMS, a content management system called Carrd, but the principles apply to other platforms like Webflow, Squarespace, or Framer. The elements I'll use are generally quite similar across these platforms.

Step 1: Include the Paddle JS Library

First things first, let's add the Paddle JavaScript library. This is the backbone of what we'll be doing. To get started:

  1. Visit the Paddle Developer Help Site: Paddle Developer
  2. Navigate to "Include and Initialize Paddle.js" at the top of the page.
  3. Copy the script tag provided there.
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>

In Carrd, you'll need to add an embed element to include this script. This element might be called an HTML element or a raw content element depending on your CMS.

Step 2: Set Up the Environment

Next, we need to connect the page to your Paddle account. Paddle has a snippet of code prepared for this. Here’s what you’ll need for a sandbox account (testing environment):

<script>
  Paddle.Environment.set("sandbox")
  Paddle.Initialize({
    token: "test_changeme",
  })
</script>

If you’re using a production account, you don’t need the first line, as it's automatically set to production. Remember that for a production account, you need a verified domain.

Getting Your Client-Side Token

  1. Head over to your Paddle account.
  2. Navigate to Developer Tools > Authentication.
  3. Create a client-side token, name it (e.g., "test"), and copy the token.
  4. Replace the token in the script.

Step 3: Add a Buy Button

Now, let’s add a button and link it to one of your products.

Creating the Button in Carrd

Add a button element and position it where you want it on the page. Give it a title, such as "Buy".

Linking Button to a Product

There are two ways to connect your button to checkout - via JavaScript or HTML attributes. We'll go the simpler HTML route.

  1. CSS Class: Add a CSS class called paddle_button to your button. Paddle checks for this to initialize.
<button class="paddle_button">Buy</button>
  1. You check out using a price ID. Here’s how you find it:
  1. Adding an attribute to link to the price id

In Carrd, under attributes, you'll add your fetched price ID with the attribute name "data-items".

<button class="paddle_button" data-items=[{"priceId":"pri_01j2bhn4cd8e8aenwns061j877","quantity":1}]>
  Buy
</button>

Now, publish your website and test it. When you press the "Buy" button, a Paddle checkout should pop up with the product linked.

Summary

Setting up a Paddle checkout on your site is straightforward. By following these steps, you can easily integrate a seamless purchasing experience for your visitors. For any further details, always refer to the Paddle documentation.

You might also like articles from our blog: