Migrating from checkout.js to the PayPal JS SDK

JavaScript v3

• Current Braintree SDKs
• Android v5
• iOS v6
• JavaScript v3
• Previous Versions
• Android v4
• iOS v5
• JavaScript v2

Previously, Braintree documented how to integrate with version 4 of PayPal's JavaScript SDK, called checkout.js. While that integration is still supported, Braintree now offers support for version 5 of the PayPal JavaScript SDK.

This guide walks through how to upgrade from the old version to the new version.

Script tag

Using checkout.js, it was necessary to load the script tag separately from the Braintree SDKs:

Code snippet NOT FOUND

With the PayPal JS SDK, all you need to do is load the Braintree SDK and then call loadPayPalSDK on the paypalCheckoutInstance that is created.

Code snippet NOT FOUND

Code snippet NOT FOUND

A configuration object can be passed into loadPayPalSDK that will overwrite the default properties for configuring the PayPal JS SDK:

Code snippet NOT FOUND

For all possible values, review the documentation for supported query params in the PayPal JS SDK.

Alternatively, you can load the PayPal JS SDK directly on the page:

Code snippet NOT FOUND

Replace your-sandbox-or-prod-client-id with the PayPal client ID found in the Braintree Control Panel under Settings > Account Settings > PayPal > Options > PayPal Client ID.

This ID will be different for your sandbox account and your production account.

There are many other query parameters that can be used in addition to the client-id param.

Setting up the SDK

How to initialize the PayPal SDK

The biggest difference between checkout.js and the PayPal JS SDK is in how PayPal button(s) are rendered.

In checkout.js, paypal.Button.render was called with your PayPal JS SDK config and selector for the PayPal button.

Code snippet NOT FOUND

For the PayPal JS SDK, call paypal.Buttons with your PayPal JS SDK config, and then call render on the result with your selector for your PayPal button.

Code snippet NOT FOUND

How to render a PayPal button

In checkout.js, it was necessary to pass a style parameter to configure the display of the button.

Code snippet NOT FOUND

For the PayPal JS SDK, use fundingSource: paypal.FUNDING.PAYPAL in your configuration to load only a PayPal button (by default, the integration will try to render all eligible payment methods). In addition, the PayPal JS SDK supports the style parameter:

Code snippet NOT FOUND

Creating a payment resource

In checkout.js, a payment function was used to create the payment resource. This could be used for either the Vault or Checkout integration flows.

Code snippet NOT FOUND

The payment function has been renamed to createOrder for the Checkout flow or createBillingAgreement for the Vault flow.

Code snippet NOT FOUND

Code snippet NOT FOUND

Tokenizing the PayPal account

In checkout.js, an onAuthorize function was used to finish the flow.

Code snippet NOT FOUND

The onAuthorize function in the PayPal JS SDK config has been renamed to onApprove.

Code snippet NOT FOUND

Code snippet NOT FOUND

Other considerations

onCancel and onError functions are unchanged.

env no longer needs to be passed as the environment is pulled from the PayPal client-id.

Checkout flow vs Vault flow

With checkout.js, you could dynamically choose whether the Checkout flow or the Vault flow would be used. With the PayPal JS SDK, this decision needs to be made during the setup of the SDK.

With the Checkout flow, you will use a createOrder function in your PayPal JS SDK config to initialize the login. With the Vault flow, you will pass vault: true when calling loadPayPalSDK and use a createBillingAgreement function to initialize the login.

Checkout flow

A typical PayPal integration using the Checkout flow with checkout.js would look something like:

Code snippet NOT FOUND

A full PayPal JS SDK integration with currency and intent set may look like:

Code snippet NOT FOUND

Vault flow

vault: true must be passed when calling loadPayPalSDK.

Code snippet NOT FOUND