molerat molerat - 24 days ago 9
AngularJS Question

Angular external script with dynamic name in payment process

I am implementing a payment module from Commerzbank (Docs: https://commerzbank.docs.oppwa.com/tutorials/integration-guide) in an ecommerce page and if you look at step 2, you will find, that I have to load a javascript-file that contains a variable (

checkoutId
) in the source.

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


Such a script looks like that:

(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 am using Angular with ui-router. Whenever I inject this javascript, it replaces my form with Commerzbank's safe form in which the user enters his credit card information (correct behavior). But in step 3 I always get an error saying,
credit card number may not be null
even though I do enter it.

I have contacted their support and we've been looking at this issue for almost 2 months now. Unfortunately they have no experience with Angular. I am very sure that is has to do with the way (or time) their script is injected.

It worked for me only one time when I hard coded the src. For Commerzbank support my version works in an online test environment. I go to the same page and it does not work. I have confirmed that it works for them via screen sharing.

I know it sounds totally weird - why would the same code work for them but not for me. There must be a point I am missing. I'm pretty sure this is too specific and not enough information, but I can't help posting out of desperation.

Answer

I found the problem. In then end it was just a problem with having the Commerzbank form nested into my outer form for the whole checkout. I will leave this question here for future reference for the unlikely case that anybody else faces this problem.

A simple solution is not having their form nested into another form. In cases that does not fit your logic, I can add more details after I can reach their support and find out more.

Comments