Client-side Implementation

Before you can add PayPal Order, you will need to:

Create, verify, and link your PayPal account in the Braintree Control Panel
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
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

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

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

Initialize components

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.

Callback

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.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (paypalCheckoutErr) {
      console.error('Error creating PayPal Checkout component:', paypalCheckoutErr);
      return;
    }

    paypalCheckoutInstance.loadPayPalSDK({
      // load sdk options here
    }, function () {
      paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,

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

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

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

        onError: function (err) {
          console.error('PayPal error', err);
        }
      }).render('#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.
      });

    });

  });

});

Invoke PayPal Order flow

To request a PayPal Order payment, set flow to 'checkout' and intent to order. You must also include amount and currency options.

Callback

Promise

braintree.client.create({
  authorization: 'TOKEN'
}, function (clientErr, clientInstance) {
  // Create PayPal Checkout component
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (err, paypalCheckoutInstance) {
    paypalCheckoutInstance.loadPayPalSDK({
      intent: 'order',
      currency: 'USD'
    }, function () {
      paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,

        createOrder: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'checkout', // Required
            intent: 'order', // Required, must match value in loadPayPalSDK
            amount: 10.00, // Required
            currency: 'USD', // Required, must match value in loadPayPalSDK
            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'
            }
          });
        },

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

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

        onError: function (err) {
          console.error('PayPal error', err);
        }
      }).render('#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.
      });
    });
  });
});

After the customer completes the consent flow and the PayPal pop-up closes, successful tokenization will return a nonce.

Send the nonce to your server and use a Braintree server SDK call to associate it to a customer's payment method. See the server-side section for various options for doing so.

Country support

PayPal is available to merchants in all countries that we support and to customers in 140+ countries. Ensure you are using a desired locale code as outlined in our JavaScript PayPal client reference.

Currency presentment

The currency of the transaction is presented to the customer in the Checkout with PayPal flow. We support all currencies that PayPal REST APIs support.

See the server-side section for details on charging a transaction in a specific currency.