How to autofill credit/debit-card details in inputfield in amazon.in in wkwebview in ios app?

Question

I'm developing iOS app in which there is webview(wkwebview), there will be website loaded in wkwebview like amazon.in I have credit/debit-card details like card-number, exp date, etc. securely stored in my iOS app, i want to populate credit/debit-card details into amazon.in payment page inputfields.

Default safari browser in iPhone is able to autofill credit/debit cards if saved.

Please let me know the solution for the same.

This is amazon payment page:

Screenshot amazon payment page

class ViewController: UIViewController {
let scriptSource = "document.getElementsByName('addCreditCardNumber')[0].value = '1111 1111 1111 1111'"
    var webConfig: WKWebViewConfiguration {
        get {
            let webCfg = WKWebViewConfiguration()
            let controller = WKUserContentController()
            let pre = WKPreferences()
            pre.javaScriptEnabled = true
            webCfg.preferences = pre
            let script = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
            controller.addUserScript(script)
            webCfg.userContentController = controller
            return webCfg;
        }
    }
lazy var webView: WKWebView = {
       let webView = WKWebView(frame: .zero, configuration: self.webConfig)
       webView.translatesAutoresizingMaskIntoConstraints = false
       return webView
   }()

override func viewDidLoad() {
    super.viewDidLoad()
    self.addWKWebView()
}
private func addWKWebView(){
    self.view.addSubview(webView)
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[webView]|", options: [], metrics: nil, views: ["webView": webView]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[webView]|", options: [], metrics: nil, views: ["webView": webView]))
    webView.load(URLRequest(url: URL(string: "https://www.amazon.in")!))
    webView.uiDelegate = self
    webView.navigationDelegate = self
   }}

user_6743844 · Answer

You can add a custom UserScript for a page with a WKUserScript-object. In it you can use standard JavaScript like document.getElementById("creditcard").defaultValue = "12345";

This tutorial should give you an idea of it: https://medium.com/capital-one-tech/javascript-manipulation-on-ios-using-webkit-2b1115e7e405. For more info on WKUserScript take a look at the official documentation (https://developer.apple.com/documentation/webkit/wkuserscript)

user_2553730 · Answer

Here is What i was using for append my message in webView :

   public static func appendNewMessage(chatListWebView : UIWebView,  appendTemplet : String) {
        do {
            let temp = "document.getElementById('message_div').innerHTML +=\"" + appendTemplet + "\""
            print(temp)
            chatListWebView.stringByEvaluatingJavaScript(from: "document.getElementById('message_div').innerHTML +=\"" + appendTemplet + "\"");
    } catch  {
//    JLog.error(appendTemplet);
//    ex.printStackTrace();
    }
    }

You can update it according to you situation , Sorry but i do not have time to edit it

Hope it help to you!

How to autofill credit/debit-card details in inputfield in amazon.in in wkwebview in ios app?

2 Answers