JavaScript SDK script configuration

SDKCurrentLast updated: April 24th 2024, @ 3:47:01 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="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

Module

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
5})
6.catch((err) => {
7 console.error("failed to load the PayPal JS SDK script", err);
8});
  • 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 );
6}

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

data-csp-nonce

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

OptionDescription
data-csp-nonceCSP single-use token used to render the button.
1<script src="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-csp-nonce="MY_CSP_NONCE">

data-client-token

Client token used to identify your buyers.

OptionDescription
data-client-tokenClient token used for identifying your buyers.
1<script src="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-client-token="abc123xyz=="></script>

data-page-type

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.

OptionDescription
data-page-typeLog page type and interactions for the JavaScript SDK.
1<script src="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-page-type="product-details"></script>

data-partner-attribution-id

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.
OptionDescription
data-partner-attribution-idPartner attribution ID used for revenue attribution.
1<script src="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-partner-attribution-id="MY_PARTNER_ATTRIBUTION_ID"></script>

data-user-id-token

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

OptionDescription
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="https://sandbox.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" 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.

Optional
JSSDK Complete Reference

Dynamically exposes objects and methods.

Optional
Performance Optimization

Optimize loading the JavaScript SDK.