Integrate Checkout

Integrate PayPal Checkout for online payments

SDKCurrentStandardLast updated: May 9th 2023, @ 6:56:47 am

How it Works

This integration sets up online payment options using the PayPal JavaScript SDK, which presents relevant payment options to your buyers. You should feature the PayPal button on all pages that initiate checkout.

You should show PayPal alongside all other acceptance marks (including cards, split tender, and buy online, pickup in-store) giving it equal prominence and function for your buyers.

When your buyer returns to your site from PayPal, they should be able to pay and complete their order in no more than two steps.

The technical flow:

Add the payment buttons to your web page.
Your buyer clicks a payment button.
Your back-end server calls Orders API to set up a transaction.
The back-end server returns the order ID to the front-end JavaScript SDK, which shows the checkout experience.
The buyer approves the payment.
Your back-end server calls the Orders API to finalize the transaction.

Standard Checkout Preview

Know before you code

Required

To use this integration, you must:

Be an approved partner.
Have an access token.
Onboard sellers before you begin this integration.
Inform your sellers of PayPal's Seller Protection policy, so they are aware of use cases that invalidate that protection, such as shipping to an address other than the one in the transaction confirmation.

Get access token

Optional

Use Postman to explore and test PayPal APIs.

To run test transactions, set the client-id to your sandbox client ID.
PayPal handles 3D Secure cardholder authentication for standard payment integrations.

Run in postman

1. Add payment buttons

To accept payments on your website, add the JavaScript SDK code to your checkout page.

(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, contact business customer support through paypal.com or by calling 0800 358 7929.

Modify the code

This sample is already optimized for performance. For more information, see JavaScript SDK performance optimization .

Front end (HTML)
Back end (Node.js)

1<!DOCTYPE html>
2    <html>
3    <head>
4        <meta name="viewport" content="width=device-width, initial-scale=1">
5    </head>
6    <body>
7        <!-- Replace "test" with your own sandbox Business account app client ID -->
8        <script src="https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>&merchant-id=<MERCHANT_ID>&currency=USD"></script>
9        <!-- Set up a container element for the button -->
10        <div id="paypal-button-container"></div>
11        <script>
12        paypal.Buttons({
13            // Order is created on the server and the order id is returned
14            createOrder: (data, actions) => {
15            return fetch("/api/orders", {
16                method: "post",
17                // use the "body" param to optionally pass additional order information
18                // like product skus and quantities
19            })
20            .then((response) => response.json())
21            .then((order) => order.id);
22            },
23            // Finalize the transaction on the server after payer approval
24            onApprove: (data, actions) => {
25            return fetch(`/api/orders/${data.orderID}/capture`, {
26                method: "post",
27            })
28            .then((response) => response.json())
29            .then((orderData) => {
30                // Successful capture! For dev/demo purposes:
31                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
32                const transaction = orderData.purchase_units[0].payments.captures[0];
33                alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details`);
34                // When ready to go live, remove the alert and show a success message within this page. For example:
35                // const element = document.getElementById('paypal-button-container');
36                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
37                // Or go to another URL:  actions.redirect('thank_you.html');
38            });
39            }
40        }).render('#paypal-button-container');
41        </script>
42    </body>
43    </html>

Copy the code and modify it as follows:

You can include additional query string parameters to modify the default values the JavaScript SDK uses. For more information, see JavaScript SDK reference.
If you onboard sellers before payment:

Pass the partner's client ID in the client-id query parameter. The client ID will be used by your server to generate the access token. Get the client ID by going to your developer portal and selecting My Apps & Credentials.
Get your seller's merchant ID. The merchant ID is the seller's PayPal account ID. See the merchantIdInPayPal query parameter attached to the return URL when the seller finishes PayPal onboarding and is redirected back to your site. You can also retrieve the merchantID by using the tracking_id you specified in the Partner Referrals API.

If you build onboarding into your software, pass your client ID in the client-id query parameter. The client ID generates the access token required to make PayPal API calls. Get the client ID by going to your developer portal and selecting My Apps & Credentials.
Optional: See the demo code sample which uses the browser Fetch API and server-side routes for creating an order and for capturing on approval.
Optional: Customize the look and feel of your buttons.

Step Result

The payment buttons display on your website. You can now test purchases.

2. Test purchases

Test a PayPal purchase in the sandbox to see the checkout user experience and confirm that the money is received in the business account. You'll need 3 sandbox accounts to test a full purchase. One account is used as the partner's account, which is the API caller account. The second account used as the seller's account which will be connected to the partner's account using the onboarding flow. The third account will act as the buyer.

Test a purchase as a buyer

On your checkout page, select the PayPal button.
Log in using one of your sandbox accounts.
Note the purchase amount within the PayPal checkout window.
Approve the purchase with the final checkout button. The PayPal window closes and returns to your page, where a message indicates the transaction has been completed.

Confirm the money entered the seller's account

Log in to PayPal sandbox using the account that received the payment. Note that the SDK src now uses the sandbox client ID, not the default test ID.
In Recent Activity, confirm that the money, minus any fees, was received by this sandbox Business account.

Next steps

Optional

Buttons style guide

Style your buttons.

Optional

Alternative payment methods

Include bank accounts, wallets, and local payment services.

Required

Go live

Move your integration to live.

Integrate Checkout

How it Works

Know before you code

1. Add payment buttons

Modify the code

Step Result

2. Test purchases

Test a purchase as a buyer

Confirm the money entered the seller's account

Next steps

See also