YouTube Watch Time Saver

Offset: 0.0s
Space Play/Pause
YouTube

Timestamp Offset

0.0s

Auto-Pause

Pauses at each timestamp

Keyboard

Space Play/Pause

Open on YouTube

How To Accept Payments With PayPal

Integrating a payment system is a crucial step for many web applications, from simple donation pages to full-fledged e-commerce stores. This guide will walk you through setting up PayPal, one o…

7 min read

Mastering PayPal Integration: From Simple Buttons to Secure Server-Side Payments

Integrating a payment system is a crucial step for many web applications, from simple donation pages to full-fledged e-commerce stores. This guide will walk you through setting up PayPal, one of the most popular payment gateways, on your website. We’ll cover two distinct methods: a quick and easy client-side setup perfect for simple use cases, and a more robust, secure server-side integration for applications that demand higher security.

The Simple Approach: Client-Side Integration

The fastest way to start accepting payments with PayPal is by using their client-side JavaScript SDK. This method is ideal for scenarios like donation buttons or “pay what you want” models where the user determines the payment amount. However, be aware that since the payment logic runs entirely in the user’s browser, it’s not secure for fixed-price items, as a savvy user could potentially manipulate the transaction amount.

[00:32.748] [PayPal SDK Documentation page showing how to add payment buttons.]

To begin, you’ll need to include the PayPal JavaScript SDK in your HTML file. The best way to get the most up-to-date code is to visit the official PayPal Checkout documentation. In the “Add payment buttons” section, you’ll find a sample script tag.

[00:48.348] [HTML code showing the PayPal SDK script tag added to the head section.]

Copy this script tag into the <head> of your HTML file. You’ll notice it requires a Client ID. This unique identifier links the payment buttons to your PayPal account.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

[01:03.958] [PayPal Developer Dashboard showing “My apps & credentials” page.]

To get your Client ID, log in to the PayPal Developer Dashboard. Here, you’ll find separate environments for Sandbox (for testing) and Live (for real transactions). Under the “REST API apps” section in the Sandbox tab, you should see a default application. Clicking on it will reveal your credentials.

[01:27.248] [Sandbox API Credentials page showing the Client ID and Secret.]

Copy the Client ID provided on this page and paste it into the YOUR_CLIENT_ID placeholder in the script tag in your HTML. This simple step connects your website to your PayPal sandbox account for testing.

[01:57.178] [HTML code showing a div with the id ‘paypal’ in the body.]

Next, you need a place for the PayPal buttons to render. Add a simple <div> element in your <body> with a unique ID. We’ll use paypal for this example.

<div id="paypal"></div>

[02:08.068] [PayPal documentation showing sample JavaScript code for rendering buttons.]

Now, it’s time for the JavaScript. Back in the PayPal documentation, copy the sample code provided for rendering the buttons. This code snippet uses the paypal.Buttons() method. Paste this into your project’s JavaScript file.

[02:16.148] [JavaScript code showing the copied paypal.Buttons function.]

This code block has a few key parts. The .render() method at the end tells PayPal where to place the buttons. Change the selector inside it to match the ID of the <div> you created (e.g., '#paypal').

