Client-side Implementation
Availability
PayPal Order is currently in limited release and is only available to select merchants. It was
introduced in Android v3, iOS v4, and JavaScript v3 of our Client SDKs.
Contact us to request access to this
feature.
- 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.
});
});
});
});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 referenceJavaScript PayPal client reference
.