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.

Custom Code Section in Webflow Site Settings

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

Custom Code Section with PaddleJS snippet

...add the following Paddle JavaScript code.

<script src=""></script>
<script type="text/javascript">
  Paddle.Setup({ token: 'live_abc' })

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.

Adding CSS class to Button in Webflow

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

Change to Button Configuration in Webflow

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.

Custom Attributes in Button Configuration in Webflow

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.

Important note

If you are publishing to a subdomain for testing purposes instead of your real domain the checkout will open but show an error because that domain has not been verified by Paddle. You have to publish to your real domain in order to test the checkout.