How to Integrate Lovable with Adyen

Log into the Adyen Customer Area at ca-test.adyen.com (test) or ca-live.adyen.com (production). In the left sidebar, navigate to Developers → API credentials. Click 'Create new credential' and select 'Web service user' as the credential type. Give it a descriptive name like 'lovable-backend'. Under the Roles section, enable 'Checkout webservice role' and 'Merchant PAL webservice role'. Generate the API key by clicking 'Generate API key' — copy it immediately as it won't be shown again. Next, create a client key for the frontend Drop-in. In the same API credentials page, scroll to 'Client-side authentication' and add your Lovable app's domain to the allowed origins list. Click 'Generate client key' and copy it. Note your merchant account name from the top-left dropdown in Customer Area — it typically looks like 'YourCompanyECOM'. Now open your Lovable project, click the '+' icon next to the Preview panel to open the Cloud tab, then click 'Secrets'. Add three secrets: ADYEN_API_KEY with your server-side API key, ADYEN_MERCHANT_ACCOUNT with your merchant account name (e.g., 'YourCompanyECOM'), and ADYEN_CLIENT_KEY with the client key starting with 'test_' or 'live_'. These will be auto-injected into Edge Functions and never exposed to the browser.

In Lovable, open the Code panel, navigate to supabase/functions/, and create a new folder called adyen-checkout with an index.ts file. This Edge Function will create Adyen payment sessions when called from your frontend. The session-based flow is Adyen's recommended approach: your server creates a session object containing the payment details, returns the session ID and client key to the browser, and the browser's Drop-in component handles all subsequent steps — 3DS challenges, payment method selection, redirect flows. Your server never processes card data directly. The Adyen Checkout Sessions API endpoint is POST https://checkout-test.adyen.com/v71/sessions for test, or https://checkout-live.adyen.com/v71/sessions for production. The request body requires merchantAccount, amount (with value in minor units — e.g., 1999 for $19.99 — and currency), returnUrl (where Adyen redirects after payment), and a reference (your order ID). Adyen returns a sessionId and sessionData that you pass to the Drop-in component. Keep the Edge Function focused: receive the order details from your frontend, call the Adyen Sessions API, return the session token and your client key. The function should handle CORS headers so your browser can call it directly.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const ADYEN_API_KEY = Deno.env.get("ADYEN_API_KEY") ?? "";
4const ADYEN_MERCHANT_ACCOUNT = Deno.env.get("ADYEN_MERCHANT_ACCOUNT") ?? "";
5const ADYEN_CLIENT_KEY = Deno.env.get("ADYEN_CLIENT_KEY") ?? "";
6const ADYEN_BASE_URL = "https://checkout-test.adyen.com/v71";
7
8const corsHeaders = {
9  "Access-Control-Allow-Origin": "*",
10  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
11};
12
13serve(async (req) => {
14  if (req.method === "OPTIONS") {
15    return new Response("ok", { headers: corsHeaders });
16  }
17
18  try {
19    const { amount, currency = "USD", reference, returnUrl } = await req.json();
20
21    const sessionRes = await fetch(`${ADYEN_BASE_URL}/sessions`, {
22      method: "POST",
23      headers: {
24        "X-API-Key": ADYEN_API_KEY,
25        "Content-Type": "application/json",
26      },
27      body: JSON.stringify({
28        merchantAccount: ADYEN_MERCHANT_ACCOUNT,
29        amount: { value: amount, currency },
30        reference,
31        returnUrl,
32        shopperLocale: "en-US",
33      }),
34    });
35
36    if (!sessionRes.ok) {
37      const err = await sessionRes.text();
38      throw new Error(`Adyen error: ${err}`);
39    }
40
41    const session = await sessionRes.json();
42
43    return new Response(
44      JSON.stringify({
45        sessionId: session.id,
46        sessionData: session.sessionData,
47        clientKey: ADYEN_CLIENT_KEY,
48      }),
49      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
50    );
51  } catch (e) {
52    return new Response(
53      JSON.stringify({ error: (e as Error).message }),
54      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
55    );
56  }
57});

