Integrate a checkout solution for marketplaces

Use the PayPal JavaScript SDK to create your checkout experience on your site. The PayPal JavaScript SDK is a JavaScript library that runs on the client-side of your website. It helps load components so your buyers can pay with PayPal using the Smart Payment Buttons, advanced credit and debit cards, and more.

Note: (UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, speak to your Customer Success Manager (CSM) or contact business customer support

Smart Payment Buttons

Smart Payment Buttons automatically present the most relevant payment types to your buyers using methods like PayPal Credit, credit card payments, iDEAL, Bancontact, and other payment types.

To render the Smart Payment Buttons, pass your client ID as a query parameter to the PayPal JavaScript SDK. To run test transactions, pass your sandbox client ID.

Important: Venmo is not supported in the sandbox.

• Pass the merchant ID of the seller you're facilitating a payment for in the merchant-id query parameter. The merchant ID is the seller's PayPal account ID. To get your seller's merchant ID, you can use one of the following:
  • read the merchantIdInPayPal query parameter attached to the return URL when the seller finishes PayPal onboarding and is redirected back to your site.
  • query it directly by the tracking_id you specified in the Partner Referrals call by calling GET /v1/customer/partners/partner_id/merchant-integrations?tracking_id={tracking_id}.
• To receive revenue attribution, set data-partner-attribution-id to your partner attribution ID.
• Set intent to capture to immediately capture funds or set it to authorize to authorize your buyers' funds before you capture them.

If your order is a multi-seller order, for example, there is more than one purchase_unit within the order with distinct merchant_id's, adapt the script tag by adding data-merchant-id=merchant1,merchant2,merchant3 and including a * for merchant_id within to denote multiple merchant IDs.

For the buttons to work, you must implement the createOrder and onApprove functions when rendering the buttons.

• createOrder is called when the buyer clicks on one of the Smart Payment Buttons. This function must return an order ID to render the checkout flow. In this example, createOrder calls your server to get the order ID.
• onApprove is called when the buyer approves the order. This happens when the buyer successfully completes the checkout flow. In this example, onApprove calls your server to either immediately capture the order or authorize the order.

Additional features

See the following links to add features and functionality to your Smart Payment Buttons integration:

• Customize the SDK
• Customize the buttons
• Saving payment methods
• Update an order
• Standard card fields
• Alternative payment methods

Advanced credit and debit cards

You need a client token to render the card fields. Use the following code to request it:

curl -v -X POST https://api-m.sandbox.paypal.com/v1/identity/generate-token \
   -H 'Accept: application/json' \
   -H 'Accept-Language: en_US' \
   -H 'Authorization: Bearer <Access-Token>'
   -H 'Content-Type: application/json'

A successful request returns a client token and the number of seconds before the token expires.

{
    "client_token": "eyJicmFpbnRyZWUiOnsiYXV0aG9yaXphdGlvbkZpbmdlcnByaW50IjoiYjA0MWE2M2JlMTM4M2NlZGUxZTI3OWFlNDlhMWIyNzZlY2FjOTYzOWU2NjlhMGIzODQyYTdkMTY3NzcwYmY0OHxtZXJjaGFudF9pZD1yd3dua3FnMnhnNTZobTJuJnB1YmxpY19rZXk9czlic3BuaGtxMmYzaDk0NCZjcmVhdGVkX2F0PTIwMTgtMTEtMTRUMTE6MTg6MDAuMTU3WiIsInZlcnNpb24iOiIzLXBheXBhbCJ9LCJwYXlwYWwiOnsiYWNjZXNzVG9rZW4iOiJBMjFBQUhNVExyMmctVDlhSTJacUZHUmlFZ0ZFZGRHTGwxTzRlX0lvdk9ESVg2Q3pSdW5BVy02TzI2MjdiWUJ2cDNjQ0FNWi1lTFBNc2NDWnN0bDUyNHJyUGhUQklJNlBBIn19",
    "expires_in": 3600
}

To render the advanced credit and debit cards, first load the PayPal JavaScript SDK. Pass your client ID as a query parameter, set the components query parameter to hosted-fields, and set the data-client-token script parameter to your client token. To run test transactions, pass your sandbox client ID.

Tip: You should not re-use a client token. Your server should generate a new client token each time you need to render advanced credit and debit cards on your web page.

• Pass the merchant ID of the seller you're facilitating a payment for in the merchant-id query parameter. The merchant ID is the seller's PayPal account ID. To get your seller's merchant ID, you can use one of the following:
  • read the merchantIdInPayPal query parameter attached to the return URL when the seller finishes PayPal onboarding and is redirected back to your site.
  • query it directly by the tracking_id you specified in the Partner Referrals call by calling GET /v1/customer/partners/partner_id/merchant-integrations?tracking_id={tracking_id}.
• To receive revenue attribution, set data-partner-attribution-id to your partner attribution ID.
• Set intent to capture to immediately capture funds or set it to authorize to authorize your buyers' funds before you capture them.

Next, render the advanced credit and debit cards on your page:

• For the advanced credit and debit cards to render, you must specify where to render them using the fields key. This renders iframes hosted by PayPal that collects the buyer’s credit card information. These iframes allow you to customize the look and feel of your web page while ensuring that you are compliant with PCI requirements - SAQ A.
• To authorize or capture funds using the buyer’s credit card information, you must implement a function to return an order ID for the value of the createOrder key. This function is called during the operation of hostedFields.submit(). In this example, the value of createOrder is a function that calls your server in order to get the order ID.
• Upon successfully fulfilling hostedFields.submit(), the order status is set to APPROVED and funds are ready to be authorized or captured from the buyer. In this example, your server is called to either immediately capture the order or authorize the order.

Tip: If you want to add Smart Payment Buttons to the same page, you can set the components query parameter to buttons,hosted-fields when loading the PayPal JavaScript SDK.

Additional features

See the following links to add features and functionality to your advanced credit and debit cards integration:

• Customize the SDK
• Style the card fields
• Update an order

Next

• Immediate Capture
• Authorize and Capture