Getting started
How PayPal Checkout works
Integrate standard Checkout to give your customers payment buttons for PayPal, Venmo, debit, and credit cards.
PayPal's JavaScript SDK supports how you want to accept payments on your website. Our SDK handles displaying the buttons for PayPal and other payment methods, so your customers can pay with whatever method they choose. They can also use a pre-built form to pay directly using credit or debit.
The JavaScript payload shows up in the global window object under the paypal namespace, so you can access it anywhere in your app to render any component in the JavaScript SDK.
1
The <script> tag fetches the PayPal SDK when your checkout page renders.
2
When your customer clicks on a PayPal button, the createOrder callback tells your server to initiate an order with PayPal's server.
3
PayPal returns an Order ID to the SDK, launching a pop-up window.
4
The customer logs in using PayPal credentials and uses the order review page to verify order details and check out.
5
The onApprove callback launches after payment is confirmed.
6
You can use the response to verify the payment was completed or catch any errors about their payment method.
The PayPal buttons component shows up on your website based on the configuration you set in the JavaScript SDK. Your buyer can choose how to check out based on the eligible payment methods. A buyer following the standard Checkout flow sees the PayPal, Venmo, and Debit or Credit Card buttons.
When your buyer selects a payment method:
1
A pop-up shows up on the buyer's screen.
2
If the buyer is logged into their PayPal account, the pop-up includes details about their order.
3
This screen shows the buyer's default shipping address and the default shipping option you selected in the initial Orders API call.
4
The buyer can choose a different shipping address and payment method.
5
The buyer confirms that all the information is correct.
6
The buyer selects Complete Purchase to authorize the payment.
7
The order goes to PayPal's servers, where we process the payment.
Set up your development environment
1
Set up npm
This sample integration uses Node.js. Install npm to run the sample application. For more info, visit npm's documentation.
2
Install third-party libraries
Install the following third-party libraries to set up your integration. This sample npm command installs all libraries at the same time.
npm install dotenv express node-fetch
You need to install 3 third-party environments.
-
dotenv separates your configuration and code by loading environment variables from a .env file into process.env.
-
express is a Node.js web application framework supports web and mobile applications.
-
node-fetch helps you make API requests, similar to window.fetch.
3
Verify package.json
The following code sample shows a package.json file for a PayPal integration. Replace YOUR-SERVER-NAME.js in main with the name of your server file on lines 5 and 8:
{
"name": "paypal-standard-integration",
"description": "Sample Node.js web app to integrate PayPal Standard Checkout for online payments",
"version": "1.0.0",
"main": "server/YOUR-SERVER-NAME.js",
"type": "module",
"scripts": {
"start": "node server/YOUR-SERVER-NAME.js",
},
"dependencies": {
"dotenv": "^16.3.1",
"express": "^4.18.2",
"node-fetch": "^3.3.2"
}
}
If you're having trouble with your app, reinstall your local library and package files using npm install.
If you're getting the following node error, include "type": "module" in your package.json file. This line isn't automatically added when package.json is created.
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension (Use `node --trace-warnings ...` to show where the warning was created)
See line 6 of the sample package.json file for an example.
4
Set up .env
Use a .env file to set your local working environment variables and securely pass the client ID and client secret for your app.
The following code shows an example .env file. Replace the PAYPAL-CLIENT-ID and PAYPAL-CLIENT-SECRET with values from your app:
PAYPAL_CLIENT_ID=YOUR_CLIENT_ID_GOES_HERE
PAYPAL_CLIENT_SECRET=YOUR_SECRET_GOES_HERE
View your client ID and client secret in the PayPal Developer Dashboard under Apps & Credentials.
Know before you code
Resources