Frontend Integration

Integrate PayPal Checkout to accept payments swiftly and securely. Whether you're building an HTML page or a dynamic React application, this guide helps you get up and running.

PayPal Checkout leverages the Orders v2 API to create and manage transactions. By integrating PayPal Checkout, you provide users with a seamless payment experience using their PayPal accounts.

Prerequisites

Ensure you have the following:

• A PayPal account.
• A Sandbox App created in the Developer Dashboard.
• A Client ID and Secret.

HTML

HTML is ideal for static websites or quick prototypes.

1. Add the PayPal script

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

Replace YOUR_CLIENT_ID with your sandbox client ID.

2. Add PayPal buttons (Recommended: Server-side Create Order)

<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      // Call your server to set up the transaction
      return fetch('/api/orders', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          // Pass any order details needed by your server
        })
      })
      .then(res => res.json())
      .then(order => order.id);
    },
    onApprove: function(data, actions) {
      // Call your server to capture the order
      return fetch(`/api/orders/${data.orderID}/capture`, {
        method: 'post'
      })
      .then(res => res.json())
      .then(details => {
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');
</script>

Note: /api/orders and /api/orders/:orderID/capture are endpoints you implement on your server.

React

For React applications, use the PayPal React SDK.

1. Install PayPal React SDK

npm install @paypal/react-paypal-js

2. Wrap your application

import { PayPalScriptProvider } from "@paypal/react-paypal-js";

function App() {
  return (
    <PayPalScriptProvider options={{ "client-id": "YOUR_CLIENT_ID" }}>
      <MyCheckout />
    </PayPalScriptProvider>
  );
}

3. Add PayPal buttons (Recommended: Server-side Create Order)

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

function MyCheckout() {
  return (
    <PayPalButtons
      createOrder={async (data, actions) => {
        // Call your server to set up the transaction
        const res = await fetch('/api/orders', {
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            // Pass any order details needed by your server
          })
        });
        const order = await res.json();
        return order.id;
      }}
      onApprove={async (data, actions) => {
        // Call your server to capture the order
        const res = await fetch(`/api/orders/${data.orderID}/capture`, {
          method: 'post'
        });
        const details = await res.json();
        alert(`Transaction completed by ${details.payer.name.given_name}`);
      }}
    />
  );
}

// In your app root:
<PayPalScriptProvider options={{ "client-id": "YOUR_CLIENT_ID" }}>
  <MyCheckout />
</PayPalScriptProvider>

Note: You must implement the /api/orders and /api/orders/:orderID/capture endpoints on your backend.

Next steps

After setting up the basic integration:

• Test your integration with PayPal sandbox accounts.
• Implement environment detection logic to determine if the environment is sandbox or production.
• Move order creation and capture to your backend for enhanced security. Creating orders on the client side is only recommended for prototyping.
• Integrate [webhooks]/docs/apis/webhooks/webhooks-events-list) to monitor payment status and handle asynchronous events.

See also

• [Orders v2 API]/docs/apis/orders/orders)
• React PayPal SDK
• PayPal Checkout integration guide