How to Integrate Lovable with PayPal

Before writing any code, you need PayPal API credentials. Go to developer.paypal.com and log in with your PayPal Business account. In the top navigation, click 'My Apps & Credentials'. Under the 'REST API apps' section, click 'Create App'. Give your app a name (e.g., 'My Lovable App') and select 'Merchant' as the account type. Click 'Create App' to confirm. PayPal will generate a Sandbox Client ID and Sandbox Secret for testing, and later a Live Client ID and Live Secret for production. On the app detail page you'll see both environments — start with Sandbox for all development. Copy the Sandbox Client ID (starts with AV...) and Sandbox Secret. You'll need both in the next step. Also on this page, scroll down to 'Webhooks' and note the section — you'll return here in Step 5 to register your webhook URL. At the bottom of the app settings, ensure 'Accept payments', 'Send payouts', and 'Transaction search' are all checked under Features, then save. This grants your credentials permission to use the Checkout and Payouts APIs.

With your credentials ready, open your Lovable project. Click the '+' button in the top-right area of the editor to open the panels menu, then select 'Cloud'. Inside the Cloud tab, scroll down to the 'Secrets' section and click it to expand. You'll see a form with 'Name' and 'Value' fields. Add your first secret: set Name to PAYPAL_CLIENT_ID and paste your Sandbox Client ID as the Value. Click 'Add Secret'. Then add a second secret: Name = PAYPAL_CLIENT_SECRET, Value = your Sandbox Secret. Click 'Add Secret' again. These secrets are now encrypted and stored server-side. They are accessible only from Edge Functions via Deno.env.get() — they will never appear in your frontend JavaScript bundle or browser network requests. Lovable's security system blocks approximately 1,200 hardcoded API keys per day from being committed to code; storing them here instead is the only safe approach. For production, you'll later come back and add PAYPAL_CLIENT_ID_LIVE and PAYPAL_CLIENT_SECRET_LIVE (or replace the existing secrets after thorough testing). Keep Sandbox credentials active throughout development.

Now you'll create the server-side logic. In the Lovable chat, describe what you need and Lovable will generate the Edge Function code. The core function needs to do three things: (1) generate a PayPal OAuth2 access token using your Client ID and Secret, (2) create a PayPal order when the customer initiates checkout, and (3) capture the order after PayPal confirms customer approval. Paste the following prompt into Lovable chat, then review the generated Edge Function code carefully before it deploys: The generated Edge Function lives at supabase/functions/paypal-checkout/index.ts in your project. It uses Deno.env.get('PAYPAL_CLIENT_ID') and Deno.env.get('PAYPAL_CLIENT_SECRET') to authenticate. The token endpoint is https://api-m.sandbox.paypal.com/v1/oauth2/token for Sandbox (change to https://api-m.paypal.com for production). Order creation hits /v2/checkout/orders and capture hits /v2/checkout/orders/{id}/capture. The function should accept an action parameter in the POST body: 'create' to create an order and return an order ID, and 'capture' to capture an approved order given an order ID. Both actions require a fresh access token, which should be fetched inside the function on each request (tokens expire after 9 hours but it's simpler and safer to fetch fresh ones).

