Get started
Build
Your Paddle account
Your Paddle catalog
The Paddle checkout
Connect the Paddle checkout
Gather checkout details
Import the Paddle JS library
Add a Paddle button to your web page
Paddle webhooks
Testing
Learn

Add a Paddle button to your web page

The simplest way to trigger the Paddle checkout is to add a Paddle button to your web page, using the paddle_button class.

Here, you will add a Paddle button to your store web page and associate it with the unique ID for a one-time product or a subscription plan in your Paddle catalog.

Before starting steps on this page, you must have completed the following tasks:

TaskSection
Create a Paddle vendor accountYour Paddle account
Create a Paddle sandboxYour Paddle account
Create a subscription plan -or- create a one-time productPaddle catalog
Gather checkout detailsThe Paddle checkout
Import the Paddle JS libraryThe Paddle checkout

Follow steps below:

  1. Add the code snippet below to the appropriate place in your test store web page:
    preparing...

    ...for example:

    preparing...
  2. Change the data-product value to a Product ID or Plan ID, as noted previously.
  3. Save your web page file.
  4. Launch the web page in your browser - you should see a green Paddle button as per the example below:
  5. Keep this browser page open and go to the next steps.
TaskSection
Configure Paddle webhooksConfigure Paddle webhooks
ResourceSummary
Paddle JS library ReferenceFind out more about the Paddle JS library.
Overlay checkoutPaddle's overlay checkout is an iframe, displayed over your webpage. Find out how to implement this for your website, here.
Inline checkoutPaddle's inline checkout is embedded into your web store page for a more customizable, branded checkout flow. Find out how to implement this for your website, here.
Customizing the checkout with parametersThe checkout experience can be customized by passing in parameters to collect/utilize additional user data. Find out what data can be collected and how to use it, here.
Post-checkout behaviorFind out more about customizing the customer's experience once a checkout is completed.
Checkout API endpointsTake a deep dive into the Paddle API to find out how you can integrate Paddle checkout functionality with your platform.