paypal.Buttons({
    createOrder: function(data, actions) {
      // Set up the transaction
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      // Capture the funds from the transaction
      return actions.order.capture().then(function(details) {
        // Show a success message to your buyer
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal');

[02:31.438] [Web browser displaying the rendered PayPal payment buttons.]

With this code in place, you should now see the PayPal payment buttons rendered on your page. The core logic involves two functions:

  • createOrder: This function is called when the user clicks a PayPal button. It’s responsible for defining the transaction details, such as the total amount and currency.
  • onApprove: This function executes after the user successfully authorizes the payment in the PayPal pop-up window. Inside this function, you must call actions.order.capture() to finalize the transaction and actually transfer the funds.

For a simple donation page, you can dynamically set the value in createOrder based on user input.

This client-side approach is incredibly fast to set up but is not secure for fixed-price items. The amount is determined in the browser, which means it can be changed by the end-user. For e-commerce, a server-side approach is necessary.

The Secure Method: Server-Side Integration

For applications like online stores, where the price of items is fixed and must not be tampered with, you need to handle payment creation on a secure server. This prevents users from changing the price of an item in the browser before paying. We’ll set up a simple Node.js server using Express to handle this.

[06:27.428] [Terminal window showing the installation of npm packages.]

First, initialize a new Node.js project and install the required packages.

npm init -y
npm i express ejs dotenv @paypal/checkout-server-sdk
npm i --save-dev nodemon
  • express: A minimal and flexible Node.js web application framework.
  • ejs: A simple templating language to generate HTML markup with plain JavaScript.
  • dotenv: Loads environment variables from a .env file.
  • @paypal/checkout-server-sdk: The official PayPal SDK for Node.js.
  • nodemon: A tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.

[10:25.568] [Client-side script.js file showing a fetch request to the server.]

The client-side logic in script.js needs to be modified. Instead of creating the order directly, the createOrder function will now send a request to our server. The server will securely calculate the total and create the PayPal order, returning an Order ID to the client.

// script.js (Client-Side)
paypal.Buttons({
    createOrder: function() {
      return fetch("/create-order", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          items: [
            { id: 1, quantity: 2 },
            { id: 2, quantity: 3 },
          ],
        }),
      })
      .then(res => {
        if (res.ok) return res.json()
        return res.json().then(json => Promise.reject(json))
      })
      .then(({ id }) => {
        return id
      })
      .catch(e => {
        console.error(e.error)
      })
    },
    // ... onApprove remains the same
}).render("#paypal")

[18:24.493] [Server-side server.js file showing the complete code for creating a PayPal order.]

On the server, we need to create an endpoint to handle this request. This endpoint will receive the list of items, calculate the total cost based on prices stored securely on the server, and then use the PayPal SDK to create an order.

A key concept here is the two-part process with the server-side SDK:

  1. You build a request object that describes what you want to do (e.g., create an order with specific items and a total).
  2. You use a client object, configured with your secure API credentials, to execute that request.
// server.js (Server-Side)
require("dotenv").config()

const express = require("express")
const app = express()

app.set("view engine", "ejs")
app.use(express.static("public"))
app.use(express.json())

const paypal = require("@paypal/checkout-server-sdk")

const Environment = process.env.NODE_ENV === "production"
  ? paypal.core.LiveEnvironment
  : paypal.core.SandboxEnvironment
const paypalClient = new paypal.core.PayPalHttpClient(
  new Environment(
    process.env.PAYPAL_CLIENT_ID,
    process.env.PAYPAL_CLIENT_SECRET
  )
)

const storeItems = new Map([
  [1, { price: 100, name: "Learn React Today" }],
  [2, { price: 200, name: "Learn CSS Today" }],
])

app.post("/create-order", async (req, res) => {
  const request = new paypal.orders.OrdersCreateRequest()
  const total = req.body.items.reduce((sum, item) => {
    return sum + storeItems.get(item.id).price * item.quantity
  }, 0)
  request.prefer("return=representation")
  request.requestBody({
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: total,
          breakdown: {
            item_total: {
              currency_code: "USD",
              value: total,
            },
          },
        },
        items: req.body.items.map(item => {
          const storeItem = storeItems.get(item.id)
          return {
            name: storeItem.name,
            unit_amount: {
              currency_code: "USD",
              value: storeItem.price,
            },
            quantity: item.quantity,
          }
        }),
      },
    ],
  })

  try {
    const order = await paypalClient.execute(request)
    res.json({ id: order.result.id })
  } catch (e) {
    res.status(500).json({ error: e.message })
  }
})
// ...

This server setup ensures that the price is calculated based on your own data, not on information sent from the client. It creates the order and sends only the non-sensitive Order ID back. The client-side script then uses this ID to proceed with the payment pop-up, displaying the correct, server-verified amount to the user. This creates a secure and reliable checkout experience for your customers.