Constructor
new PayPalCheckout(options)
Do not use this constructor directly. Use braintree-web.paypal-checkout.create instead.
Integrate Checkout Flow with PayPal SDK
You must have PayPal's script, configured with various query parameters, loaded on your page:
<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id"></script>
<div id="paypal-button"></div>
When passing values in the createPayment
method, make sure they match the corresponding parameters in the query parameters for the PayPal SDK script.
braintree.client.create({
authorization: 'authorization'
}).then(function (clientInstance) {
return braintree.paypalCheckout.create({
client: clientInstance
});
}).then(function (paypalCheckoutInstance) {
return paypal.Buttons({
createOrder: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
currency: 'USD',
amount: '10.00',
intent: 'capture' // this value must either be `capture` or match the intent passed into the PayPal SDK intent query parameter
// your other createPayment options here
});
},
onApprove: function (data, actions) {
// some logic here before tokenization happens below
return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
// Submit payload.nonce to your server
});
},
onCancel: function () {
// handle case where user cancels
},
onError: function (err) {
// handle case where error occurs
}
}).render('#paypal-button');
}).catch(function (err) {
console.error('Error!', err);
});
Integrate Vault Flow with PayPal SDK
You must have PayPal's script, configured with various query parameters, loaded on your page:
<script src="https://www.paypal.com/sdk/js?client-id=your-sandbox-or-prod-client-id&vault=true"></script>
<div id="paypal-button"></div>
When passing values in the createPayment
method, make sure they match the corresponding parameters in the query parameters for the PayPal SDK script.
braintree.client.create({
authorization: 'authorization'
}).then(function (clientInstance) {
return braintree.paypalCheckout.create({
client: clientInstance
});
}).then(function (paypalCheckoutInstance) {
return paypal.Buttons({
createBillingAgreement: function () {
return paypalCheckoutInstance.createPayment({
flow: 'vault'
// your other createPayment options here
});
},
onApprove: function (data, actions) {
// some logic here before tokenization happens below
return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
// Submit payload.nonce to your server
});
},
onCancel: function () {
// handle case where user cancels
},
onError: function (err) {
// handle case where error occurs
}
}).render('#paypal-button');
}).catch(function (err) {
console.error('Error!', err);
});
Integrate with Checkout.js (deprecated PayPal SDK)
You must have PayPal's checkout.js script loaded on your page. 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>
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. |
Examples
// this paypal object is created by checkout.js
// see https://github.com/paypal/paypal-checkout
paypal.Buttons({
createOrder: function () {
// when createPayment resolves, it is automatically passed to checkout.js
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
amount: '10.00',
currency: 'USD',
intent: 'capture' // this value must either be `capture` or match the intent passed into the PayPal SDK intent query parameter
});
},
// Add other options, e.g. onApproved, onCancel, onError
}).render('#paypal-button');
// shippingOptions are passed to createPayment. You can review the result from onAuthorize to determine which shipping option id was selected.
```javascript
braintree.client.create({
authorization: 'authorization'
}).then(function (clientInstance) {
return braintree.paypalCheckout.create({
client: clientInstance
});
}).then(function (paypalCheckoutInstance) {
return paypal.Button.render({
env: 'production'
payment: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout',
amount: '10.00',
currency: 'USD',
shippingOptions: [
{
id: 'UUID-9',
type: 'PICKUP',
label: 'Store Location Five',
selected: true,
amount: {
value: '1.00',
currency: 'USD'
}
},
{
id: 'shipping-speed-fast',
type: 'SHIPPING',
label: 'Fast Shipping',
selected: false,
amount: {
value: '1.00',
currency: 'USD'
}
},
{
id: 'shipping-speed-slow',
type: 'SHIPPING',
label: 'Slow Shipping',
selected: false,
amount: {
value: '1.00',
currency: 'USD'
}
}
]
});
},
onAuthorize: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
// Submit payload.nonce to your server
});
}
}, '#paypal-button');
}).catch(function (err) {
console.error('Error!', err);
});
```
getClientId(callbackopt) → {Promise|void}
Resolves with the PayPal client id to be used when loading the PayPal SDK.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback |
<optional> |
The second argument, |
Example
paypalCheckoutInstance.getClientId().then(function (id) {
var script = document.createElement('script');
script.src = 'https://www.paypal.com/sdk/js?client-id=' + id;
script.onload = function () {
// setup the PayPal SDK
};
document.body.appendChild(script);
});
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, |
Example
// create the paypalCheckoutInstance with a client token generated with a customer id
paypal.Buttons({
createBillingAgreement: function () {
return paypalCheckoutInstance.createPayment({
flow: 'vault'
// your other createPayment options here
});
},
onApproved: function (data) {
data.vault = false;
return paypalCheckoutInstance.tokenizePayment(data);
},
// Add other options, e.g. onCancel, onError
}).render('#paypal-button');
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. |
shippingOption :object
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
id |
string |
A unique ID that identifies a payer-selected shipping option. |
|||||||||
label |
string |
A description that the payer sees, which helps them choose an appropriate shipping option. For example, |
|||||||||
selected |
boolean |
If |
|||||||||
type |
string |
The method by which the payer wants to get their items. The possible values are:
|
|||||||||
amount |
object |
The shipping cost for the selected option. Properties
|
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
|