Adyen sends webhook notifications when payment events occur — authorization success, failure, refund, chargeback. You need a second Edge Function to receive these webhooks and verify their authenticity before updating your database. Adyen webhooks use HMAC-SHA256 signatures, and Adyen strongly recommends enabling Basic Auth on the webhook endpoint as an additional layer of protection. In the Adyen Customer Area, navigate to Developers → Webhooks and click 'Add new webhook'. Select 'Standard notification' as the webhook type. Under Server Configuration, enter your Supabase Edge Function URL (you'll get this after deploying). Enable 'HMAC signature verification' and note the generated HMAC key — save this to Cloud Secrets as ADYEN_WEBHOOK_HMAC_KEY. Also set a Basic Auth username and password and add them to Cloud Secrets as ADYEN_WEBHOOK_USERNAME and ADYEN_WEBHOOK_PASSWORD. The webhook body from Adyen contains a notificationItems array, each with NotificationRequestItem objects. The critical fields are eventCode (AUTHORISATION, CANCELLATION, REFUND, CHARGEBACK), success (true/false), pspReference (Adyen's unique payment ID), and merchantReference (your order ID). After HMAC verification, check eventCode === 'AUTHORISATION' && success === 'true' to confirm a payment was captured.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
3
4const SUPABASE_URL = Deno.env.get("SUPABASE_URL") ?? "";
5const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "";
6const ADYEN_WEBHOOK_HMAC_KEY = Deno.env.get("ADYEN_WEBHOOK_HMAC_KEY") ?? "";
7const ADYEN_WEBHOOK_USERNAME = Deno.env.get("ADYEN_WEBHOOK_USERNAME") ?? "";
8const ADYEN_WEBHOOK_PASSWORD = Deno.env.get("ADYEN_WEBHOOK_PASSWORD") ?? "";
9
10async function verifyHMAC(item: Record<string, unknown>, hmacKey: string): Promise<boolean> {
11  const data = item.NotificationRequestItem as Record<string, unknown>;
12  const fields = [
13    data.pspReference, data.originalReference ?? "",
14    data.merchantAccountCode, data.merchantReference,
15    (data.amount as Record<string, unknown>)?.value, (data.amount as Record<string, unknown>)?.currency,
16    data.eventCode, data.success,
17  ];
18  const signingString = fields.join(":");
19  const keyBytes = new Uint8Array(hmacKey.match(/.{1,2}/g)!.map(b => parseInt(b, 16)));
20  const key = await crypto.subtle.importKey("raw", keyBytes, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
21  const sig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(signingString));
22  const expected = btoa(String.fromCharCode(...new Uint8Array(sig)));
23  return expected === (data.additionalData as Record<string, string>)?.hmacSignature;
24}
25
26serve(async (req) => {
27  const authHeader = req.headers.get("Authorization") ?? "";
28  const expectedAuth = "Basic " + btoa(`${ADYEN_WEBHOOK_USERNAME}:${ADYEN_WEBHOOK_PASSWORD}`);
29  if (authHeader !== expectedAuth) {
30    return new Response("Unauthorized", { status: 401 });
31  }
32
33  const body = await req.json();
34  const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
35
36  for (const item of body.notificationItems ?? []) {
37    const valid = await verifyHMAC(item, ADYEN_WEBHOOK_HMAC_KEY);
38    if (!valid) continue;
39    const data = item.NotificationRequestItem;
40    if (data.eventCode === "AUTHORISATION" && data.success === "true") {
41      await supabase.from("orders").update({ status: "paid", adyen_psp_reference: data.pspReference })
42        .eq("id", data.merchantReference);
43    }
44  }
45
46  return new Response("[accepted]", { status: 200 });
47});

The Adyen Drop-in is a JavaScript UI component that renders payment method selection and card input forms. You need to load the Adyen Web library, initialize it with your session data, and mount it to a DOM element. Add the Adyen CDN script and stylesheet to your index.html. In your Lovable project, open the Code panel, find public/index.html and add two tags to the head: the Adyen stylesheet link and the Adyen JS script. Then create a React component that calls your Edge Function to get a session, initializes AdyenCheckout with the session data, and mounts it. The Drop-in handles the entire UX: it shows available payment methods for the shopper's location, collects card details with a secure hosted field, handles 3DS2 redirects and challenges, and calls your returnUrl when complete. Your React component only needs to call the Edge Function, pass the session data to AdyenCheckout, and handle the final redirect result. The returnUrl should be a page in your app that reads the redirectResult URL parameter and calls your Edge Function to verify the payment outcome. For the component, call your adyen-checkout Edge Function with the order details (amount in cents, currency, orderId), receive back sessionId, sessionData, and clientKey, then create an AdyenCheckout instance with environment set to 'test' and mount the dropin to a ref element. This component replaces traditional payment form handling entirely — Adyen's Drop-in is PCI DSS Level 1 certified.

