Adding Paddle Checkout to your Website

In order to allow your customer to pay you have to complete two simple steps. This is the same whether you are selling one-time products or a subscription. The only difference is mentioned below where you get your product id from in the Paddle dashboard.

The Paddle official instructions can be found here for one-time products and for subscriptions here, but this guide is designed to be simple for non-technical audience.

We also have <a href="/guides/using-paddle-with-webflow/adding-paddle-checkout-to-webflow">specific instructions for adding Paddle to a Webflow site here</a>.

Add the Paddle JavaScript

If you are using a CMS look for a section where you can add "scripts". This may be referred to as "Add before " or "Add in " or "Add at the bottom of the page".

In that box add the following code

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({ token: 'live_abc' })
</script>

Replace the number live_abc with the vendor id that is displayed in your account on the authentication page.

Add Paddle to buttons

Assuming you have already created a subscription or a product in the Paddle Dashboard copy the product id (for products) or the plan id (for subscriptions). You'll need it when you add the button.

Then on your product page where you describe the features you add a HTML button like this:

<button class="paddle_button" data-product="12345" data-theme="none">
  Buy/Subscribe
</button>

Replace the 12345 with the product or plan you copied from the Paddle dashboard.

The data-theme attribute will make this button look like the rest of your page (instead of a styled Paddle button).

That's it!

You can add as many buttons to a page as you want (e.g. if you have multiple products or subscriptions plans on the page), but you only add the "Paddle JavaScript" once to each page.

Next, react to Paddle events