PayPal

Client-Side Implementationanchor

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 supportanchor

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

Basic configurationanchor

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

  1. HTML
<div id="paypal-container"></div>

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

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

Optionsanchor

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

Next: Choose your integrationanchor

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.
  • Need a combination of features and Pay Later offers? Use Checkout with Vault.

See a detailed comparison of Vault vs. Checkout vs Checkout with Vault.


Next Page: Vault →