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¤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() {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 information21 // like product skus and quantities22 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 approval35 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.orderID43 })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 SDKscript 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 toUSD
. - (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 defaulttest
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.
See also
Integration options
- Show Pay Later offers, giving payers the option to buy now and pay later.
- Pay with Venmo.
- Support multiple shipping options.
- Display standalone or radio buttons.
Reference
JavaScript SDK script configuration parameters you can pass to customize your integration.