PayPalCheckout

Do not use this constructor directly. Use braintree-web.paypal-checkout.create instead.

Integrate Checkout Flow with PayPal SDK

You must have PayPal's script, configured with various query parameters, loaded on your page:

<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id"></script>
<div id="paypal-button"></div>

When passing values in the createPayment method, make sure they match the corresponding parameters in the query parameters for the PayPal SDK script.

braintree.client.create({
  authorization: 'authorization'
}).then(function (clientInstance) {
  return braintree.paypalCheckout.create({
    client: clientInstance
  });
}).then(function (paypalCheckoutInstance) {
  return paypal.Buttons({
    createOrder: function () {
      return paypalCheckoutInstance.createPayment({
        flow: 'checkout',
        currency: 'USD',
        amount: '10.00',
        intent: 'capture' // this value must either be `capture` or match the intent passed into the PayPal SDK intent query parameter
        // your other createPayment options here
      });
    },

    onApprove: function (data, actions) {
      // some logic here before tokenization happens below
      return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
        // Submit payload.nonce to your server
      });
    },

    onCancel: function () {
      // handle case where user cancels
    },

    onError: function (err) {
      // handle case where error occurs
    }
  }).render('#paypal-button');
}).catch(function (err) {
 console.error('Error!', err);
});

Integrate Vault Flow with PayPal SDK

You must have PayPal's script, configured with various query parameters, loaded on your page:

<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id&vault=true"></script>
<div id="paypal-button"></div>

When passing values in the createPayment method, make sure they match the corresponding parameters in the query parameters for the PayPal SDK script.

braintree.client.create({
  authorization: 'authorization'
}).then(function (clientInstance) {
  return braintree.paypalCheckout.create({
    client: clientInstance
  });
}).then(function (paypalCheckoutInstance) {
  return paypal.Buttons({
    createBillingAgreement: function () {
      return paypalCheckoutInstance.createPayment({
        flow: 'vault'
        // your other createPayment options here
      });
    },

    onApprove: function (data, actions) {
      // some logic here before tokenization happens below
      return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
        // Submit payload.nonce to your server
      });
    },

    onCancel: function () {
      // handle case where user cancels
    },

    onError: function (err) {
      // handle case where error occurs
    }
  }).render('#paypal-button');
}).catch(function (err) {
 console.error('Error!', err);
});

Integrate with Checkout.js (deprecated PayPal SDK)

You must have PayPal's checkout.js script loaded on your page. You can either use the paypal-checkout package on npm with a build tool or use a script hosted by PayPal:

<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>

braintree.client.create({
  authorization: 'authorization'
}).then(function (clientInstance) {
  return braintree.paypalCheckout.create({
    client: clientInstance
  });
}).then(function (paypalCheckoutInstance) {
  return paypal.Button.render({
    env: 'production', // or 'sandbox'

    payment: function () {
      return paypalCheckoutInstance.createPayment({
        // your createPayment options here
      });
    },

    onAuthorize: function (data, actions) {
      // some logic here before tokenization happens below
      return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
        // Submit payload.nonce to your server
      });
    }
  }, '#paypal-button');
}).catch(function (err) {
 console.error('Error!', err);
});