Angular externes Skript mit dynamischen Namen im Bezahlvorgang

Question

Ich implementiere ein Zahlungsmodul von Commerzbank (Docs: https://commerzbank.docs.oppwa.com/tutorials/integration-guide) in einer E-Commerce-Seite und wenn Sie Schritt 2 betrachten, werden Sie feststellen, dass ich eine Javascript-Datei laden muss Das enthält eine Variable (checkoutId) in der Quelle.

<script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script> 

Ein solches Skript sieht wie folgt aus:

(function(){ 
var wpwl = wpwl || {}; 

// timestamp 
wpwl.timestamp = new Date().toUTCString(); 

// paymentWidgets.js request 
wpwl.minified = true; 
wpwl.checkoutId = "D7953E29AA922D918F02A1C268C0230E.sbg-vm-tx02"; 

// environment 
wpwl.url = "https://test.oppwa.com"; 
wpwl.cacheVersion = "1814c6681b9c8a96918c1f4883f0649e"; 
wpwl.isTestSystem = true; 
wpwl.apiVersion = "1"; 

// ndc 
wpwl.ndc = "D7953E29AA922D918F02A1C268C0230E.sbg-vm-tx02"; 

// payment config 
wpwl.paymentWidgetConfig = {"brandConfig":{"brands":["ADVANTAGE","BARPAY","CARDFINANS"],"overrideShopBrands":false,"activateBrands":false},"registrations":[],"detectIp":false,"environmentConfig":{"url":"https://test.oppwa.com","defaultPaymentMode":"INTEGRATOR_TEST","cacheVersion":"1814c6681b9c8a96918c1f4883f0649e"},"workflowSpecificConfig":{"aliRiskConfig":{"active":false,"aliRiskParameters":{"clientAppName":"PAY.ON"}},"kountConfig":{"active":false,"merchantId":"","sessionId":""},"gfklConfig":{"active":false}}}; 
wpwl.aliRiskParams = {"clientAppName":"PAY.ON"}; 
wpwl.kountSessionId = ''; 

wpwl.endPoint = "/payment"; 

// expose wpwl to global 
window.wpwl = wpwl; 

// load static files async 
(function(d,t,w,s,j){ 
    s = d.createElement(t), j = d.getElementsByTagName(t)[0]; 
    s.src = [w.url, "/v", w.apiVersion, "/static/", w.cacheVersion, "/js/static", w.minified ? ".min" : "", ".js"].join(""); 
    s.async = true; 
    j.parentNode.insertBefore(s, j); 
}(document, "script", wpwl)); 
}()); 

I Angular bin mit mit ui-Router. Immer wenn ich dieses Javascript einfüge, ersetzt es mein Formular mit der sicheren Form der Commerzbank, in der der Benutzer seine Kreditkarteninformationen eingibt (korrektes Verhalten). Aber in Schritt 3 bekomme ich immer eine Fehlermeldung, credit card number may not be null, obwohl ich es eingeben.

Ich habe ihren Support kontaktiert und wir haben dieses Problem seit fast 2 Monaten untersucht. Leider haben sie keine Erfahrung mit Angular. Ich bin mir sehr sicher, dass das mit dem Weg (oder der Zeit) zu tun hat, in dem ihr Skript injiziert wird.

Es funktionierte für mich nur einmal, wenn ich den src fest codierte. Für den Support der Commerzbank funktioniert meine Version in einer Online-Testumgebung. Ich gehe auf die gleiche Seite und es funktioniert nicht. Ich habe bestätigt, dass es für sie über die Bildschirmfreigabe funktioniert.

Ich weiß, es klingt total komisch - warum würde der gleiche Code für sie arbeiten, aber nicht für mich. Es muss einen Punkt geben, den ich vermisse. Ich bin mir ziemlich sicher, dass das zu spezifisch und nicht genug Information ist, aber ich kann nicht anders, als verzweifelt zu posten.

Answer 1

Ich habe das Problem gefunden. Am Ende war es nur ein Problem mit der Commerzbank Formular in meiner äußeren Form für die gesamte Kasse verschachtelt. Ich werde diese Frage hier für eine zukünftige Referenz für den unwahrscheinlichen Fall lassen, dass jemand anderes mit diesem Problem konfrontiert wird.

Eine einfache Lösung ist nicht ihre Form in einer anderen Form verschachtelt. In Fällen, die nicht zu Ihrer Logik passen, kann ich weitere Details hinzufügen, nachdem ich ihre Unterstützung erhalten und mehr erfahren kann.