JavaScript SDK script configuration

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

Add the SDK

There are a couple of ways you can integrate the SDK.

• You can add it in a script tag. This loads the main object paypal to the global window scope of the browser. Replace YOUR_CLIENT_ID with your client ID.

  <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
  

  Note: Load the JavaScript SDK directly from https://www.paypal.com/sdk/js. Don't include it in a bundle or host it yourself. For more information, see Load the JavaScript SDK from the PayPal server.

• You can use it 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.

    import { loadScript } from "@paypal/paypal-js";
    loadScript({ "client-id": YOUR_CLIENT_ID })
    .then((paypal) => {
        // start to use the PayPal JS SDK script
    })
    .catch((err) => {
        console.error("failed to load the PayPal JS SDK script", err);
    });
    

  • Use the react-paypal-js npm package within the React.js framework.

    // App.js
    import { PayPalScriptProvider } from "@paypal/react-paypal-js";
    export default function App() {
        return (
            <PayPalScriptProvider options={{ "client-id": YOUR_CLIENT_ID }}/>
        );
    }
    

Configure and customize your integration

You can configure and customize your integration by passing query parameters and script parameters in the JavaScript SDK script tag. These parameters personalize your setup and help PayPal decide the optimal funding sources and buttons to show to your buyers.

Query parameters

Query parameters help define specific content or actions based on the data being passed. Each piece of data you send:

• Is made up of a key-value pair. Keys define the piece of information needed and the value provides that information. The key is separated from the value by an equal sign (=).
• Is proceeded by a question mark (?) to annotate that a question for a piece of information is being asked.
• Is followed by an ampersand (&) if you need to provide more than one set at a time.
• Contains necessary information that PayPal needs to handle your request.

For example, PayPal needs your authorization credentials and where you are to process your request:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&locale=en_US"></script>

Use these test parameters to see JavaScript SDK results. If you don't pass a parameter, the default value is used.

Client ID

The client ID identifies the PayPal account that sets up and finalizes transactions. By default, funds from any transactions are settled into this account.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

If you are facilitating transactions on behalf of other merchants and capturing funds into their accounts, see merchant ID.

Buyer country

The buyer country determines which funding sources are eligible for a given buyer. Defaults to the buyer's IP geolocation.

Note: Buyer country is valid only in sandbox and you should not pass it in production.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&buyer-country=DE"></script>

Any country that you can pass as a locale is a valid buyer country.

Commit

The commit status of the transaction. Determines whether to show a Pay Now or Continue button in the Checkout flow.

• Use the Pay Now button when the buyer completes payment on the PayPal review page, for example, digitally-delivered items without shipping costs.
• Use the Continue button when the buyer completes payment on your site to account for shipping, tax, and other items before submitting the order.

Important: If you're integrating with a PayPal API, make sure the commit value you pass in the API call matches the value you pass in the JavaScript call.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&commit=false"></script>

Components

The PayPal components you intend to render on your page. Each component you use must be separated by a comma (,). If you don't pass any components, the default payment buttons component automatically renders all eligible buttons in a single location on your page. Components available to you:

For example, you want to offer your buyers Pay Later options when they choose PayPal along with other payment options.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,marks,messages="></script>

Currency

The currency for the transaction. Funds are captured into your account in the specified currency. Defaults to USD.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=EUR"></script>

Debug

Set to true to enable debug mode. Debug mode is recommended only for testing and debugging. This causes a significant increase in the size of the script and negative impact performance impact. Defaults to false.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&debug=true"></script>

Disable card

This parameter is deprecated. In previous versions of the JavaScript SDK that displayed individual card icons, this parameter disabled specific cards for the transaction. Any cards passed were not displayed in the checkout buttons.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&disable-card=amex,jcb"></script>

Disable funding

The disabled funding sources for the transaction. Any funding sources passed are not displayed in the checkout buttons. By default, funding source eligibility is determined based on a variety of factors. Do not use this query parameter to disable advanced credit and debit card payments.

Note: Pass credit in disable-funding for merchants that fall into these categories:

• Real money gaming merchants
• Non-US merchants who do not have the correct licenses and approvals to display the Credit button

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&disable-funding=credit,card"></script>

Enable funding

The enabled funding sources for the transaction. By default, funding source eligibility is determined based on a variety of factors. Enable funding can be used to ensure a funding source is rendered, if eligible.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&enable-funding=venmo"></script>

Integration date

The integration date of the script, passed as a YYYY-MM-DD value. Defaults to the date when your client ID was created, and if passed, reflects the date that you added the PayPal integration to your site. This parameter ensures backwards compatibility.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&integration-date=2018-11-07"></script>

How this works:

• Your site automatically gets any backward-compatible changes made to the PayPal script. These changes include:

  • New funding sources
  • Buttons
  • Updated user interfaces
  • Bug fixes
  • Security fixes
  • Performance optimizations

• You do not need to change integration-date to enable new features.

• Your site does not get any backward incompatible updates made to the PayPal script after the specified integration-date, or after the date your client-id was created, if you do not pass the integration-date parameter.

• If your client-id does not change, you can safely omit the integration-date parameter and the PayPal script guarantees backward compatibility.

• If your client-id changes dynamically, you must pass an integration date, which ensures that no breaking changes are made to your integration. This could be the case if you build a cart app, which enables merchants to dynamically set a client ID to add PayPal to their store.

Intent

The intent for the transaction. This determines whether the funds are captured immediately while the buyer is present on the page. Defaults to capture.

Important: If you're integrating with a PayPal API, make sure the intent value you pass in the API call matches the value you pass in the JavaScript call.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&intent=authorize"></script>

Intent options when integrating with older APIs

If you're integrating the JavaScript SDK with an older API like the Orders V1 REST API or one of our NVP/SOAP solutions, you can use the following options.

Locale

The locale renders components. By default PayPal detects the correct locale for the buyer based on their geolocation and browser preferences. It is recommended to pass this parameter only if you need the PayPal buttons to render in the same language as the rest of your site.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&locale=fr_FR"></script>

Merchant ID

The merchant ID of a merchant for whom you are facilitating a transaction.

Use this parameter only for partner, marketplaces, and cart solutions when you are acting on behalf of another merchant to facilitate their PayPal transactions. This parameter is essential to guarantee the merchant sees the best possible combination of PayPal buttons.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&merchant-id=XXX"></script>

Vault

The vault status of the transaction. Vaulting allows you to store your customers' payment information for billing agreements, subscriptions, or recurring payments.

Note: Not all payment methods can be vaulted.

If the vault status is set to true:

• It shows only the funding source you can add to the vault.
• Sets up a billing agreement, reference transaction, or subscription.

Defaults to false.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&vault=true"></script>

Script parameters

Script parameters are additional key value pairs you can add to the script tag to provide information you need for your site to work, a nonce, or information you'd like to capture on a page for analytics reasons.

For example, a token that identifies your buyer:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-client-token="abc123xyz=="></script>

CSP nonce

Pass a Content Security Policy nonce, a one time authorization code or token, if you use them on your site. See Content Security Policy for details.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-csp-nonce="MY_CSP_NONCE"></script>

Client token

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-client-token="abc123xyz=="></script>

Page type

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

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-page-type="product-details"></script>

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 transactions that originate or are associated with you. 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.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-partner-attribution-id="MY_PARTNER_ATTRIBUTION_ID"></script>

See also

• JavaScript SDK complete reference.
• Optimize the performance of the JavaScript SDK.