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)
If you are creating a new PayPal integration, please follow the previous integration guide to use the current version of the PayPal SDK. Use this integration guide only as a reference if you are already integrated with Checkout.js.
You must have PayPal's Checkout.js script loaded on your page.
<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 the PayPal JS SDK. When a callback is defined, the function returns undefined and invokes the callback with the id to be used with the PayPal JS SDK. 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 |
Examples
// this paypal object is created by the PayPal JS SDK
// see https://github.com/paypal/paypal-checkout-components
paypal.Buttons({
createOrder: function () {
// when createPayment resolves, it is automatically passed to the PayPal JS SDK
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);
});
```
// Plan and plan metadata are passed to createPayment
```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: 'vault',
planType: 'RECURRING',
planMetadata: {
billingCycles: [
{
billingFrequency: "1",
billingFrequencyUnit: "MONTH",
numberOfExecutions: "1",
sequence: "1",
startDate: "2024-04-06T00:00:00Z",
trial: true,
pricingScheme: {
pricingModel: "FIXED",
},
},
],
currencyIsoCode: "USD",
name: "Netflix with Ads",
productDescription: "iPhone 13",
productQuantity: "1.0",
oneTimeFeeAmount: "10",
shippingAmount: "3.0",
productPrice: "200",
taxAmount: "20",
};
});
},
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);
});
loadPayPalSDK(optionsopt, callbackopt) → {Promise|void}
Resolves when the PayPal SDK has been successfully loaded onto the page.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object |
<optional> |
A configuration object to modify the query params and data-attributes on the PayPal SDK. A subset of the parameters are listed below. For a full list of query params, see the PayPal docs. Properties
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
callback |
callback |
<optional> |
Called when the PayPal SDK has been loaded onto the page. The second argument is the PayPal Checkout instance. If no callback is provided, the promise resolves with the PayPal Checkout instance when the PayPal SDK has been loaded onto the page. |
Examples
paypalCheckoutInstance.loadPayPalSDK().then(function () {
// window.paypal.Buttons is now available to use
});
paypalCheckoutInstance.loadPayPalSDK({
'client-id': 'PayPal Client Id', // Can speed up rendering time to hardcode this value
intent: 'capture', // Make sure this value matches the value in createPayment
currency: 'USD', // Make sure this value matches the value in createPayment
}).then(function () {
// window.paypal.Buttons is now available to use
});
paypalCheckoutInstance.loadPayPalSDK({
vault: true
}).then(function () {
// window.paypal.Buttons is now available to use
});
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 the PayPal JS SDK 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');
updatePayment(options, callbackopt) → {Promise|void}
Use this function to update line items and/or shipping options associated with a PayPalCheckout flow (paymentId
).
When a callback is defined, this function returns undefined and invokes the callback. The second callback argument, data
, is the returned server data. If no callback is provided, updatePayment
returns a promise that resolves with the server data.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object |
All options for the PayPalCheckout component. Properties
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
callback |
callback |
<optional> |
The second argument is a PayPal |
Example
// this paypal object is created by the PayPal JS SDK
// see https://github.com/paypal/paypal-checkout-components
paypal.Buttons({
createOrder: function () {
// when createPayment resolves, it is automatically passed to the PayPal JS SDK
return paypalCheckoutInstance.createPayment({
//
});
},
onShippingChange: function (data) {
// Examine data and determine if the payment needs to be updated.
// when updatePayment resolves, it is automatically passed to the PayPal JS SDK
return paypalCheckoutInstance.updatePayment({
paymentId: data.paymentId,
amount: '15.00',
currency: 'USD',
shippingOptions: [
{
id: 'shipping-speed-fast',
type: 'SHIPPING',
label: 'Fast Shipping',
selected: true,
amount: {
value: '5.00',
currency: 'USD'
}
},
{
id: 'shipping-speed-slow',
type: 'SHIPPING',
label: 'Slow Shipping',
selected: false,
amount: {
value: '1.00',
currency: 'USD'
}
}
]
});
}
// Add other options, e.g. onApproved, onCancel, onError
}).render('#paypal-button');
```
Type Definitions
billingCycles :Object
Properties:
Name | Type | Description |
---|---|---|
billingFrequency |
string | number |
The frequency of billing. |
billingFrequencyUnit |
string |
The unit of billing frequency. Options are |
numberOfExecutions |
string | number |
The number of executions for the billing cycle. |
sequence |
string | number |
The order in the upcoming billing cycles. |
startDate |
string |
The start date in ISO 8601 format ( |
trial |
boolean |
Indicates if the billing cycle is a trial. |
pricingScheme |
pricingScheme |
The pricing scheme object for this billing cycle. |
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. |
planMetadata :Object
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
billingCycles |
Array.<billingCycles> |
<optional> |
An array of billing cyles for this plan. |
currencyIsoCode |
string |
The ISO code for the currency, for example |
|
name |
string |
The name of the plan. |
|
productDescription |
string |
A description of the product. (Accepts only one element) |
|
productQuantity |
string | number |
The quantity of the product. (Accepts only one element) |
|
oneTimeFeeAmount |
string | number |
The one-time fee amount. |
|
shippingAmount |
string | number |
The amount for shipping. |
|
productPrice |
string | number |
The price of the product. |
|
taxAmount |
string | number |
The amount of tax. |
pricingScheme :object
Properties:
Name | Type | Description |
---|---|---|
pricingModel |
string |
The pricing model. Options are |
price |
string |
The price for the billing cycle. |
reloadThresholdAmount |
string |
The amount at which to reload on auto_reload plans. |
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
|