PayPal/Client-Side Implementation

note

The examples on this page now use the PayPal Checkout component in conjunction with the PayPal JS SDK. The examples here require version 3.63.0 or higher of the Braintree JavaScript SDK.

If you are using the Braintree JavaScript SDK with the deprecated PayPal checkout.js library, review this migration guide to upgrade your integration.

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:

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

<!-- Load the PayPal Checkout component. -->
<script src="https://js.braintreegateway.com/web/3.71.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.

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

// 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;
    }

    // Load the PayPal JS SDK (see Load the PayPal JS SDK section)
  });

});

Load the PayPal JS SDK

Once the Braintree PayPal Checkout component is created, use the loadPayPalSDK method to load the PayPal JS SDK script file onto the page.

paypalCheckoutInstance.loadPayPalSDK(function (loadSDKErr) {
  // The PayPal script is now loaded on the page and
  // window.paypal.Buttons is now available to use

  // render the PayPal button (see Render the PayPal Button section)
});

Alternatively, load the script tag manually:

<!-- Load the PayPal JS SDK with your PayPal Client ID-->
<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id"></script>

<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.71.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.71.0/js/paypal-checkout.min.js"></script>

Replace your-sandbox-or-prod-client-id with the PayPal client ID found in the Braintree Control Panel under Settings > Processing > PayPal > Options > PayPal Client ID.

This ID will be different for your sandbox account and your production account.

The loadPayPalSDK method also takes an optional configuration object. Each property corresponds to the query parameters available in the PayPal JS SDK.

By default, the client-id will be the merchant's PayPal Client ID for the current environment (sandbox or production).

The other config options depend on whether you choose the Vault or Checkout integration option; see those pages for more details.

paypalCheckoutInstance.loadPayPalSDK({
  // Must be set to true when using the Vault flow
  // vault: true

  // Defaults to USD, but must match the value used in `createPayment`
  // currency: 'USD'
}, function (loadSDKErr) {
  // Render the PayPal button (see Render the PayPal Button section)
});

Render the PayPal button

Next, render the PayPal button. You will need to configure the button specifically for the Vault or Checkout integration flow, depending on the type of integration you choose in the next section.

Follow the links below to learn how to finish rendering the PayPal button.

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.