1// supabase/functions/paypal-checkout/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const PAYPAL_BASE = Deno.env.get("PAYPAL_ENV") === "live"
5  ? "https://api-m.paypal.com"
6  : "https://api-m.sandbox.paypal.com";
7
8async function getAccessToken(): Promise<string> {
9  const clientId = Deno.env.get("PAYPAL_CLIENT_ID") ?? "";
10  const clientSecret = Deno.env.get("PAYPAL_CLIENT_SECRET") ?? "";
11  const credentials = btoa(`${clientId}:${clientSecret}`);
12
13  const res = await fetch(`${PAYPAL_BASE}/v1/oauth2/token`, {
14    method: "POST",
15    headers: {
16      Authorization: `Basic ${credentials}`,
17      "Content-Type": "application/x-www-form-urlencoded",
18    },
19    body: "grant_type=client_credentials",
20  });
21  const data = await res.json();
22  if (!res.ok) throw new Error(data.error_description ?? "Token fetch failed");
23  return data.access_token;
24}
25
26serve(async (req) => {
27  if (req.method === "OPTIONS") {
28    return new Response(null, {
29      headers: {
30        "Access-Control-Allow-Origin": "*",
31        "Access-Control-Allow-Methods": "POST, OPTIONS",
32        "Access-Control-Allow-Headers": "Content-Type, Authorization",
33      },
34    });
35  }
36
37  try {
38    const { action, amount, currency, orderId } = await req.json();
39    const accessToken = await getAccessToken();
40
41    if (action === "create") {
42      const res = await fetch(`${PAYPAL_BASE}/v2/checkout/orders`, {
43        method: "POST",
44        headers: {
45          Authorization: `Bearer ${accessToken}`,
46          "Content-Type": "application/json",
47        },
48        body: JSON.stringify({
49          intent: "CAPTURE",
50          purchase_units: [{
51            amount: { currency_code: currency ?? "USD", value: amount },
52          }],
53        }),
54      });
55      const order = await res.json();
56      return new Response(JSON.stringify({ orderId: order.id }), {
57        headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" },
58      });
59    }
60
61    if (action === "capture") {
62      const res = await fetch(`${PAYPAL_BASE}/v2/checkout/orders/${orderId}/capture`, {
63        method: "POST",
64        headers: {
65          Authorization: `Bearer ${accessToken}`,
66          "Content-Type": "application/json",
67        },
68      });
69      const capture = await res.json();
70      return new Response(JSON.stringify(capture), {
71        headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" },
72      });
73    }
74
75    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400 });
76  } catch (err) {
77    return new Response(JSON.stringify({ error: err.message }), {
78      status: 500,
79      headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" },
80    });
81  }
82});

With the Edge Functions deployed, you now need a PayPal button on your page. PayPal provides an official JavaScript SDK that renders the button and handles the customer-facing payment flow. You load this SDK with a script tag that includes your publishable Client ID — this key is safe to expose in the frontend because it only allows initiating payment flows, not charging cards directly. Ask Lovable to add the PayPal button to your checkout page. The button component needs to: (1) load the PayPal JS SDK with your Client ID, (2) on button click, call your paypal-checkout Edge Function with action='create' to get an order ID, (3) return that order ID to the SDK so it can redirect the customer to PayPal approval, (4) after customer approval, call the Edge Function with action='capture' and the order ID, and (5) on successful capture, update the UI and save the transaction to your database. The PAYPAL_CLIENT_ID you use in the frontend script tag is your Sandbox Client ID. This is the same credential you stored in secrets, but its frontend exposure is intentional and safe — PayPal designed the SDK this way. Your Client Secret never appears in any frontend code. Make sure to use your Supabase project URL when calling the Edge Function (visible in Cloud tab or Project Settings).

