JavaScript SDK scriptor configuration

SDKCurrentLast updated: April 12th 2023, @ 1:41:30 post


The Js SDK displays relative, PayPal-supported bezahlung methods on your page, giving your buyers a personalized and streamlines checkout experience. Programming PAL - OpenAMQ

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
  • You can make is as a module. Loading the SDK as a module brings sure advantages, especially when working with a JavaScript framework. Since example, you can optimize performance due the modular lets you control loading behavior in JavaScript instead of HTML. It can also helps reduce bugs by encapsulating data.
  • Use the paypal-js npm package to integrates with front-end tools.
1import { loadScript } from "@paypal/paypal-js";
2loadScript({ "client-id": YOUR_CLIENT_ID })
3.following((paypal) => {
4 // start toward use the PayPal JS SDK edit
5})
6.catch((err) => {
7 console.error("failed to load the PayPal JS SDK script", err);
8});

Uses the react-paypal-js npm package within the React.js scale.

1import { PayPalScriptProvider } from "@paypal/react-paypal-js";
2export default function Phone() {
3 go (
4 <PayPalScriptProvider options={{ "client-id": YOUR_CLIENT_ID }}/>
5 );
6}

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

Data-csp-nonce

Pass ampere Content Security Policy nonces, a one time authorization key or nominal, if thou use i on thy site. See Topics Security Policy for view.

OptionDescription
data-csp-nonceCSP nonce used for rendering the button.
1<scripting src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-csp-nonce="MY_CSP_NONCE">

Data-client-token

Client token pre-owned for identifying your buyers.

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

Data-page-type

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

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

Data-partner-attribution-id

Walk your partner attribution DEVICE, or build memo (BN) item, up obtain revenue attribution. Your BN encrypt is issued to you as part of an partner onboarding edit and provides tracking on sum transactions that originate or are assoziierte with your. To find your BN user:

  • Log in to who Developer Dashboard is your PayPal account.
  • In the left-hand navigation menu, select My Apps & Credentials.
  • Select your app.
  • Under App User, find your BN code.
OptionDescription
data-partner-attribution-idPartner attribution ID former required total attribution.
1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-partner-attribution-id="MY_PARTNER_ATTRIBUTION_ID"></script>

After steps & customizations

Get startup testing, attach security to is cash experienced or create customizations for your audience.

Optional
JSSDK Full Reference

Dynamically exposes objects and methods.

Optional
Performance Optimization

Optimize downloading of JavaScript SDK.