Adding Paddle Checkout to a Webflow Site

Webflow eCommerce does not support Paddle a checkout / payment provider (yet), but that doesn't mean you can't use Paddle to sell your digital products (and even subscriptions) from a Webflow based site (and you don't need the Webflow eCommerce package at all).

Step 1: Add Paddle to the page header

Head to the "Pages" section in the left navigation and find the page you want to add Paddle too. Click on the little cog to open the page settings.

Scroll down to a section called "Custom Code" and just beneath the label "Inside tag" ...

...add the following Paddle JavaScript code.

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

Replace the live_abc with your own vendor id</b> <b>that you can find on your Paddle authentication page.

Remeber to click Save when you are done.

Step 2: Add the buy button

Next, assuming you have already added a "buy" button on your page (if not just create a new component in webflow), click on the button to open the styling menu. In the style selector add a class called paddle_button.

Next click on the "cog" icon to view the button configuration.

Scroll down to the section "Custom attributes" section, click the plus icon (1) and type "data-product" in name (2) and for the value (3) enter the product id of the product you created in your Paddle Catalog. To make sure Webflow saves the settings just click on the whitespace (4). The entry should then appear in the list.

Add another custom attribute using the plus icon and for name use "data-theme" and for the value just type "none" (without the quotes). That will disable the Paddle styling on your button and make it look like the rest of the site.

That's it, you are now selling your product on webflow with Paddle.