Fix payment permissions policy violations in donate.html iframe

[Copilot]

Problem

The betterplace.org donation iframe in docs/donate.html was triggering Payment Request API violations in the browser console:

[Violation] Permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.

These violations occurred because the embedded betterplace.org widget (NativePaymentMethodsProvider.tsx) attempts to use the Payment Request API for Apple Pay and Google Pay support, but the iframe lacked the necessary browser permission.

Root Cause

Modern browsers require explicit permission via the Permissions Policy to allow iframes to access the Payment Request API. Without the allow="payment" attribute on the iframe element, the browser blocks these API calls and logs violations to the console.

Solution

Added the allow="payment" attribute to the iframe element:

Before:

<iframe width="500px" height="500" 
        src="https://www.betterplace.org/de/donate/platform/projects/138560-3d-druck-und-elektronik-ag">
</iframe>

After:

<iframe width="500px" height="500" 
        src="https://www.betterplace.org/de/donate/platform/projects/138560-3d-druck-und-elektronik-ag" 
        allow="payment">
</iframe>

Impact

• ✅ Eliminates all payment permission console violations
• ✅ Enables Apple Pay and Google Pay functionality within the iframe
• ✅ Follows browser security best practices
• ✅ Minimal code change (single attribute addition)
• ✅ Zero breaking changes

Documentation

Updated both README.md and docs/index.html per repository guidelines to document the fix and explain the technical rationale behind the allow="payment" attribute.

References

• MDN: Permissions Policy
• MDN: Payment Request API

Original prompt

---

This section details on the original issue you should resolve

<issue_title>errors</issue_title>
<issue_description>````
NativePaymentMethodsProvider.tsx:31 [Violation] Permissions policy violation: payment is not allowed in this document.
l @ NativePaymentMethodsProvider.tsx:31
(anonymous) @ NativePaymentMethodsProvider.tsx:70
NativePaymentMethodsProvider.tsx:31 [Violation] Permissions policy violation: payment is not allowed in this document.
l @ NativePaymentMethodsProvider.tsx:31
(anonymous) @ NativePaymentMethodsProvider.tsx:71
5
[Violation] Potential permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.
[Violation] Potential permissions policy violation: payment is not allowed in this document.

in docs/donate.html

please investigate this bug.  NativePaymentMethodsProvider.tsx seems to be a remote loaded script

import NativePaymentMethodsContext from './NativePaymentMethodsContext'
import { PaymentMethods } from '@betterplace/api-graphql-types'
import { type ReactNode, useEffect, useState } from 'react'
import type { NativePaymentAvailable, NativePaymentMethod } from './types'

function getSupportedMethods(paymentMethod: NativePaymentMethod): [PaymentMethodData] {
if (paymentMethod === PaymentMethods.StripeApplePay) {
return [
{
supportedMethods: 'https://apple.com/apple-pay',
data: {
environment: 'TEST',
},
},
]
}
return [
{
supportedMethods: 'https://google.com/pay',
data: {
currencyCode: 'EUR',
countryCode: 'DE',
},
},
]
}

async function isPaymentMethodAvailable(paymentMethod: NativePaymentMethod): Promise {
if (typeof PaymentRequest !== 'undefined') {
try {
return await new PaymentRequest(getSupportedMethods(paymentMethod), {
total: {
label: 'test',
amount: {
currency: 'EUR',
value: '0.00',
},
},
}).canMakePayment()
} catch {}
}
try {
// browser does not support PaymentRequest
if (paymentMethod === PaymentMethods.StripeApplePay && typeof window.ApplePaySession !== 'undefined') {
return (window.ApplePaySession as { canMakePayments: () => Promise }).canMakePayments() ?? false
}
if (paymentMethod === PaymentMethods.StripeGooglePay && typeof window.google !== 'undefined') {
// assumes google sdk is loaded
return (
(window.google as { payments?: { isReadyToPay: () => Promise } }).payments?.isReadyToPay() ?? false
)
}
} catch (e) {
console.error(e)
}
return false
}

const initialAvailabilityState = {
[PaymentMethods.StripeApplePay]: false,
[PaymentMethods.StripeGooglePay]: false,
}

function NativePaymentMethodsProvider({ children }: { children?: ReactNode }) {
const [available, setAvailable] = useState(initialAvailabilityState)
const [loading, setLoading] = useState(true)

useEffect(() => {
setLoading(true)
Promise.allSettled([
isPaymentMethodAvailable(PaymentMethods.StripeApplePay),
isPaymentMethodAvailable(PaymentMethods.StripeGooglePay),
])
.then((results) => {
const [applePay, googlePay] = results
if (applePay.status === 'fulfilled') {
setAvailable((prevState) => ({ ...prevState, [PaymentMethods.StripeApplePay]: applePay.value }))
} else {
setAvailable((prevState) => ({ ...prevState, [PaymentMethods.StripeApplePay]: false }))
}
if (googlePay.status === 'fulfilled') {
setAvailable((prevState) => ({ ...prevState, [PaymentMethods.StripeGooglePay]: googlePay.value }))
} else {
setAvailable((prevState) => ({ ...prevState, [PaymentMethods.StripeGooglePay]: false }))
}
})
.catch((error) => {
console.error(error from isPaymentMethodAvailable:, error)
setAvailable(initialAvailabilityState)
})
.finally(() => {
setLoading(false)
})
}, [])

return (
<NativePaymentMethodsContext.Provider value={{ available, loading }}>
{children}
</NativePaymentMethodsContext.Provider>
)
}

export default NativePaymentMethodsProvider

is the code from that file</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>


</details>
Fixes 35services/html#13

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click [here](https://survey3.medallia.com/?EAHeSx-AP01bZqG0Ld9QLQ) to start the survey.