Payment Buttons

Payment buttons are embedded UI components that allow customers to initiate payments directly from your website without leaving the page.

**Benefits:**
- Seamless integration into your website
- Customizable styling to match your brand
- No redirect required for simple payments
- Works with checkout links for complex flows

**Basic Payment Button:**
A simple button that creates a checkout link when clicked.

```tsx
import { Button } from "@/components/ui/button";
import { createCheckoutLink } from "@/lib/checkout-links";
import { useState } from "react";

export function PaymentButton({ bizId }: { bizId: string }) {
  const [loading, setLoading] = useState(false);

  async function handlePayment() {
    setLoading(true);
    await createCheckoutLink(bizId, {
      planName: "Quick Payment",
      price: "10.00",
      billing: "one-time",
    });
    setLoading(false);
  }

  return (
    <Button onClick={handlePayment} disabled={loading}>
      {loading ? "Processing..." : "Pay $10.00"}
    </Button>
  );
}
```

**Link-Triggered Button:**
Opens a checkout link directly.

```tsx
import Link from "next/link";
import { Button } from "@/components/ui/button";

<Link href="/checkout-links/plan_abc123">
  <Button variant="outline">
    View Payment Options
  </Button>
</Link>
```

**QR Code Button:**
Generates a QR code for in-person payments.

```tsx
import { QRCodeSVG } from "react-qr-code";
import { CopyAddressButton } from "@/components/CopyAddressButton";

<div className="flex flex-col items-center gap-4">
  <QRCodeSVG
    value={"https://pay.yeld.app/plan_abc123"}
    size={200}
  />
  <CopyAddressButton address="plan_abc123" />
</div>
```

Customize buttons to match your brand:

```tsx
import { Button } from "frosted-ui";

// Primary action button
<Button size="lg" variant="solid" className="rounded-xl">
  Accept Payment
</Button>

// Secondary button
<Button size="lg" variant="outline" className="rounded-xl">
  Learn More
</Button>

// With icon
<Button size="lg" className="gap-2">
  <CreditCard className="size-4" />
  Pay Now
</Button>
```

**Using Frosted UI:**
The Yeld project uses Frosted UI components for consistent styling.