Fix payment permissions policy violations in donate.html iframe

README.md

@@ -3,6 +3,19 @@
 ## Donate
 Using `dialog` https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 
-- [Donate Page (Direct iFrame)](donate.html) - Direct donation page with embedded iframe (may be blocked by browser security)
+- [Donate Page (Direct iFrame)](donate.html) - Direct donation page with embedded iframe (includes payment permission for Apple Pay/Google Pay)
    - ![Dialog with iframe](screenshots/dialog_with_iframe_0.1.png)
+   - Note: The iframe includes `allow="payment"` attribute to enable Payment Request API (Apple Pay/Google Pay) without browser console violations
 - [Donate Page (JavaScript Embed)](donate_with_script.html) - Direct donation page using betterplace.org's official JavaScript embed code
+
+## Technical Notes
+
+### Payment Permissions Policy
+The `donate.html` page uses an iframe with the `allow="payment"` attribute to grant the embedded content permission to use the Payment Request API. This is required for modern browsers to allow Apple Pay and Google Pay functionality without triggering permissions policy violations.
+
+Without this attribute, you may see console errors like:
+```
+[Violation] Permissions policy violation: payment is not allowed in this document.
+```
+
+Reference: [Permissions Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy)

docs/donate.html

@@ -22,7 +22,7 @@
         position: absolute;  /* 👈 Take it out of normal flow */
         z-index: 10;         /* 👈 Ensure it is above the iframe */
     " onclick="this.closest('dialog').close()">x</button>
-   <iframe width="500px" height="500" src="https://www.betterplace.org/de/donate/platform/projects/138560-3d-druck-und-elektronik-ag"></iframe>
+   <iframe width="500px" height="500" src="https://www.betterplace.org/de/donate/platform/projects/138560-3d-druck-und-elektronik-ag" allow="payment"></iframe>
 </dialog>
 <button onclick="document.querySelector('dialog').showModal()"
 style="

docs/index.html

@@ -48,7 +48,8 @@ <h2>Donate Pages</h2>
     <ul>
         <li>
             <a href="donate.html">🙏 Donate Page (Direct iFrame)</a>
-            <div class="description">Direct donation page with embedded iframe (may be blocked by browser security)</div>
+            <div class="description">Direct donation page with embedded iframe (includes payment permission for Apple Pay/Google Pay)</div>
+            <div class="description" style="font-style: italic; margin-top: 5px;">Uses <code>allow="payment"</code> attribute to enable Payment Request API without browser violations</div>
         </li>
         <li>
             <a href="donate_with_script.html">🙏 Donate Page (JavaScript Embed)</a>