Constructor
new PayPalCheckout(options)
Do not use this constructor directly. Use braintree-web.paypal-checkout.create instead.
You must have PayPal's checkout.js script loaded on your page to use PayPal Checkout. 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>
Once you have the script loaded, there are two ways to integrate with the checkout.js library.
Pass a Braintree object into checkout.js
You can pass a braintree
object into PayPal's checkout.js library. This will create the necessary Braintree client and PayPal Checkout components and automatically tokenize the authorized PayPal account. Use this integration option if you are not integrating with any other Braintree components.
paypal.Button.render({
braintree: braintree, // this object is available on the window by including the client and paypal-checkout component scripts on the page
client: {
production: 'production_authorization',
sandbox: 'sandbox_authorization'
},
env: 'production', // or 'sandbox'
payment: function (data, actions) {
return actions.braintree.create({
// your createPayment options here
});
},
onAuthorize: function (payload, actions) {
// send payload.nonce to your server
// for more data about the user's PayPal account:
// return actions.payment.get().then(function(data) { console.log(data); });
}
}, '#paypal-button'); // the PayPal button will be rendered in an html element with the id `paypal-button`
If you are using npm
to load braintree, simply pass in the invidual components:
var btClient = require('braintree-web/client');
var btPayPal = require('braintree-web/paypal-checkout');
paypal.Button.render({
braintree: {
client: btClient,
paypalCheckout: btPayPal
},
client: {
production: 'production_authorization',
sandbox: 'sandbox_authorization'
},
// rest of checkout.js config
Create the Braintree components manually
Alternatively, you can create the Braintree client and PayPal Checkout components manually. Use this integration style if you prefer to have some logic between receiving the authorized PayPal account and tokenizing it.
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);
});
Parameters:
Name | Type | Description |
---|---|---|
options |
object |
Methods
createPayment(options, callbackopt) → {Promise|void}
Creates a PayPal payment ID or billing token using the given options. This is meant to be passed to PayPal's checkout.js library. When a callback is defined, the function returns undefined and invokes the callback with the id to be used with the checkout.js library. Otherwise, it returns a Promise that resolves with the id.
Parameters:
Name | Type | Attributes | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object |
All options for the PayPalCheckout component. Properties
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
callback |
callback |
<optional> |
The second argument is a PayPal |
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
options.lineItems |
Array.<lineItem> |
<optional> |
The line items for this transaction. It can include up to 249 line items. |
Example
// this paypal object is created by checkout.js
// see https://github.com/paypal/paypal-checkout
paypal.Button.render({
// when createPayment resolves, it is automatically passed to checkout.js
payment: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
amount: '10.00',
currency: 'USD',
intent: 'sale'
});
},
// Add other options, e.g. onAuthorize, env, locale
}, '#paypal-button');
teardown(callbackopt) → {Promise|void}
Cleanly tear down anything set up by create.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback |
<optional> |
Called once teardown is complete. No data is returned if teardown completes successfully. |
Examples
paypalCheckoutInstance.teardown();
paypalCheckoutInstance.teardown(function () {
// teardown is complete
});
tokenizePayment(tokenizeOptions, callbackopt) → {Promise|void}
Tokenizes the authorize data from PayPal's checkout.js library when completing a buyer approval flow. When a callback is defined, invokes the callback with tokenizePayload and returns undefined. Otherwise, returns a Promise that resolves with a tokenizePayload.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
tokenizeOptions |
object |
Tokens and IDs required to tokenize the payment. Properties
|
|||||||||||||||||
callback |
callback |
<optional> |
The second argument, |
Type Definitions
lineItem :object
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
quantity |
string |
Number of units of the item purchased. This value must be a whole number and can't be negative or zero. |
|
unitAmount |
string |
Per-unit price of the item. Can include up to 2 decimal places. This value can't be negative or zero. |
|
name |
string |
Item name. Maximum 127 characters. |
|
kind |
string |
Indicates whether the line item is a debit (sale) or credit (refund) to the customer. Accepted values: |
|
unitTaxAmount |
string |
<nullable> |
Per-unit tax price of the item. Can include up to 2 decimal places. This value can't be negative or zero. |
description |
string |
<nullable> |
Item description. Maximum 127 characters. |
productCode |
string |
<nullable> |
Product or UPC code for the item. Maximum 127 characters. |
url |
string |
<nullable> |
The URL to product information. |
tokenizePayload :object
PayPal Checkout tokenized payload. Returned in PayPalCheckout#tokenizePayment's callback as the second argument, data
.
Properties:
Name | Type | Attributes | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
nonce |
string |
The payment method nonce. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
type |
string |
The payment method type, always |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
details |
object |
Additional PayPal account details. Properties
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
creditFinancingOffered |
object |
<nullable> |
This property will only be present when the customer pays with PayPal Credit. Properties
|