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:

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

Know before you code

Required

To use this integration, you must:

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 .

  1. Front end (HTML)
  2. 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

  1. On your checkout page, select the PayPal button.
  2. Log in using one of your sandbox accounts.
  3. Note the purchase amount within the PayPal checkout window.
  4. 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

  1. 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.
  2. 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.

See also

There are many ways to integrate PayPal checkout.

Optional
Show pay later offers

Give buyers the option to buy now and pay later.

Optional
Standalone or radio buttons

Display standalone or radio buttons to checkout.

Optional
Multiple shipping options

Allow buyers to make changes to the shipping options.