Set Up Your Client

Choose an SDK preference:

Braintree's JavaScript SDK lets you easily accept payments from PayPal. The SDK is made up of several components, so you only need to pull in the files you require.

Loading the SDK

The JavaScript SDK is split into a number of components. You can load these components directly from our servers:

<!-- Load the required checkout.js script -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

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

<script>
paypal.Button.render({
  braintree: braintree,
  // Other configuration
}, '#id-of-element-where-paypal-button-will-render');
</script>

Other ways to install

We also publish these packages in a few other ways.

npm

We ship an npm package to be used with tools like Browserify or Webpack. Install it as you would any other npm package:

npm install --save braintree-web

You can then include each component as needed.

var paypal = require('paypal-checkout');
var client = require('braintree-web/client');
var paypalCheckout = require('braintree-web/paypal-checkout');

paypal.Button.render({
  braintree: {
    client: client,
    paypalCheckout: paypalCheckout
  },
  // The rest of your configuration
}, '#id-of-element-where-paypal-button-will-render');

Bower

We also publish the SDK to Bower. Install it like any other package:

bower install --save braintree-web#3.33.0

And load the required components:

<!-- Load the required checkout.js script -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

<!-- Load the required components. -->
<script src="path/to/bower_components/braintree-web/client.js"></script>
<script src="path/to/bower_components/braintree-web/paypal-checkout.js"></script>

<script>
paypal.Button.render({
  braintree: braintree,
  // Other configuration
}, '#id-of-element-where-paypal-button-will-render');
</script>

AMD (using Require.js)

You can also use the JavaScript SDK with AMD just like any other library.

<script
  data-main="main.js"
  src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"
></script>

You can require only the components that you need, which can reduce the file size of your code.

// Inside main.js:
require.config({
  paths: {
    paypal: 'https://www.paypalobjects.com/api/checkout.js',
    braintreeClient: 'https://js.braintreegateway.com/web/3.33.0/js/client.min',
    braintreePaypal: 'https://js.braintreegateway.com/web/3.33.0/js/paypal-checkout.min'
  }
});

require(['paypal', 'braintreeClient', 'braintreePaypal'], function (paypal, client, paypalCheckout) {
paypal.Button.render({
  braintree: {
    client: client,
    paypalCheckout: paypalCheckout
  },
  // Other configuration
}, '#id-of-element-where-paypal-button-will-render');

Once you have access to the braintree namespace, you can initialize your integration.

Get a client token

To start up, the JavaScript SDK needs a client token generated by the server SDK. To see how to generate one, follow Set Up Your Server (the next page) until you've completed the Generate a client token section.

Once you've generated a client token, embed it into your template. There are a number of ways to get your client token into JavaScript so you can set up Braintree. Many people choose to interpolate the client token into the HTML/JavaScript itself; alternatively, you could load the client token from an AJAX call to an exposed client token URL on your server.

paypal.Button.render({
  braintree: braintree,
  client: {
    production: 'CLIENT_TOKEN_FROM_SERVER',
    sandbox: 'CLIENT_TOKEN_FROM_SERVER'
  },
  env: 'production', // or 'sandbox'
  // The rest of your setup, we'll go into more detail about this later on

See also

PayPal configuration

Invoking Express Checkout

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.

To request a one-time payment, set flow to 'checkout'. You must also include amount and currency options.

// Be sure to have PayPal's checkout.js library and the Braintree client and PayPal checkout scripts loaded on your page.
// <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
// <script src="https://js.braintreegateway.com/web/3.33.0/js/client.min.js"></script>
// <script src="https://js.braintreegateway.com/web/3.33.0/js/paypal-checkout.min.js"></script>

paypal.Button.render({
  braintree: braintree,
  client: {
    production: 'CLIENT_TOKEN_FROM_SERVER',
    sandbox: 'CLIENT_TOKEN_FROM_SERVER'
  },
  env: 'production', // Or 'sandbox'
  commit: true, // This will add the transaction amount to the PayPal button

  payment: function (data, actions) {
    return actions.braintree.create({
      flow: 'checkout', // Required
      amount: 10.00, // Required
      currency: 'USD', // Required
      enableShippingAddress: true,
      shippingAddressEditable: false,
      shippingAddressOverride: {
        recipientName: 'Scruff McGruff',
        line1: '1234 Main St.',
        line2: 'Unit 1',
        city: 'Chicago',
        countryCode: 'US',
        postalCode: '60652',
        state: 'IL',
        phone: '123.456.7890'
      }
    });
  },

  onAuthorize: function (payload) {
    // Submit `payload.nonce` to your server.
  },
}, '#paypal-button');

Supported currencies

The currency field determines the currency of the transaction displayed to the customer in the Express Checkout flow. You'll pass the same currency with the transaction request on the server side.

note

When you first create your PayPal business account, you'll be able to pass only the default currency for the country associated with your business account. If you'd like to display transactions in additional currencies, see the multi-currency setup section below.

See the full list of supported currencies for Express Checkout.

Multi-currency setup

In order to display transactions in currencies other than the default currency for the country associated with your business account, you'll need to add them to your account as follows:

  1. Access the My Apps & Credentials page in your PayPal Developer Dashboard
    • Select your Live account
    • View currently enabled currencies for your account
    • Select currencies you would like to add and click the Add Currencies button
  2. Access the My Money page of your PayPal business account

Once a currency is enabled, you can begin passing it in the currency field.

note

Currencies can't be removed from your Developer Dashboard once they have been added. If you no longer wish to display a particular currency, you can choose not to pass it in the currency field. You can close the currency in your business account, if you'd like.

Send payment method nonce to server

Your client-side integration will send the customer's payment information to Braintree in exchange for a payment method nonce. On your server, you'll use this payment method nonce to securely create transactions.

Still Have Questions?

Browse our support options or submit a question to our technical support team.

Feedback