How to Integrate Lovable with Worldpay

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const USERNAME = Deno.env.get("WORLDPAY_USERNAME") ?? "";
4const PASSWORD = Deno.env.get("WORLDPAY_PASSWORD") ?? "";
5const MERCHANT_ENTITY_REF = Deno.env.get("WORLDPAY_MERCHANT_ENTITY_REF") ?? "";
6const ENVIRONMENT = Deno.env.get("WORLDPAY_ENVIRONMENT") ?? "sandbox";
7
8const BASE_URL = ENVIRONMENT === "production"
9  ? "https://access.worldpay.com"
10  : "https://try.access.worldpay.com";
11
12const corsHeaders = {
13  "Access-Control-Allow-Origin": "*",
14  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
15};
16
17serve(async (req) => {
18  if (req.method === "OPTIONS") {
19    return new Response("ok", { headers: corsHeaders });
20  }
21
22  try {
23    const { amountInMinorUnits, currencyCode = "GBP", orderId } = await req.json();
24    const authString = btoa(`${USERNAME}:${PASSWORD}`);
25
26    const payload = {
27      transactionReference: orderId,
28      merchant: { entityRef: MERCHANT_ENTITY_REF },
29      value: { amount: amountInMinorUnits, currency: currencyCode },
30      paymentInstructions: [
31        {
32          narrative: { line1: "Payment" },
33          value: { amount: amountInMinorUnits, currency: currencyCode },
34          paymentMethod: {
35            type: "card/plain",
36            cardHolderName: "{{ cardHolderName }}",
37            cardNumber: "{{ encryptedCardNumber }}",
38            cardExpiryDate: { month: "{{ expiryMonth }}", year: "{{ expiryYear }}" },
39            cvv: "{{ encryptedCvv }}",
40          },
41        },
42      ],
43    };
44
45    const res = await fetch(`${BASE_URL}/sessions/payment-sessions`, {
46      method: "POST",
47      headers: {
48        "Authorization": `Basic ${authString}`,
49        "Content-Type": "application/vnd.worldpay.sessions-v1.hal+json",
50        "Accept": "application/vnd.worldpay.sessions-v1.hal+json",
51      },
52      body: JSON.stringify(payload),
53    });
54
55    if (!res.ok) {
56      const err = await res.text();
57      throw new Error(`Worldpay error: ${res.status} ${err}`);
58    }
59
60    const data = await res.json();
61    const sessionHref = data._links?.["sessions:session"]?.href;
62
63    return new Response(
64      JSON.stringify({ sessionHref }),
65      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
66    );
67  } catch (e) {
68    return new Response(
69      JSON.stringify({ error: (e as Error).message }),
70      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
71    );
72  }
73});

1import { useEffect, useRef, useState } from "react";
2import { supabase } from "@/integrations/supabase/client";
3import { Button } from "@/components/ui/button";
4import { toast } from "@/hooks/use-toast";
5
6declare global {
7  interface Window {
8    AccessCheckout: {
9      init: (options: Record<string, unknown>) => Promise<AccessCheckoutInstance>;
10    };
11  }
12}
13
14interface AccessCheckoutInstance {
15  generateSessions: (sessionTypes: string[]) => void;
16}
17
18interface WorldpayCheckoutProps {
19  amountInMinorUnits: number;
20  currencyCode?: string;
21  orderId: string;
22  onSuccess: () => void;
23}
24
25export function WorldpayCheckout({ amountInMinorUnits, currencyCode = "GBP", orderId, onSuccess }: WorldpayCheckoutProps) {
26  const checkoutRef = useRef<AccessCheckoutInstance | null>(null);
27  const [ready, setReady] = useState(false);
28  const [loading, setLoading] = useState(false);
29
30  useEffect(() => {
31    async function init() {
32      const { data, error } = await supabase.functions.invoke("worldpay-session", {
33        body: { amountInMinorUnits, currencyCode, orderId },
34      });
35      if (error || !data?.sessionHref) {
36        toast({ title: "Checkout error", description: "Could not initialize payment", variant: "destructive" });
37        return;
38      }
39      checkoutRef.current = await window.AccessCheckout.init({
40        checkoutId: data.sessionHref,
41        containerId: "worldpay-form",
42        components: ["card"],
43        onPaymentVerified: () => { setLoading(false); onSuccess(); },
44        onPaymentError: (err: { message: string }) => {
45          setLoading(false);
46          toast({ title: "Payment failed", description: err.message, variant: "destructive" });
47        },
48        styles: {
49          base: { fontSize: "16px", color: "#374151", "::placeholder": { color: "#9CA3AF" } },
50        },
51      });
52      setReady(true);
53    }
54    init();
55  }, [amountInMinorUnits, currencyCode, orderId, onSuccess]);
56
57  const handlePay = () => {
58    if (!checkoutRef.current) return;
59    setLoading(true);
60    checkoutRef.current.generateSessions(["card", "cvv"]);
61  };
62
63  return (
64    <div className="max-w-md mx-auto p-6 bg-white rounded-xl shadow space-y-4">
65      <h2 className="text-xl font-semibold">
66        Pay {currencyCode} {(amountInMinorUnits / 100).toFixed(2)}
67      </h2>
68      <div id="worldpay-form" className="space-y-3">
69        <div id="card-number-container" className="border rounded-md p-3 min-h-[44px]" />
70        <div className="flex gap-3">
71          <div id="expiry-date-container" className="border rounded-md p-3 min-h-[44px] flex-1" />
72          <div id="cvc-container" className="border rounded-md p-3 min-h-[44px] w-24" />
73        </div>
74      </div>
75      <Button onClick={handlePay} disabled={!ready || loading} className="w-full">
76        {loading ? "Processing..." : "Pay Now"}
77      </Button>
78    </div>
79  );
80}

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") ?? "";
6
7const corsHeaders = {
8  "Access-Control-Allow-Origin": "*",
9  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
10};
11
12serve(async (req) => {
13  if (req.method === "OPTIONS") {
14    return new Response("ok", { headers: corsHeaders });
15  }
16
17  try {
18    const notification = await req.json();
19    const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
20
21    const orderId = notification.transactionReference;
22    const eventType = notification.type ?? notification.eventName ?? "";
23
24    if (!orderId) {
25      return new Response("ok", { headers: corsHeaders });
26    }
27
28    let newStatus = "";
29    if (eventType.includes("authorized") || eventType === "payment.authorized") {
30      newStatus = "paid";
31    } else if (eventType.includes("refused") || eventType.includes("cancelled")) {
32      newStatus = "failed";
33    }
34
35    if (newStatus) {
36      await supabase.from("orders").update({
37        status: newStatus,
38        worldpay_notification: notification,
39      }).eq("id", orderId);
40    }
41
42    return new Response("ok", { status: 200, headers: corsHeaders });
43  } catch (e) {
44    console.error("Worldpay webhook error:", e);
45    return new Response("ok", { status: 200, headers: corsHeaders }); // Always return 200 to prevent retries
46  }
47});