We are working on web and mobile applications to access Clover data and place Clover orders via our applications. For card tokenization on the web application, we have used the hosted iFrame, which works as expected.
But when we try to use the same iFrame in Android(WebView) and iOS, we cannot get the token data from iFrame.
JS code
window.androidObj = function AndroidClass(){}; var tokenData = "Token Data"; form.addEventListener('submit', function (event) { event.preventDefault(); clover.createToken() .then(function (result) { if (result.errors) { Object.values(result.errors).forEach(function (value) { console.log(value); }); } else { tokenData = result; if (window.androidObj.textToAndroid) { window.androidObj.textToAndroid(tokenData); } } }).catch(function (data) { console.log(data); }); });
Android
String script = "javascript: " + "window.androidObj.textToAndroid = function(message) { " + KEY_JS_OBJ + ".textFromWeb(message) }";
When we debug the issue, we noticed exceptions in the clover.createToken() function.
Exception
Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'.
Could someone please let me know if there is a better way to do this integration or if we have done something wrong here? Thanks in advance.
Note: All the apps and devices are third-party, not Clover apps or devices.