1import { useEffect, useRef } from "react";
2import { supabase } from "@/integrations/supabase/client";
3import { toast } from "@/hooks/use-toast";
4
5declare global {
6  interface Window { AdyenCheckout: (config: Record<string, unknown>) => Promise<Record<string, unknown>>; }
7}
8
9interface AdyenCheckoutProps {
10  amountInCents: number;
11  currency?: string;
12  orderId: string;
13  onSuccess: () => void;
14}
15
16export function AdyenCheckoutForm({ amountInCents, currency = "USD", orderId, onSuccess }: AdyenCheckoutProps) {
17  const dropinRef = useRef<HTMLDivElement>(null);
18
19  useEffect(() => {
20    let dropin: Record<string, unknown> | null = null;
21    async function initAdyen() {
22      try {
23        const { data, error } = await supabase.functions.invoke("adyen-checkout", {
24          body: {
25            amount: amountInCents,
26            currency,
27            reference: orderId,
28            returnUrl: `${window.location.origin}/order-confirmation`,
29          },
30        });
31        if (error) throw error;
32
33        const checkout = await window.AdyenCheckout({
34          environment: "test",
35          clientKey: data.clientKey,
36          session: { id: data.sessionId, sessionData: data.sessionData },
37          onPaymentCompleted: (result: Record<string, unknown>) => {
38            if (result.resultCode === "Authorised") onSuccess();
39            else toast({ title: "Payment failed", description: `Result: ${result.resultCode}`, variant: "destructive" });
40          },
41          onError: (err: Error) => {
42            toast({ title: "Payment error", description: err.message, variant: "destructive" });
43          },
44        });
45
46        dropin = (checkout as Record<string, unknown & { create: (type: string) => Record<string, unknown & { mount: (el: HTMLElement) => void }> }>).create("dropin");
47        if (dropinRef.current) (dropin as Record<string, (el: HTMLElement) => void>).mount(dropinRef.current);
48      } catch (e) {
49        toast({ title: "Checkout error", description: (e as Error).message, variant: "destructive" });
50      }
51    }
52    initAdyen();
53    return () => {
54      if (dropin) (dropin as Record<string, () => void>).unmount?.();
55    };
56  }, [amountInCents, currency, orderId, onSuccess]);
57
58  return (
59    <div className="max-w-md mx-auto p-6 bg-white rounded-xl shadow">
60      <h2 className="text-xl font-semibold mb-4">Complete Payment</h2>
61      <div ref={dropinRef} id="adyen-dropin" />
62    </div>
63  );
64}

Before going live, you need to thoroughly test every payment scenario using Adyen's test cards and test payment methods. Adyen provides a comprehensive test card library at docs.adyen.com/development-resources/testing/test-card-numbers. The most important test cases are: successful card payment (card 4111 1111 1111 1111), declined payment (card 4000 0000 0000 0002), 3DS2 challenge required (card 4212 3456 7890 1237), and 3DS2 frictionless (card 4000 0000 0000 3220). For each test payment, verify the complete flow: your Edge Function creates a session, the Drop-in renders with the session data, the test payment completes, Adyen sends a webhook to your adyen-webhook Edge Function, your function verifies the HMAC signature and updates the order in Supabase. Check the Supabase Table Editor to confirm the order status changed to 'paid' and the adyen_psp_reference was saved. Check your Edge Function logs in the Cloud tab → Logs for any errors. Test the webhook delivery in Adyen Customer Area by navigating to Developers → Webhooks, finding your webhook config, and using the 'Test' button to send a sample notification. This sends a real HMAC-signed test event to your function even without an actual payment. Also verify that invalid HMAC signatures are rejected by sending a tampered test. For complex production setups, RapidDev's team can help configure additional Adyen features like split payments for marketplaces or subscription recurring charges.