Improve paypal QR code

src/frontend/src/components/forms/PaymentDetailsEditor.tsx

@@ -72,13 +72,21 @@ function MethodFields({
       )}
 
       {method.type === "paypal" && (
-        <Form.Item label="PayPal.me username" required>
-          <Input
-            addonBefore="paypal.me/"
-            value={method.username}
-            onChange={(event) => onChange({ username: event.target.value })}
-          />
-        </Form.Item>
+        <>
+          <Form.Item label="PayPal.me username" required>
+            <Input
+              addonBefore="paypal.me/"
+              value={method.username}
+              onChange={(event) => onChange({ username: event.target.value })}
+            />
+          </Form.Item>
+          <Form.Item
+            label="QR code link (optional)"
+            extra="Link from the QR code feature in PayPal, e.g. https://www.paypal.com/qrcodes/p2pqrc/..."
+          >
+            <Input value={method.qr_url} onChange={(event) => onChange({ qr_url: event.target.value })} />
+          </Form.Item>
+        </>
       )}
 
       <Form.Item
@@ -175,7 +183,7 @@ export default function PaymentDetailsEditor({
         <Alert
           type="info"
           showIcon
-          message="Payment methods are shown to participants next to the order description. SEPA and PayPal methods get a QR code pre-filled with the participant's estimated total and the reference."
+          message="Payment methods are shown to participants next to the order description. SEPA methods get a QR code pre-filled with the participant's estimated total and the reference; PayPal methods show the QR code from the link you provide."
         />
 
         {draft.methods.length === 0 ? (

src/frontend/src/components/orders/PaymentDetailsCard.tsx

@@ -93,7 +93,7 @@ export function PaymentMethodDetails({ method, context }: { method: PaymentMetho
               rel="noopener noreferrer"
               style={{ alignSelf: "flex-start" }}
             >
-              Open PayPal
+              paypal.me
             </Button>
           )}
         </Space>

src/frontend/src/lib/paymentDetails.ts

@@ -47,6 +47,7 @@ export function createPaymentMethod(type: PaymentProviderType): PaymentMethod {
     iban: "",
     bic: "",
     username: "",
+    qr_url: "",
     reference: type === "custom" ? "" : DEFAULT_PAYMENT_REFERENCE,
     description: "",
   };
@@ -67,6 +68,7 @@ export function normalizePaymentDetails(raw: unknown): OrderPaymentDetails {
         iban: asString(entry.iban),
         bic: asString(entry.bic),
         username: asString(entry.username),
+        qr_url: asString(entry.qr_url),
         reference: typeof entry.reference === "string" ? entry.reference : base.reference,
         description: asString(entry.description),
       };
@@ -174,7 +176,8 @@ export function buildPaymentQrValue(method: PaymentMethod, context: PaymentConte
   const reference = renderPaymentReference(method.reference, context);
   switch (method.type) {
     case "sepa": return buildEpcPayload(method, reference, context.amount);
-    case "paypal": return buildPaypalUrl(method.username, context.amount);
+    // PayPal QR codes come from a PayPal-generated link; paypal.me links can't be scanned as P2P QR codes.
+    case "paypal": return method.qr_url.trim();
     default: return "";
   }
 }

src/frontend/src/lib/types.ts

@@ -136,6 +136,7 @@ export type PaymentMethod = {
   iban: string;
   bic: string;
   username: string;
+  qr_url: string;
   reference: string;
   description: string;
 };