Accept USDC on your website

Copy a snippet, replace YOUR_LINK_ID, and start accepting USDC payments.

html

<!-- ArcPay payment button -->
<button
  onclick="window.open('https://arc-payments.vercel.app/pay/YOUR_LINK_ID', '_blank')"
  style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 20px;
    cursor: pointer;
  "
>
  Pay with USDC
</button>

react

// ArcPay React component
export function ArcPayButton({ linkId, label = "Pay with USDC" }: {
  linkId: string;
  label?: string;
}) {
  return (
    <button
      onClick={() => window.open(`https://arc-payments.vercel.app/pay/${linkId}`, "_blank")}
      className="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-500"
    >
      {label}
    </button>
  );
}

js

// ArcPay JavaScript snippet — loads the button into any element
<script>
(function () {
  var el = document.getElementById("arcpay-button");
  if (!el) return;
  var btn = document.createElement("button");
  btn.textContent = "Pay with USDC";
  btn.setAttribute("style",
    "display:inline-flex;align-items:center;justify-content:center;gap:8px;" +
    "background:#2563eb;color:#fff;border:none;border-radius:10px;" +
    "font-weight:600;font-size:15px;padding:12px 20px;cursor:pointer");
  btn.addEventListener("click", function () {
    window.open("https://arc-payments.vercel.app/pay/YOUR_LINK_ID", "_blank");
  });
  el.appendChild(btn);
})();
</script>