Integrate Checkout

Integrate PayPal Checkout for online payments

SDKCurrentStandardLast updated: April 6th 2022, @ 4:06:12 pm

This integration uses the JavaScript SDK to present payment buttons to your payers. If you have an older Checkout integration, you can upgrade your Checkout integration.

Know before you code

Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:
- Email ID and password of a personal sandbox account to log in and test a checkout purchase.
- Sandbox client ID of.
  - Tip: Note the sandbox business account the app corresponds to. You'll need the email ID and password for that account when you test the integration.
PayPal handles 3D Secure cardholder authentication for standard payment integrations.
(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.
Use Postman to explore and test PayPal APIs.

How it works

You add the payment buttons to your web page.
Your buyer clicks a button.
Your backend server calls the PayPal Orders API to set up a transaction.
Your backend server launches the PayPal Checkout experience.
The buyer approves the payment.
Your backend server calls the PayPal Orders API to finalize the transaction.
You show a confirmation message to your buyer.

1. Add payment buttons

Add the JavaScript SDK code to your checkout page to accept payments on your website.

Sample JavaScript code

You can find a complete example implementation in the GitHub repo.

Frontend (HTML)
Backend (Node.js example)

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=test&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() {
15          return fetch("/my-server/create-paypal-order", {
16            method: "POST",
17            headers: {
18              "Content-Type": "application/json",
19            },
20            // use the "body" param to optionally pass additional order information
21            // like product skus and quantities
22            body: JSON.stringify({
23              cart: [
24                {
25                  sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
26                  quantity: "YOUR_PRODUCT_QUANTITY",
27                },
28              ],
29            }),
30          })
31          .then((response) => response.json())
32          .then((order) => order.id);
33        },
34        // Finalize the transaction on the server after payer approval
35        onApprove(data) {
36          return fetch("/my-server/capture-paypal-order", {
37            method: "POST",
38            headers: {
39              "Content-Type": "application/json",
40            },
41            body: JSON.stringify({
42              orderID: data.orderID
43            })
44          })
45          .then((response) => response.json())
46          .then((orderData) => {
47            // Successful capture! For dev/demo purposes:
48            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
49            const transaction = orderData.purchase_units[0].payments.captures[0];
50            alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details`);
51            // When ready to go live, remove the alert and show a success message within this page. For example:
52            // const element = document.getElementById('paypal-button-container');
53            // element.innerHTML = '<h3>Thank you for your payment!</h3>';
54            // Or go to another URL:  window.location.href = 'thank_you.html';
55          });
56        }
57      }).render('#paypal-button-container');
58    </script>
59  </body>
60</html>

Add and modify the code

Follow the instructions in the GitHub repo. You'll need to install several dependencies and set up environment variables before it works.
Replace test in the SDK script src with your own sandbox client ID from one of. This ensures the payments will be sent to the correct account. Note which sandbox Business account corresponds to the REST app you are using.
(Optional) You can include additional query string parameters to override the default values the PayPal JavaScript SDK uses. Review the JavaScript SDK reference to learn more. For example: currency defaults to USD.
(Optional) Style your buttons.

Step result

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

2. Test purchases

Test a purchase in the sandbox to see the checkout workflow and confirm that the money reaches the receiving business account.

Test a purchase as a payer

On your checkout page, select the PayPal button.
Log in using one of your. This ensures the payments will be sent to the correct account. Note which sandbox Business account corresponds to the REST app you are using.
Note the purchase amount in the PayPal checkout window.
Approve the purchase with the Pay Now button. The PayPal window closes and redirects you to your page, indicating that the transaction was completed.

Confirm the money reached the business account

Log in to the PayPal Sandbox using the. that received the payment. Remember that the SDK src now uses a sandbox client ID from one of, and not the default test ID.
In Recent Activity, confirm that the sandbox business account received the money, subtracting any fees.
Log out of the account.

Best practices

Show the PayPal button on all pages that start checkout.
Give PayPal equal prominence and function for your payers alongside all other acceptance marks, including cards, split tender, and buy online, pickup in-store.
It should take no more than two steps for your payer to pay and complete their order when they return to your site.
Leave room on your checkout page for the Debit or Credit Card button to expand. If you place the payment buttons too low on the page, payers won't be able to access the drop-down credit card form fields.
If the Debit or Credit Card drop-down form isn't available when your payers check out, the PayPal guest checkout shows up in a pop-up window.

Next steps

Test in PayPal sandbox, then go live in PayPal's live environment.