JS function doesn't recognize JavaScript interface method

Question

I faced the following problem. There's a part of the webpage:

    document.getElementById('continueButton').addEventListener('click', function () {
        window.parent.postMessage('PAYLANDS-ERROR', '*');

        if (window.parent.HTMLOUT) {
            window.parent.HTMLOUT.paylandsFail();
        }
    });

Here's my interface which contains methods with annotation @JavascriptInterface:

interface IAddCard3dsJavaScript {

    @JavascriptInterface
    fun paylandsSuccess()

    @JavascriptInterface
    fun paylandsFail()

    companion object {
        const val INTERFACE_NAME = "HTMLOUT"
    }

}

There's the class which implements this interface:

class AddCard3dsJavaScript(private val presenter: IAddCard3dsCallback) : IAddCard3dsJavaScript {

    override fun paylandsSuccess() {
        presenter.onPaylands3dsSuccess()
    }

    override fun paylandsFail() {
        presenter.onPaylands3dsFailed()
    }

}

But when I run the app I get this line in console: Uncaught TypeError: window.parent.HTMLOUT.paylandsFail is not a function . I tried to change the interface name to window.parent.HTMLOUT instead of HTMLOUT , and in this case, I didn't get the error, but paylandsFail method body didn't execute. So, what's the problem and how can I solve it?

UPD

Here's the way how I add this interface to webview:

@SuppressLint("JavascriptInterface")
    override fun loadUrlFor3ds(url: String) {
        addCardWebView?.apply {
            addJavascriptInterface(AddCard3dsJavaScript(getController()), IAddCard3dsJavaScript.INTERFACE_NAME)
            loadUrl(url)
        }
    }

Answer 1

Fixed by adding annotation @JavascriptInterface to AddCard3dsJavaScript - IAddCard3dsJavaScript implementation