PayPal ACDC: SWAG_PAYPAL__SCRIPT_ERROR durch fehlenden DOM-Container (#swag-paypal-acdc-form) auf Checkout-Confirm (Timing-Race)

[Aragon33]

Shopware Version

Shopware: 6.6.10.x

PayPal plugin version

SwagPayPal: 9.8.4

Actual behaviour

• Route: frontend.checkout.confirm.page (Checkout-Confirm)

Reproduktionsschritte

1. ACDC (PayPal „Kredit- oder Debitkarte“) im Channel aktivieren.
2. Im Frontend „Kredit- oder Debitkarte“ als Zahlart wählen.
3. Checkout-Confirm-Seite öffnen und eine Testbestellung starten (3DS darf scheitern, das ist hier nicht die Ursache).
4. In den Prod-Logs erscheinen wiederkehrend Fehlereinträge mit SWAG_PAYPAL__SCRIPT_ERROR, obwohl ACDC auf Confirm initialisiert werden sollte.

Ist-Verhalten

• Die ACDC-Init läuft, obwohl der Container #swag-paypal-acdc-form zum Init-Zeitpunkt (noch) nicht im DOM verfügbar ist.
• Das führt zu:
  • Log-Level Error „Storefront checkout error“ mit Code SWAG_PAYPAL__SCRIPT_ERROR (fatal=true).
  • Der ACDC-Checkout bricht für diese Zahlart ab (kein Submit der Kartendaten möglich).

Erwartetes Verhalten

• ACDC sollte nur initialisiert werden, wenn der Container existiert, oder die Init sollte den Container abwarten (Retry/Observer), sodass kein fataler Fehlzustand entsteht.
• Alternativ: Die Init muss robust sein gegenüber asynchron gerenderten/verschobenen DOM-Bereichen in kundenspezifischen Themes.

Log-Beispiele
(UTC)

[2025-11-06T10:33:59Z] paypal.ERROR: Storefront checkout error {"error":"Error: The required element \"#swag-paypal-acdc-form\" does not exist in parent node!","code":"SWAG_PAYPAL__SCRIPT_ERROR","fatal":true,"paymentMethodName":"Kredit- oder Debitkarte"} {"controller":"Swag\\PayPal\\Storefront\\Controller\\PayPalController->onHandleError"}

Weitere Hinweise

• Der Fehler stammt aus vendor/shopware/storefront/.../dom-access.helper.js (DomAccess.querySelector(strict=true)).
• Der ACDC-Code referenziert den Container u. a. in custom/plugins/SwagPayPal/src/Resources/app/storefront/src/checkout/swag-paypal.acdc-fields.js (cardFieldFormSelector: '#swag-paypal-acdc-form' und DomAccess.querySelector(document, this.options.cardFieldFormSelector)).
• 3DS-Fehler (SWAG_PAYPAL__CARD_VALIDATION_FAILED) wurden mit absichtlich ungültiger Karte ausgelöst und sind nicht das Problem. Der hier gemeldete Fehler tritt unabhängig davon auf und verhindert den ACDC-Checkout.

Workarounds, die wir testweise umgesetzt haben

• ACDC-Init auf frontend.account.order.* unterdrückt (verhindert Fehler dort).
• ACDC-Init auf Confirm verzögert und an Route/Zahlart gekoppelt; Fehlerquote sinkt, verschwindet aber nicht zuverlässig.
• Container zusätzlich im Zahlungs-Label-Bereich gerendert (wie im Plugin), verbessert die Lage, aber Timing-Probleme bleiben in bestimmten Layout-/Render-Konstellationen möglich.

Vorschlag zur Behebung (Plugin-seitig)

• Init erst starten, wenn #swag-paypal-acdc-form vorhanden ist (z. B. mit kurzem Retry oder MutationObserver).
• Alternativ: Container-Lookups relativ zum Payment-Block statt document, sofern mehrere Instanzen/DOM-Umbauten vorliegen.
• Fehler bei fehlendem Container nicht als „fatal“ werten, sondern Init später erneut versuchen.
• Optional: Init und Container-Render enger koppeln (gleicher Template-Kontext), sodass kein Rennen entsteht.

Nutzen

• Erhöht die Robustheit des ACDC-Checkouts in realen Storefronts mit Channel-Themes/DOM-Varianten, verhindert SWAG_PAYPAL__SCRIPT_ERROR und Abbrüche der ACDC-Zahlung.

Benötigte Rückmeldung

• Bitte Einschätzung, ob die Init-Strategie angepasst werden kann (Warten/Retry), oder ob es offizielle Best Practices für Themes gibt, um das Timing-Problem ausschließlich via Theme zu adressieren.

Expected behaviour

Erwartetes Verhalten

• ACDC sollte nur initialisiert werden, wenn der Container existiert, oder die Init sollte den Container abwarten (Retry/Observer), sodass kein fataler Fehlzustand entsteht.
• Alternativ: Die Init muss robust sein gegenüber asynchron gerenderten/verschobenen DOM-Bereichen in kundenspezifischen Themes.

How to reproduce & Environment

• Route: frontend.checkout.confirm.page (Checkout-Confirm)

Reproduktionsschritte

1. ACDC (PayPal „Kredit- oder Debitkarte“) im Channel aktivieren.
2. Im Frontend „Kredit- oder Debitkarte“ als Zahlart wählen.
3. Checkout-Confirm-Seite öffnen und eine Testbestellung starten (3DS darf scheitern, das ist hier nicht die Ursache).
4. In den Prod-Logs erscheinen wiederkehrend Fehlereinträge mit SWAG_PAYPAL__SCRIPT_ERROR, obwohl ACDC auf Confirm initialisiert werden sollte.