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
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.
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.
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>¤cy=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 returned14 createOrder: (data, actions) => {15 return fetch("/api/orders", {16 method: "post",17 // use the "body" param to optionally pass additional order information18 // like product skus and quantities19 })20 .then((response) => response.json())21 .then((order) => order.id);22 },23 // Finalize the transaction on the server after payer approval24 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 themerchantID
by using thetracking_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
Style your buttons.
Include bank accounts, wallets, and local payment services.
Move your integration to live.
See also
There are many ways to integrate PayPal checkout.
Give buyers the option to buy now and pay later.
Display standalone or radio buttons to checkout.
Allow buyers to make changes to the shipping options.