injecting javascript into Android webview not showing up

Question

I have a url that i got from a 3rd party. I need to load this url and after the user enters in a passcode it should send the android client a token. The url looks like this:

https://api.sandbox.veritrans.co.id/v2/token/redirect/521111-1117-bad66da4-cc24-4c59-9ef6-05641fc82c60

I am opening the url in a webview. My webview fragment looks like this:

public class WebView3DSFragment extends Fragment {

    @BindView(R.id.webview_3ds)
    WebView webView;


    public static WebView3DSFragment newInstance(Bundle b) {
        WebView3DSFragment fragment = new WebView3DSFragment();
        fragment.setArguments(b);
        return fragment;
    }

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_3ds_webview, container, false);
        ButterKnife.bind(this, rootView);

        String url = getArguments().getString("url", "");
        if (url != null) {
            webView.getSettings().setJavaScriptEnabled(true);
            injectJavaScript();
            webView.loadUrl(url);



        }
        return rootView;
    }

    public void injectJavaScript(){
        webView.addJavascriptInterface(new JS3DSInterface(), "Android");
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                webView.loadUrl(
                        "javascript:(function callback(response) {\n" +
                                "    if (response.redirect_url) {\n" +
                                "      // If 3Dsecure transaction. Open 3Dsecure dialog\n" +
                                "      console.log('Open Dialog 3Dsecure');\n" +
                                "      openDialog(response.redirect_url);\n" +
                                "\n" +
                                "    } else if (response.status_code == '200') {\n" +
                                "      // success 3d secure or success normal\n" +
                                "      //close 3d secure dialog if any\n" +
                                "      closeDialog();\n" +
                                "\n" +
                                "      // store token data in input #token_id\n" +
                                "      $(\"#token-id\").val(response.token_id);\n" +
                                "     " +"Android.set3DSToken(response.status_message)"+

                                "\n" +
                                "    } else {\n" +
                                "      // failed request token\n" +
                                "      //close 3d secure dialog if any\n" +
                                "      closeDialog();\n" +
                                "      $('#submit-button').removeAttr('disabled');\n" +
                                "      // Show status message.\n" +
                                "      $('#message').text(response.status_message);\n" +
                                "console.log(JSON.stringify(response));\n" +
                                "    }\n" +
                                "  }\n" +
                                "\n" +
                                "  // Open 3DSecure dialog box\n" +
                                "  function openDialog(url) {\n" +
                                "    // make sure to load fancybox in a script tag\n" +
                                "    $.fancybox.open({\n" +
                                "          href: url,\n" +
                                "          type: 'iframe',\n" +
                                "          autoSize: false,\n" +
                                "          width: 400,\n" +
                                "          height: 420,\n" +
                                "          closeBtn: false,\n" +
                                "          modal: true\n" +
                                "      });\n" +
                                "  }\n" +
                                "\n" +
                                "  // Close 3DSecure dialog box\n" +
                                "  function closeDialog() {\n" +
                                "    $.fancybox.close();\n" +
                                "  }\n" +
                                "});");
            }
        });

    }

    class JS3DSInterface {

        @JavascriptInterface
        public String set3DSToken(String s) {
            return "Java method called!!"+s;
        }
    }
}

The javascript I have in the code is actually found here:

http://api-docs.midtrans.com/#get-token

I feel that if I am able to inject this javascript into the webview then I can get the callback when user enters there information. But when I run the webview the url loads but when I check stetho in chrome://inspect the webview contains no javascript that I put in. How can i inject the javascript?

Update: even the following fails to be injected:

webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        view.loadUrl("javascript:alert('called by Android')");
    }
} 

As I never see an alert shown.

Answer 1

Loading javascript in WebView

webView.getSettings().setDomStorageEnabled(true);

For more reference JavaScript not working in Android Webview?