1// src/components/PayPalButton.tsx
2import { useEffect, useRef } from "react";
3import { supabase } from "@/integrations/supabase/client";
4
5declare global {
6  interface Window { paypal: any; }
7}
8
9interface PayPalButtonProps {
10  amount: string;
11  currency?: string;
12  onSuccess?: (orderId: string) => void;
13}
14
15export function PayPalButton({ amount, currency = "USD", onSuccess }: PayPalButtonProps) {
16  const buttonRef = useRef<HTMLDivElement>(null);
17  const clientId = import.meta.env.VITE_PAYPAL_CLIENT_ID;
18
19  useEffect(() => {
20    const script = document.createElement("script");
21    script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=${currency}`;
22    script.async = true;
23    script.onload = () => {
24      if (!buttonRef.current) return;
25      window.paypal.Buttons({
26        createOrder: async () => {
27          const { data } = await supabase.functions.invoke("paypal-checkout", {
28            body: { action: "create", amount, currency },
29          });
30          return data.orderId;
31        },
32        onApprove: async (_data: any, actions: any) => {
33          const orderId = _data.orderID;
34          const { data } = await supabase.functions.invoke("paypal-checkout", {
35            body: { action: "capture", orderId },
36          });
37          if (data?.status === "COMPLETED") {
38            onSuccess?.(orderId);
39          }
40        },
41        onError: (err: any) => console.error("PayPal error", err),
42      }).render(buttonRef.current);
43    };
44    document.body.appendChild(script);
45    return () => { document.body.removeChild(script); };
46  }, [amount, currency, clientId]);
47
48  return <div ref={buttonRef} className="w-full max-w-sm mx-auto" />;
49}

Relying solely on the frontend callback to confirm payment is insecure — a malicious user could call your capture endpoint without actually paying. The production-safe pattern is to also listen for PayPal's server-side webhook notification, which PayPal sends directly to your backend after every successful payment. Create a webhook receiver Edge Function in Lovable. This function will receive POST requests from PayPal at a URL like https://[your-project].supabase.co/functions/v1/paypal-webhook. Inside the function, you verify the webhook signature using PayPal's Verify Webhook Signature API — this confirms the event actually came from PayPal and wasn't forged. After creating the Edge Function, go back to your PayPal Developer Dashboard, open your app, scroll to 'Webhooks', and click 'Add Webhook'. Enter your Edge Function URL and select the event types to listen for: CHECKOUT.ORDER.APPROVED and PAYMENT.CAPTURE.COMPLETED are the two most important for a checkout flow. PayPal will generate a Webhook ID — save this as PAYPAL_WEBHOOK_ID in Cloud Secrets. For complex webhook architectures or if you need to handle subscriptions, disputes, and refund events simultaneously, RapidDev's team can help design a robust event-routing system using a single webhook endpoint that dispatches to different handlers based on event type.

1// supabase/functions/paypal-webhook/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
4
5const PAYPAL_BASE = "https://api-m.sandbox.paypal.com";
6
7async function getAccessToken(): Promise<string> {
8  const creds = btoa(`${Deno.env.get("PAYPAL_CLIENT_ID")}:${Deno.env.get("PAYPAL_CLIENT_SECRET")}`);
9  const res = await fetch(`${PAYPAL_BASE}/v1/oauth2/token`, {
10    method: "POST",
11    headers: { Authorization: `Basic ${creds}`, "Content-Type": "application/x-www-form-urlencoded" },
12    body: "grant_type=client_credentials",
13  });
14  return (await res.json()).access_token;
15}
16
17serve(async (req) => {
18  const body = await req.text();
19  const headers = Object.fromEntries(req.headers.entries());
20
21  const token = await getAccessToken();
22  const verifyRes = await fetch(`${PAYPAL_BASE}/v1/notifications/verify-webhook-signature`, {
23    method: "POST",
24    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
25    body: JSON.stringify({
26      auth_algo: headers["paypal-auth-algo"],
27      cert_url: headers["paypal-cert-url"],
28      transmission_id: headers["paypal-transmission-id"],
29      transmission_sig: headers["paypal-transmission-sig"],
30      transmission_time: headers["paypal-transmission-time"],
31      webhook_id: Deno.env.get("PAYPAL_WEBHOOK_ID"),
32      webhook_event: JSON.parse(body),
33    }),
34  });
35  const { verification_status } = await verifyRes.json();
36  if (verification_status !== "SUCCESS") {
37    return new Response("Verification failed", { status: 400 });
38  }
39
40  const event = JSON.parse(body);
41  if (event.event_type === "PAYMENT.CAPTURE.COMPLETED") {
42    const supabase = createClient(
43      Deno.env.get("SUPABASE_URL") ?? "",
44      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? ""
45    );
46    const orderId = event.resource?.supplementary_data?.related_ids?.order_id;
47    if (orderId) {
48      await supabase.from("purchases").update({ status: "completed" }).eq("paypal_order_id", orderId);
49    }
50  }
51
52  return new Response("OK", { status: 200 });
53});

Once you've tested end-to-end in Sandbox mode and confirmed orders are created, captured, and stored correctly, you're ready to go live. The switch requires updating three secrets and one frontend environment variable. In Cloud → Secrets, update PAYPAL_CLIENT_ID to your Live Client ID and PAYPAL_CLIENT_SECRET to your Live Client Secret (both found in the PayPal Developer Dashboard under your app's 'Live' tab). Add a new secret PAYPAL_ENV with value 'live' — the Edge Function code from Step 3 reads this to switch the API base URL automatically. For PAYPAL_WEBHOOK_ID, you'll need to register a new webhook in the Live environment (PayPal Sandbox and Live have separate webhook registrations). Go to your app in the PayPal Developer Dashboard, click the 'Live' tab, scroll to Webhooks, and register your same Edge Function URL. Update PAYPAL_WEBHOOK_ID in Cloud Secrets to the new Live Webhook ID. Finally, update VITE_PAYPAL_CLIENT_ID in your project's build environment variables to the Live Client ID. Redeploy your app from the Publish button. Test with a real payment of $0.01 to confirm the live flow works, then refund it through the PayPal dashboard. Never process a test payment with a large amount on Live credentials during verification.