fix form and show links

components/DonationSteps.tsx

@@ -11,12 +11,14 @@ const DonationSteps = () => {
     setDeductable(event.target.value);
   };
 
-  function handleStep1() {
+  function handleStep1(e: React.FormEvent<HTMLInputElement>) {
+    e.preventDefault();
     setStep(2);
   }
 
   // STEP 2
-  function handleStep2() {
+  function handleStep2(e: React.FormEvent<HTMLInputElement>) {
+    e.preventDefault();
     setStep(3);
   }
 

components/Pay.tsx

@@ -4,14 +4,36 @@ import { fetchPostJSON } from "../utils/api-helpers";
 
 const Pay = ({ amount = 100.0 }) => {
   //   const [stripeUrl, setStripeUrl] = useState("");
-  const [btcpayUrl, setBtcPayUrl] = useState("");
 
-  const { data: stripe } = useSWR(
+  const { data: stripe, error: stripeError } = useSWR(
     ["/api/stripe_checkout", { amount }],
     fetchPostJSON
   );
 
-  return <p>{stripe && stripe.url}</p>;
+  const { data: btcpay, error: btcpayError } = useSWR(
+    ["/api/btcpay", { amount }],
+    fetchPostJSON
+  );
+
+  console.log(btcpayError);
+
+  return (
+    <div>
+      {stripe?.url && (
+        <p>
+          <a href={stripe.url}>Pay with card</a>
+        </p>
+      )}
+      {stripeError && <mark>heyo</mark>}
+      <mark>Error: {stripeError?.message}</mark>
+      {btcpay?.url && (
+        <p>
+          <a href={btcpay.url}>Pay with Bitcoin</a>
+        </p>
+      )}
+      <mark>Error: {btcpayError}</mark>
+    </div>
+  );
 };
 
 export default Pay;