PayPal
Client-Side Implementation
Before you can add a PayPal button, make sure you have a few prerequisites out of the way:
- 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
Browser support
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.109.0/js/client.min.js"></script>
<!-- Load the PayPal Checkout component. -->
<script src="https://js.braintreegateway.com/web/3.109.0/js/paypal-checkout.min.js"></script>
Regardless of which method you use to load files, create a div
element. This is where your PayPal button will appear.
- HTML
<div id="paypal-button"></div>
Initialize components
Every integration requires a client
. Once you've created one, you can pass it to the PayPal Checkout component to accept your payments.
- 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 Checkout.
// This could happen if there was a network error or if it's incorrectly
// configured.
if (paypalCheckoutErr) {
console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
return;
}
// Load the PayPal JS SDK (see Load the PayPal JS SDK section)
});
});
Load the PayPal JS SDK
Once the Braintree PayPal Checkout component is created, use the loadPayPalSDK
method to load the PayPal JS SDK script file onto the page.
- Callback
- Promise
paypalCheckoutInstance.loadPayPalSDK(function (loadSDKErr) {
// The PayPal script is now loaded on the page and
// window.paypal.Buttons is now available to use
// render the PayPal button (see Render the PayPal Button section)
});
Alternatively, load the script tag manually:
- HTML
<!-- Load the PayPal JS SDK with your PayPal Client ID-->
<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id"></script>
<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.109.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.109.0/js/paypal-checkout.min.js"></script>
Replace your-sandbox-or-prod-client-id
with the PayPal client ID found in the Braintree Control Panel under Settings > Processing > PayPal > Options > PayPal Client ID.
This ID will be different for your sandbox account and your production account.
The loadPayPalSDK
method also takes an optional configuration object. Each property corresponds to the query parameters available in the PayPal JS SDK.
By default, the client-id
will be the merchant's PayPal Client ID for the current environment (sandbox or production).
The other config options depend on whether you choose the Vault or Checkout integration option; see those pages for more details.
- Callback
- Promise
paypalCheckoutInstance.loadPayPalSDK({
// Must be set to true when using the Vault flow
// vault: true
// Defaults to USD, but must match the value used in 'createPayment'
// currency: 'USD'
}, function (loadSDKErr) {
// Render the PayPal button (see Render the PayPal Button section)
});
Render the PayPal button
Next, render the PayPal button. You will need to configure the button specifically for the Vault or Checkout integration flow, depending on the type of integration you choose in the next section.
Follow the links below to learn how to finish rendering the PayPal button.
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.
- 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 →