ā˜€ļø

How to Easily Integrate Paddle Checkout in WordPress


If you have simple e-products like e-books, courses, software, images, etc… something you can sell digitally and deliver as a download — then you’ll want to learn more about this.

It’s a payment gateway that can make your life so much easier. This guide is half explaining what Paddle is and why you might want to use it — and half about how to implement Paddle Checkout in WordPress.

How does this sound:

  • Sell digital goods in just a few clicks
  • Very smooth, fluid, simple checkout process (like you see here)
  • No “local” liability (no customer data in your WordPress database)
  • Automatic delivery of the digital product
  • Billing and delivery support handled for you
  • Multi-lingual & Multi-currency
  • Supports credit card, PayPal, or Apple Pay
  • Handles receipts, and abandoned cart follow-up
  • Reporting and sales dashboard
  • Calculates, charges, AND remits global sales taxes/VAT

Sounds almost too good to be true doesn’t it? It isn’t.

It’s a payment gateway called Paddle. A service that handles the burden of global sales taxes/VAT, digital goods delivery, etc… so you can focus on your content and products.

Integrating Paddle with WordPress

While there are many ways of integrating Paddle with WordPress, using plugins like Easy Digital Downloads + WPSmartPay (or the standalone WPSmartPay) — there’s another way that frees you from the burden of storing customer data.

Paddle even frees you from storing the digital product on your hosting server or using a service like Dropbox or Amazon S3 (which typically have fees).

While integrating Paddle Checkout into WordPress is “easy,” there is some effort to getting it just right because getting JavaScript properly added to WordPress isn’t as easy as it should be.

In this guide I’ll show you how to get everything set up just right.

But before we get into the how-to, let’s go over what Paddle Checkout is and why you might like to use it.

Paddle Checkout is…

Paddle is the payment SaaS service, Paddle Checkout is their JavaScript-based checkout feature you can use to bring secure, easy-to-use sales checkout to your site.

Why use Paddle Checkout?

I’d like to follow this up with a series of questions.

  • Is your business relatively simple (i.e. you sell and deliver digital goods such as artwork, photos, ebooks, courses…)?
  • Would you like to have a smooth checkout experience for your customers?
  • How about legally sell to people outside the United States?

Reduce your sales burden

If you have some experience with selling digital goods using WordPress you may be wondering why not use Easy Digital Downloads (or the new WPSmartPay)?

Of course, you can. Those are great plugins and they do work well.

The key difference I think you’d enjoy about using Paddle Checkout directly is you free yourself of many burdens.

  • No downloads hosted on your server
  • You don’t have to design a checkout flow yourself
  • Delivery of the download and sales receipt done for you
  • Customer support for download & billing issues handled for you
  • Abandoned cart recovery done for you too
  • They collect and remit global sales taxes/VAT for you

Any Downsides?

There’s a lot of benefits you may be wondering what the downsides are. There are a few.

  • Your business must fit into this mold
  • You’re restricted on the types of business/goods (check Paddle’s guidance)
  • Paddle takes 5% + $.50 per transaction

Okay, enough going over Paddle and why you may enjoy their service, let’s start integrating it into WordPress.


HTML

The HTML in this case is a “buy button.” It’s the button a potential customer will click when they want to buy your digital product.

<a href="#!" class="buy-button" data-product="12345">Buy Now!</a>

Replace 12345 with the product ID you get from your Paddle dashboard after creating a new product there.

It will look something like this:

WPGP Shake Blocks plugin example showing Paddle product ID.

That’s pretty much it with the HTML. Unfortunately, you’ll have to use the HTML block and manually create this link for now because of the data-product attribute. The WordPress block editor does not have a way to add them (yet hopefully).

CSS

There actually isn’t any CSS necessary for this Paddle integration to work. But here is how I styled the button here on WPšŸ¹.

.buy-button {
    padding:.4em 1em;
    border-radius: 6px;
    background-color: #f62c58;
    cursor: pointer;
}

It’s very simple, of course feel free to change this however you want to fit your style.

With the structural stuff out of the way, it’s time for the JavaScript. This is where it starts to get interesting.

PHP

