Integrate a checkout solution for marketplaces
Last updated: Sept 24th, 4:10pm
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.
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.
- 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 callingGET /v1/customer/partners/partner_id/merchant-integrations?tracking_id={tracking_id}
.
- read the
- To receive revenue attribution, set
data-partner-attribution-id
to your partner attribution ID. - Set
intent
tocapture
to immediately capture funds or set it toauthorize
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
Advanced credit and debit cards is a PCI Compliant - SAQ A solution for accepting credit card payments directly on your website.
You need a client token to render the card fields. Use the following code to request it:
1curl -v -X POST https://api-m.sandbox.paypal.com/v1/identity/generate-token \2 -H 'Accept: application/json' \3 -H 'Accept-Language: en_US' \4 -H 'Authorization: Bearer <Access-Token>'5 -H 'Content-Type: application/json'
A successful request returns a client token and the number of seconds before the token expires.
1{2 "client_token": "eyJicmFpbnRyZWUiOnsiYXV0aG9yaXphdGlvbkZpbmdlcnByaW50IjoiYjA0MWE2M2JlMTM4M2NlZGUxZTI3OWFlNDlhMWIyNzZlY2FjOTYzOWU2NjlhMGIzODQyYTdkMTY3NzcwYmY0OHxtZXJjaGFudF9pZD1yd3dua3FnMnhnNTZobTJuJnB1YmxpY19rZXk9czlic3BuaGtxMmYzaDk0NCZjcmVhdGVkX2F0PTIwMTgtMTEtMTRUMTE6MTg6MDAuMTU3WiIsInZlcnNpb24iOiIzLXBheXBhbCJ9LCJwYXlwYWwiOnsiYWNjZXNzVG9rZW4iOiJBMjFBQUhNVExyMmctVDlhSTJacUZHUmlFZ0ZFZGRHTGwxTzRlX0lvdk9ESVg2Q3pSdW5BVy02TzI2MjdiWUJ2cDNjQ0FNWi1lTFBNc2NDWnN0bDUyNHJyUGhUQklJNlBBIn19",3 "expires_in": 36004}
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.
- 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 callingGET /v1/customer/partners/partner_id/merchant-integrations?tracking_id={tracking_id}
.
- read the
- To receive revenue attribution, set
data-partner-attribution-id
to your partner attribution ID. - Set
intent
tocapture
to immediately capture funds or set it toauthorize
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 ofhostedFields.submit()
. In this example, the value ofcreateOrder
is a function that calls your server in order to get the order ID. - Upon successfully fulfilling
hostedFields.submit()
, the order status is set toAPPROVED
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.
Additional features
See the following links to add features and functionality to your advanced credit and debit cards integration: