Add the PayPal Button

To create the best checkout process for your customers and increase your conversion rates, consider where you will place the PayPal Checkout button on your site. See Choose the optimal button location to learn more.

Add the script to your client

For Express Checkout integrations, PayPal provides the JavaScript checkout.js script. Add the checkout.js script to your client on the page where you want to render the PayPal button:

Note: To ensure maximum compatibility with Express Checkout, load the script from Do not download a local copy to your server and load the script from there.

<!DOCTYPE html>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src=""></script>

  <div id="paypal-button"></div>

      env: 'production', // Or 'sandbox',

      commit: true, // Show a 'Pay Now' button

      style: {
        color: 'gold',
        size: 'small'

      payment: function(data, actions) {
         * Set up the payment here

      onAuthorize: function(data, actions) {
         * Execute the payment here

      onCancel: function(data, actions) {
         * Buyer cancelled the payment

      onError: function(err) {
         * An error occurred during the transaction
    }, '#paypal-button');

Checkout script options

In your PayPal checkout script, you'll configure the look and feel of your checkout button, initiate a payment, and then define what happens when a buyer authorizes or cancels a payment. Finally, you'll determine what happens if an error occurs.

Option Description
#paypal-button Selector that refers to the container element into which the PayPal button is rendered.
style Option that allows you to customize the button's appearance.
payment() Function called by checkout.js when a buyer clicks the PayPal button.

This is where you set up and return a payment to initiate the checkout process.
onAuthorize() Function called by checkout.js after the buyer logs in and authorizes the payment on

This is where you optionally show a confirmation page, and then execute the payment.
onCancel() Function called by checkout.js if the buyer cancels the payment.

By default, the buyer is returned to the original page, but you're free to use this function to take them to a different page.
onError() Function called by checkout.js when an error occurs.

You can allow the buyer to re-try or show an error message.


Set up a Payment.

If you're upgrading an existing integration to checkout.js, see Configure the payment callback on the Upgrade Checkout integration page.