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 support

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

Basic configuration

To begin, add a div container for the PayPal button to your page:

HTML
Copy
Copied
<div id="paypal-container"></div>

Next, use the braintree.setup call to place the button inside of the provided container element:

HTML
Copy
Copied
<script type="text/javascript">
  braintree.setup("CLIENT-TOKEN-FROM-SERVER", "custom", {
    paypal: {
      container: "paypal-container",
    },
    onPaymentMethodReceived: function (obj) {
      doSomethingWithTheNonce(obj.nonce);
    }
  });
</script>

Make sure to replace CLIENT-TOKEN-FROM-SERVER with your generated client token.

The onPaymentMethodReceived option is a callback function that will return the payment method object. This occurs after the customer authenticates with PayPal and completes the flow. You can use the nonce contained in this object with your server side call to run a transaction and complete the checkout.

Options

All options for PayPal can be found in the JavaScript v2 reference.

Next: Choose your integration

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

  • Want one-click payments for repeat customers? Have a subscription model? Use our Vault.
  • Want a checkout from your cart/product page? Use Checkout with PayPal.

See a detailed comparison of Vault vs. Checkout.

Still have questions?

If you can’t find an answer, contact our Support team