This is where things will start to become a bit more involved. You need the ability to edit the functions.php file in your (hopefully) child theme.

Enqueue Paddle Scripts

First you’ll need to get the paddle.js file into your WordPress. This can be done with a function in your functions.php file like so:

function enqueue_paddle_scripts()
{
    wp_register_script( 'paddle-js', 'https://cdn.paddle.com/paddle/paddle.js', null, null, true );
    wp_enqueue_script( 'paddle-js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_paddle_scripts' );

If you’ve never done any PHP/WordPress coding before, one thing to pay attention to is the function enqueue_paddle_scripts — it must match below it in the add_action hook.

Here we use WordPress’ built-in wp_enqueue_script() function to add the paddle.js file to our pages.

But there is more setup needed. You’ll need to provide some settings to the paddle.js file, so we’ll need to enqueue some more JavaScript. We’ll add to the previous function like so:

function enqueue_paddle_scripts()
{
    wp_register_script( 'paddle-js', 'https://cdn.paddle.com/paddle/paddle.js', null, null, true );
    wp_register_script( 'paddle-setup', plugins_url('/js/paddle-setup.js', __FILE__), null, null, true );

    $paddleSettings = [ 
        'vendor_id' => '[YOUR VENDOR ID]'
    ];
    wp_localize_script( 'paddle-setup', 'paddle_settings', $paddleSettings );
    
    wp_enqueue_script( 'paddle-js' );
    wp_enqueue_script( 'paddle-setup' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_paddle_scripts' );

This will add your vendor ID to become available to the paddle.js we already loaded. Make sure you replace [YOUR VENDOR ID] with your actual vendor ID from Paddle.

Now we need to actually create the paddle-setup.js file.

JavaScript

This is where the magic happens. The real Paddle Checkout integration is done in this JavaScript code here:

(function () {

  if (! paddle_settings.vendor_id) {
    console.log('Paddle vendor ID not set');
    return;
  }

  Paddle.Setup({ vendor: parseInt(paddle_settings.vendor_id) });

  document.querySelectorAll('.buy-button').forEach( btn => {

    btn.addEventListener('click', (e) => {
      e.preventDefault();
      Paddle.Checkout.open({ 
        product: btn.getAttribute('data-product'),
        locale: 'en', 
        country: 'US'
      });
    });

   });

})();

An interesting thing to notice here is paddle_settings.vendor_id — if you reviewed the PHP code above you probably recognize it. It’s the vendor ID you supplied in the PHP code when you enqueued the paddle-setup.js file.

Alright, with this script done it’s ready. Time to start selling!

How To Use It

First you have to create a product in Paddle. This can be a one-time purchase download with/without license, a recurring subscription, etc. All that is on the Paddle side.

Once you have a product created, you’ll need the product ID.

Then you add an HTML block in the location you want the buy button to appear and add the link I gave you in the HTML section above. Here it is again:

<a href="#!" class="buy-button" data-product="[PRODUCT ID]">Buy Now!</a>

And that’s it. If the PHP and JavaScript are set up correctly when a potential customer clicks the buy button a Paddle Checkout modal will popup.

From there Paddle does everything: order processing, fulfillment, emails, and receipts.

Done For You

If you would like all this to be done for you, I have put together a premium plugin that does all this, and more — all you have to do is update a few settings and create product links to start selling.

Built with modern, efficient code for maximum performance (and no jQuery dependency). A single, one-time payment for a lifetime license. No recurring fee.

Plugin Instructions

After you purchase the plugin, the first thing is to download, install, and activate it like normal.

Then go to Settings > WPšŸ¹ Paddle and enter your vendor ID. You can also set your default locale and country.

This will set the language, currency, and country selection for potential customers — giving them a better checkout experience.

After that, follow the instructions above to create buttons to sell your goods.

Summary

I feel like I will be adding more to this guide later down the road to iron out some details. If you find something difficult or spot a mistake please let me know.

You learned how to enqueue the Paddle javascript needed to create a Paddle Checkout experience for your visitors — and what is involved with triggering a Paddle Checkout popup.

I hope you found it helpful, or at the very least, interesting — and will use it to sell some amazing products.

Take care.

šŸ¹, āœŒļø+ā¤ļø