Merge pull request #10 from nyxCore-Systems/feat/paypal-donate-button

feat(donate): swap donation button to classic PayPal Donate form

Author: mrwind-up-bird

src/components/noir/sections/NoirDonateSection.tsx

@@ -1,11 +1,13 @@
 import Link from 'next/link'
 import { NOIR_DONATE_DEFAULTS, type NoirDonateContent } from '@/lib/noir-home-defaults'
 import PayPalHostedButton from './PayPalHostedButton'
+import PayPalDonateButton from './PayPalDonateButton'
 
-// PayPal "No-Code Payments" hosted buttons, embedded inline (lazy-loaded + try/catch
-// with a graceful link fallback — see PayPalHostedButton). Ticket + donation IDs:
+// Tickets use a PayPal "No-Code Payments" hosted button (SDK, iframe-isolated —
+// see PayPalHostedButton). Donations use the classic PayPal "Donate" button (a
+// plain <form>, see PayPalDonateButton) — a different PayPal product + id, no SDK.
 const PAYPAL_TICKET_BUTTON = 'MGNNL73RQ88DG'
-const PAYPAL_DONATE_BUTTON = 'QT6LRLS3DQTW4'
+const PAYPAL_DONATE_BUTTON = 'GCRR5BM8K8D22'
 const ncpUrl = (id: string) => `https://www.paypal.com/ncp/payment/${id}`
 
 export default function NoirDonateSection({ content }: { content?: NoirDonateContent | null }) {
@@ -77,11 +79,7 @@ export default function NoirDonateSection({ content }: { content?: NoirDonateCon
             <div className="nh-lab">Spenden</div>
             <h3>{cardHeading}</h3>
             <p className="nh-card-sub">{cardSubtext}</p>
-            <PayPalHostedButton
-              hostedButtonId={PAYPAL_DONATE_BUTTON}
-              fallbackUrl={ncpUrl(PAYPAL_DONATE_BUTTON)}
-              fallbackLabel="Jetzt spenden via PayPal"
-            />
+            <PayPalDonateButton hostedButtonId={PAYPAL_DONATE_BUTTON} label="Jetzt spenden via PayPal" />
             <div className="nh-bank">
               <div className="nh-bank-title">Spendenkonto</div>
               <dl className="nh-bank-list">

src/components/noir/sections/PayPalDonateButton.tsx

@@ -0,0 +1,30 @@
+// Classic PayPal "Donate" button — a plain HTML <form> POSTing to
+// paypal.com/donate with a hosted_button_id. Unlike the hosted-button *SDK*
+// (see PayPalHostedButton, which had to be iframe-isolated because the SDK's
+// JS broke the site nav), this loads NO PayPal script — it's just a form
+// submit — so it's safe to render inline as a server component and carries no
+// DOM/layout side effects. Styled as the site's gold button; opens PayPal in a
+// new tab so the visitor keeps our page open.
+export default function PayPalDonateButton({
+  hostedButtonId,
+  label,
+}: {
+  hostedButtonId: string
+  label: string
+}) {
+  return (
+    <form
+      action="https://www.paypal.com/donate"
+      method="post"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="nh-pp-donate"
+      style={{ margin: 0 }}
+    >
+      <input type="hidden" name="hosted_button_id" value={hostedButtonId} />
+      <button type="submit" className="nh-ticket-btn">
+        {label} &rarr;
+      </button>
+    </form>
+  )
+}