How to Integrate Lovable with Braintree

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const MERCHANT_ID = Deno.env.get("BRAINTREE_MERCHANT_ID") ?? "";
4const PUBLIC_KEY = Deno.env.get("BRAINTREE_PUBLIC_KEY") ?? "";
5const PRIVATE_KEY = Deno.env.get("BRAINTREE_PRIVATE_KEY") ?? "";
6const ENVIRONMENT = Deno.env.get("BRAINTREE_ENVIRONMENT") ?? "sandbox";
7
8const BASE_URL = ENVIRONMENT === "production"
9  ? `https://api.braintreegateway.com/merchants/${MERCHANT_ID}`
10  : `https://api.sandbox.braintreegateway.com/merchants/${MERCHANT_ID}`;
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    let customerId: string | undefined;
24    if (req.method === "POST") {
25      const body = await req.json().catch(() => ({}));
26      customerId = body.customerId;
27    }
28
29    const authString = btoa(`${PUBLIC_KEY}:${PRIVATE_KEY}`);
30    const res = await fetch(`${BASE_URL}/client_token`, {
31      method: "POST",
32      headers: {
33        "Authorization": `Basic ${authString}`,
34        "Content-Type": "application/json",
35        "Accept": "application/json",
36        "Braintree-Version": "2019-01-01",
37      },
38      body: JSON.stringify(customerId ? { customerId } : {}),
39    });
40
41    if (!res.ok) {
42      const err = await res.text();
43      throw new Error(`Braintree error: ${res.status} ${err}`);
44    }
45
46    const data = await res.json();
47
48    return new Response(
49      JSON.stringify({ clientToken: data.clientToken }),
50      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
51    );
52  } catch (e) {
53    return new Response(
54      JSON.stringify({ error: (e as Error).message }),
55      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
56    );
57  }
58});

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    braintree: {
9      dropin: {
10        create: (options: Record<string, unknown>) => Promise<BraintreeDropinInstance>;
11      };
12    };
13  }
14}
15
16interface BraintreeDropinInstance {
17  requestPaymentMethod: () => Promise<{ nonce: string; type: string }>;
18  teardown: () => Promise<void>;
19}
20
21interface BraintreeCheckoutProps {
22  amount: number;
23  orderId: string;
24  onSuccess: (transactionId: string) => void;
25}
26
27export function BraintreeCheckout({ amount, orderId, onSuccess }: BraintreeCheckoutProps) {
28  const dropinRef = useRef<BraintreeDropinInstance | null>(null);
29  const [loading, setLoading] = useState(false);
30  const [ready, setReady] = useState(false);
31
32  useEffect(() => {
33    async function initDropin() {
34      const { data, error } = await supabase.functions.invoke("braintree-client-token", { body: {} });
35      if (error || !data?.clientToken) {
36        toast({ title: "Checkout error", description: "Could not initialize payment form", variant: "destructive" });
37        return;
38      }
39      dropinRef.current = await window.braintree.dropin.create({
40        authorization: data.clientToken,
41        container: "#dropin-container",
42        paypal: { flow: "checkout", amount: amount.toFixed(2), currency: "USD" },
43        venmo: { allowNewBrowserTab: false },
44      });
45      setReady(true);
46    }
47    initDropin();
48    return () => { dropinRef.current?.teardown(); };
49  }, [amount]);
50
51  const handlePay = async () => {
52    if (!dropinRef.current) return;
53    setLoading(true);
54    try {
55      const { nonce, type } = await dropinRef.current.requestPaymentMethod();
56      const { data, error } = await supabase.functions.invoke("braintree-process-payment", {
57        body: { nonce, amount, orderId, paymentType: type },
58      });
59      if (error || !data?.success) {
60        toast({ title: "Payment failed", description: data?.error ?? "Unknown error", variant: "destructive" });
61      } else {
62        onSuccess(data.transactionId);
63      }
64    } catch (e) {
65      toast({ title: "Payment error", description: (e as Error).message, variant: "destructive" });
66    } finally {
67      setLoading(false);
68    }
69  };
70
71  return (
72    <div className="max-w-md mx-auto p-6 bg-white rounded-xl shadow space-y-4">
73      <h2 className="text-xl font-semibold">Complete Purchase — ${amount.toFixed(2)}</h2>
74      <div id="dropin-container" />
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 MERCHANT_ID = Deno.env.get("BRAINTREE_MERCHANT_ID") ?? "";
5const PUBLIC_KEY = Deno.env.get("BRAINTREE_PUBLIC_KEY") ?? "";
6const PRIVATE_KEY = Deno.env.get("BRAINTREE_PRIVATE_KEY") ?? "";
7const ENVIRONMENT = Deno.env.get("BRAINTREE_ENVIRONMENT") ?? "sandbox";
8const SUPABASE_URL = Deno.env.get("SUPABASE_URL") ?? "";
9const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "";
10
11const BASE_URL = ENVIRONMENT === "production"
12  ? `https://api.braintreegateway.com/merchants/${MERCHANT_ID}`
13  : `https://api.sandbox.braintreegateway.com/merchants/${MERCHANT_ID}`;
14
15const corsHeaders = {
16  "Access-Control-Allow-Origin": "*",
17  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
18};
19
20serve(async (req) => {
21  if (req.method === "OPTIONS") {
22    return new Response("ok", { headers: corsHeaders });
23  }
24
25  try {
26    const { nonce, amount, orderId, paymentType } = await req.json();
27    const authString = btoa(`${PUBLIC_KEY}:${PRIVATE_KEY}`);
28
29    const payload = {
30      transaction: {
31        type: "sale",
32        amount: Number(amount).toFixed(2),
33        paymentMethodNonce: nonce,
34        orderId,
35        options: { submitForSettlement: true },
36        channel: "Lovable",
37      },
38    };
39
40    const res = await fetch(`${BASE_URL}/transactions`, {
41      method: "POST",
42      headers: {
43        "Authorization": `Basic ${authString}`,
44        "Content-Type": "application/json",
45        "Accept": "application/json",
46        "Braintree-Version": "2019-01-01",
47      },
48      body: JSON.stringify(payload),
49    });
50
51    const data = await res.json();
52    const tx = data.transaction ?? data;
53    const successStatuses = ["submitted_for_settlement", "authorized", "settling", "settled"];
54
55    if (successStatuses.includes(tx.status)) {
56      const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
57      await supabase.from("orders").update({
58        status: "paid",
59        braintree_transaction_id: tx.id,
60        payment_method: paymentType,
61      }).eq("id", orderId);
62
63      return new Response(
64        JSON.stringify({ success: true, transactionId: tx.id }),
65        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
66      );
67    } else {
68      const errorMsg = tx.processorResponseText ?? tx.gatewayRejectionReason ?? tx.status ?? "Transaction failed";
69      return new Response(
70        JSON.stringify({ success: false, error: errorMsg }),
71        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
72      );
73    }
74  } catch (e) {
75    return new Response(
76      JSON.stringify({ error: (e as Error).message }),
77      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
78    );
79  }
80});