How to Integrate Lovable with Authorize.net

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const LOGIN_ID = Deno.env.get("AUTHORIZE_NET_LOGIN_ID") ?? "";
4const TRANSACTION_KEY = Deno.env.get("AUTHORIZE_NET_TRANSACTION_KEY") ?? "";
5const API_URL = "https://apitest.authorize.net/xml/v1/request.api"; // change to api.authorize.net for production
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 { dataDescriptor, dataValue, amount, orderId } = await req.json();
19
20    const payload = {
21      createTransactionRequest: {
22        merchantAuthentication: {
23          name: LOGIN_ID,
24          transactionKey: TRANSACTION_KEY,
25        },
26        refId: orderId ?? "order-" + Date.now(),
27        transactionRequest: {
28          transactionType: "authCaptureTransaction",
29          amount: String(amount),
30          payment: {
31            opaqueData: { dataDescriptor, dataValue },
32          },
33          order: { invoiceNumber: orderId ?? "", description: "Lovable App Purchase" },
34        },
35      },
36    };
37
38    const res = await fetch(API_URL, {
39      method: "POST",
40      headers: { "Content-Type": "application/json" },
41      body: JSON.stringify(payload),
42    });
43
44    const data = await res.json();
45    // Strip BOM that Authorize.net adds to responses
46    const result = data.transactionResponse;
47
48    if (result?.responseCode === "1") {
49      return new Response(
50        JSON.stringify({ success: true, transactionId: result.transId }),
51        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
52      );
53    } else {
54      const errorText = result?.errors?.[0]?.errorText ?? result?.messages?.message?.[0]?.text ?? "Transaction declined";
55      return new Response(
56        JSON.stringify({ success: false, error: errorText }),
57        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
58      );
59    }
60  } catch (e) {
61    return new Response(
62      JSON.stringify({ error: (e as Error).message }),
63      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
64    );
65  }
66});

1import { useState } from "react";
2import { supabase } from "@/integrations/supabase/client";
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { toast } from "@/hooks/use-toast";
6
7declare global {
8  interface Window {
9    Accept: {
10      dispatchData: (data: Record<string, unknown>, callback: (response: AcceptResponse) => void) => void;
11    };
12  }
13}
14
15interface AcceptResponse {
16  messages: { resultCode: string; message: Array<{ code: string; text: string }> };
17  opaqueData?: { dataDescriptor: string; dataValue: string };
18}
19
20// Client Key is safe for frontend — it cannot be used to charge cards alone
21const CLIENT_KEY = "YOUR_SANDBOX_CLIENT_KEY"; // replace with your Accept.js Client Key
22const API_LOGIN_ID = "YOUR_SANDBOX_LOGIN_ID"; // replace with your API Login ID (public OK for Accept.js)
23
24interface PaymentFormProps {
25  amount: number;
26  orderId: string;
27  onSuccess: (transactionId: string) => void;
28}
29
30export function AuthorizeNetForm({ amount, orderId, onSuccess }: PaymentFormProps) {
31  const [cardNumber, setCardNumber] = useState("");
32  const [expMonth, setExpMonth] = useState("");
33  const [expYear, setExpYear] = useState("");
34  const [cvv, setCvv] = useState("");
35  const [loading, setLoading] = useState(false);
36
37  const handleSubmit = async (e: React.FormEvent) => {
38    e.preventDefault();
39    setLoading(true);
40
41    window.Accept.dispatchData(
42      {
43        authData: { clientKey: CLIENT_KEY, apiLoginID: API_LOGIN_ID },
44        cardData: { cardNumber, month: expMonth, year: expYear, cardCode: cvv },
45      },
46      async (response: AcceptResponse) => {
47        if (response.messages.resultCode !== "Ok") {
48          toast({ title: "Card error", description: response.messages.message[0].text, variant: "destructive" });
49          setLoading(false);
50          return;
51        }
52        const { dataDescriptor, dataValue } = response.opaqueData!;
53        const { data, error } = await supabase.functions.invoke("authorize-net-charge", {
54          body: { dataDescriptor, dataValue, amount, orderId },
55        });
56        setLoading(false);
57        if (error || !data?.success) {
58          toast({ title: "Payment failed", description: data?.error ?? error?.message, variant: "destructive" });
59        } else {
60          onSuccess(data.transactionId);
61        }
62      }
63    );
64  };
65
66  return (
67    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
68      <Input placeholder="Card number" value={cardNumber} onChange={e => setCardNumber(e.target.value)} required />
69      <div className="flex gap-2">
70        <Input placeholder="MM" value={expMonth} onChange={e => setExpMonth(e.target.value)} className="w-20" required />
71        <Input placeholder="YYYY" value={expYear} onChange={e => setExpYear(e.target.value)} className="w-24" required />
72        <Input placeholder="CVV" value={cvv} onChange={e => setCvv(e.target.value)} className="w-20" required />
73      </div>
74      <Button type="submit" disabled={loading} className="w-full">
75        {loading ? "Processing..." : `Pay $${amount.toFixed(2)}`}
76      </Button>
77    </form>
78  );
79}