Import the Paddle.js library

Your objective

To connect a Paddle Checkout, you must import the Paddle JS library. Steps on this page take you through adding a code snippet to your store web page, to import the library by linking to Paddle’s CDN resource.

Prerequisites

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

Task	Section
Create a Paddle vendor account	Your Paddle account
Create a Paddle sandbox	Your Paddle account
Create a subscription plan -or- create a one-time product	Paddle catalog
Gather checkout details	The Paddle checkout

Steps required

Follow steps below:

Add the following code immediately before the closing body tag in your test store web page:
```
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
  Paddle.Environment.set("sandbox");
  Paddle.Setup({ vendor: 1234567 });
</script>
```
The above assumes that you are working in your sandbox environment. For your live environment, remove the Paddle.Environment.set(‘sandbox’); environment setting.

Change the vendor value to your own Vendor ID, as noted previously. For example:

<html>
  <head> </head>
  <body>
    <h2>Welcome to my web store!</h2>
    <p>
      If you'd like to purchase a monthly My Awesome Subscription Plan, click
      the button below.
    </p>

    <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
    <script type="text/javascript">
      Paddle.Environment.set("sandbox");
      Paddle.Setup({ vendor: 111111 });
    </script>
  </body>
</html>

Save the file - keep it open and go to the next steps.

Next steps

Task	Section
Add a Paddle button to your web page	The Paddle checkout

Learning

Resource	Summary
Paddle JS library reference	Find out more about the Paddle JS library.
Overlay checkout	Paddle’s overlay checkout is an iframe, displayed over your webpage. Find out how to implement this for your website, here.
Inline checkout	Paddle’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 parameters	The 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 behavior	Find out more about customizing the customer’s experience once a checkout is completed.
Checkout API endpoints	Take a deep dive into the Paddle API to find out how you can integrate Paddle checkout functionality with your platform.