Set Up Your Clientanchor

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 SDKanchor

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

  1. HTML
<!-- 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.101.3/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.101.3/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 installanchor

We also publish these packages in a few other ways.

npmanchor

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

  1. Bash
npm install --save braintree-web

You can then include each component as needed.

  1. JavaScript
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');

Boweranchor

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

  1. Bash
bower install --save braintree-web#{{latestJSVersion version='v3'}}

And load the required components:

  1. HTML
<!-- 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)anchor

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

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

  1. Callbacks

// Inside main.js:
require.config({
  paths: {
    paypal: 'https://www.paypalobjects.com/api/checkout.js',
    braintreeClient: 'https://js.braintreegateway.com/web/3.101.3/js/client.min',
    hostedFields: 'https://js.braintreegateway.com/web/3.101.3/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 tokenanchor

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.

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

PayPal configurationanchor

Invoking Express Checkoutanchor

note

The examples here require version 3.90.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.

To request a one-time payment, set flow to 'checkout' and include amount and currency options in your createPayment call. The value of currency must match the value passed into loadPayPalSDK.

If intent is used, the value must match in both loadPayPalSDK and createPayment.

Use a createOrder function to create the payment resource:

  1. JavaScript
// 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.101.3/js/client.min.js"></script>
//<script src="https://js.braintreegateway.com/web/3.101.3/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 currenciesanchor

The currencyCode 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 setupanchor

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 currencyCode 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 currencyCode field. You can close the currency in your business account, if you'd like.

Send payment method nonce to serveranchor

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.

See also


Next Page: Set Up Your Server →