note

The examples on this page now use the PayPal Checkout component released in version 3.7.0 of the Braintree JavaScript SDK. Documentation and examples for the deprecated PayPal component are available in the JavaScript reference.

With this change, you must link your PayPal sandbox test account to your Braintree sandbox account for testing.

Before you can add a PayPal button, make sure you have a few prerequisites out of the way:

  1. Create, verify, and link your PayPal account in the Braintree Control Panel
  2. Generate a client token on your server
    • See Hello, Server and Hello, Client for a walkthrough of creating and using a client token
    • You will use the client token when you initialize your components

Browser support

Learn more about browser support for v3 of our JavaScript SDK.

Basic configuration

If you are using script tags to load files, be sure to at least include:

HTML
Copy
Copied
<!-- Load PayPal's checkout.js Library. -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>

<!-- Load the client component. -->
<script src="https://js.braintreegateway.com/web/3.42.0/js/client.min.js"></script>

<!-- Load the PayPal Checkout component. -->
<script src="https://js.braintreegateway.com/web/3.42.0/js/paypal-checkout.min.js"></script>

Regardless of which method you use to load files, create a div element. This is where your PayPal button will appear.

HTML
Copy
Copied
<div id="paypal-button"></div>

Initialize components

Every integration requires a client. Once you've created one, you can pass it to the PayPal Checkout component to accept your payments.

Callbacks Promises
Copy
Copied
// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {

  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  // Create a PayPal Checkout component.
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (paypalCheckoutErr, paypalCheckoutInstance) {

    // Stop if there was a problem creating PayPal Checkout.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (paypalCheckoutErr) {
      console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
      return;
    }

    // Set up PayPal with the checkout.js library
    paypal.Button.render({
      env: 'production', // or 'sandbox'

      payment: function () {
        return paypalCheckoutInstance.createPayment({
          // Your PayPal options here. For available options, see
          // http://braintree.github.io/braintree-web/current/PayPalCheckout.html#createPayment
        });
      },

      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
          // Submit `payload.nonce` to your server.
        });
      },

      onCancel: function (data) {
        console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
      },

      onError: function (err) {
        console.error('checkout.js error', err);
      }
    }, '#paypal-button').then(function () {
      // The PayPal button will be rendered in an html element with the id
      // `paypal-button`. This function will be called when the PayPal button
      // is set up and ready to be used.
    });

  });

});

You can find all options for PayPal Checkout in the JavaScript v3 reference.

Next: Choose your integration

The rest of your configuration will be determined by how you'd like to use PayPal.

  • Want one-click payments for repeat customers? Have a subscription model? Use our Vault.
  • Want a checkout from your cart/product page? Use Checkout with PayPal.

See a detailed comparison of Vault vs. Checkout.

Still have questions?

If you can’t find an answer, contact us