PayPal

Client-Side Implementationanchor

note

The examples in this guide require version 3.90.0 or higher of the Braintree JavaScript SDK.

If you use 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 supportanchor

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

Basic configurationanchor

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

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

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

  1. HTML
<div id="paypal-button"></div>

Initialize componentsanchor

Integrating PayPal payments requires a client. After you've created a client, pass it to the PayPal Checkout component to accept your payments.

  1. Callback
  2. Promise
// 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 JavaScript SDKanchor

After you create the Braintree PayPal Checkout component, use the loadPayPalSDK method to load the PayPal JavaScript SDK script file onto the page.

  1. Callback
  2. Promise
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)
});

You can choose to load the script tag manually:

  1. HTML
<!-- 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.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.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 > Account Settings > 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 JavaScript SDK.

By default, the client-id is the merchant's PayPal Client ID for the current environment, such as sandbox or production.

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

  1. Callback
  2. Promise
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 buttonanchor

Next, render the PayPal button. You will need to configure the button specifically for the One-Time Payments, Vaulted Payments, or Recurring Payments integration flow, depending on the type of integration you choose in the next section.

Review the integration links in the next section to learn how to finish rendering the PayPal button.

Next: Choose your integrationanchor

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

See a detailed comparison of One-Time Payments, Vaulted Payments, and Recurring Payments.


Next Page: Vault →