Add the PayPal Button

For Express Checkout integrations, PayPal provides the JavaScript checkout.js script. To begin your integration, add the checkout.js script to your client to render the PayPal button on your web page.

Add the script to your client

To include the checkout.js script, add this code on the page where you want to render the PayPal button:

Note: To ensure maximum compatibility with Express Checkout, load the script from https://www.paypalobjects.com/api/checkout.js. Do not download a local copy to your server and load the script from there.

<!DOCTYPE html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

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

  <script>
    paypal.Button.render({
      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');
  </script>
</body>

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 paypal.com.

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.

Next

Set up a Payment.

If you're upgrading an existing integration to checkout.js, see Setting up the payment on the Upgrade to checkout.js page.