JavaScript SDK script configuration

SDKCurrentLast updated: November 20th 2023, @ 3:37:37 pm

The JavaScript SDK displays relevant, PayPal-supported payment methods on your page, giving your buyers a personalized and streamlined checkout experience.

1<script src=""></script>


You can use the SDK as a module. Loading the SDK as a module brings certain advantages, especially when working with a JavaScript framework. For example, you can optimize performance because the module lets you control loading behavior in JavaScript instead of HTML. It can also help reduce bugs by encapsulating data.

  • Use the paypal-js npm package to integrate with front-end tools.
1import { loadScript } from "@paypal/paypal-js";
2loadScript({ "client-id": YOUR_CLIENT_ID })
3.then((paypal) => {
4 // start to use the PayPal JS SDK script
6.catch((err) => {
7 console.error("failed to load the PayPal JS SDK script", err);
  • Use the react-paypal-js npm package within the React.js framework.
1import { PayPalScriptProvider } from "@paypal/react-paypal-js";
2export default function App() {
3 return (
4 <PayPalScriptProvider options={{ "client-id": YOUR_CLIENT_ID }}/>
5 );

Script parameters are additional key value pairs you can add to the script tag to provide information you need.


Pass a Content Security Policy single-use token if you use them on your site. See Content Security Policy for details.

data-csp-nonceCSP single-use token used to render the button.
1<script src="" data-csp-nonce="MY_CSP_NONCE">


Client token used to identify your buyers.

data-client-tokenClient token used for identifying your buyers.
1<script src="" data-client-token="abc123xyz=="></script>


Pass a page type to log any interactions with the components you use and the type of page where the JavaScript SDK loads. This attribute accepts the following page types: product-listing,search-results, product-details, mini-cart, cart or checkout.

data-page-typeLog page type and interactions for the JavaScript SDK.
1<script src="" data-page-type="product-details"></script>


Pass your partner attribution ID, or build notation (BN) code, to receive revenue attribution. Your BN code is issued to you as part of the partner onboarding process and provides tracking on all your transactions. To find your BN code:

  1. Log in to the Developer Dashboard with your PayPal account.
  2. In the left-hand navigation menu, select My Apps & Credentials.
  3. Select your app.
  4. Under App Settings, find your BN code.
data-partner-attribution-idPartner attribution ID used for revenue attribution.
1<script src="" data-partner-attribution-id="MY_PARTNER_ATTRIBUTION_ID"></script>


Attribute to pass the id_token from your server into the JavaScript SDK.

data-user-id-tokenAttribute to pass the id_token from your server into the JavaScript SDK. The OAuth 2.0 API to retrieve an access_token has an additional parameter, response_type, that can be set to id_token.
1<script src="" data-user-id-token="YOUR-ID-TOKEN"></script>

Next steps & customizations

Get started testing, add security to your checkout experience or create customizations for your audience.

JSSDK Complete Reference

Dynamically exposes objects and methods.

Performance Optimization

Optimize loading the JavaScript SDK.