3

I have a credit card form which shows the iOS8 feature "Scan Credit Card" when viewed in Safari on my iPhone. It works great. Users can scan their credit card using the camera on their iPhone. I have accomplished this by adding HTML5 autocomplete tags (cc-number, cc-exp-year, cc-exp-month) on the input fields. Safari then automatically recognizes that and activates the scan feature. However I want to display this in a web view inside my iOS app. The form shows, but the scan feature does not. Is this possible?

This is the same question as: Is the Scan Credit Card option available on the WebView?

I wanted to make a comment there but I'm a new user so I can't?

Community
  • 1
  • 1
roach
  • 31
  • 1
  • 3
  • You can do it using Card.IO or BinaryTree library. I am afraid why you are using safari – baydi Sep 09 '15 at 10:44
  • Thank you baydi. I'm aware of Card.IO and other libraries that accomplishes this. But because of security policies we have at the company I can't use them. One solution would be to open safari from the app and then switch back to the app after. But we want to do it in a web view inside the app if that is possible. – roach Sep 09 '15 at 11:26
  • Looking for the same but doesn't found anything... – Himanshu Garg Jan 05 '17 at 06:57

1 Answers1

4

I have been experimenting and have been unable to make this work in UIWebView or WKWebView. The source html file was being served from an https enabled server. The "AutoFill Credit Card" is shown when accessing the URL from Safari, but is not shown when embedded in iOS. I do not think this functionality is supported in UIWebView or WKWebView, sadly.

<!DOCTYPE html>
<html>
<head>
        <title>Scan credit card using iOS</title>
        <style type="text/css">
        /*<![CDATA[*/
                   input {height:1.5em;width:95%}
                   input[type="text"] {font-size: 2.5em}
                   body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
                   #purchase {font-size: 2em;font-weight: bold;height:1.2em}
         /*]]>*/
        </style>
</head>
<body>
        <form action="https://yoursite.com/credit-card-purchase" method="post">
                <label for="nameoncard">Name on Card</label> 
                <input autocomplete="cc-name" id="nameoncard" name="nameoncard" type="text"> 
                <label for="ccnumber">Credit Card Number</label> 
                <input autocomplete="cc-number" id="ccnumber" name="ccnumber" type="text">
                <label for="cc-exp-month">Expiration Month</label> 
                <input autocomplete="cc-exp-month" id="cc-exp-month" name="cc-exp-month" type="text"> 
                <label for="cc-exp-year">Expiration Year</label> 
                <input autocomplete="cc-exp-year" id="cc-exp-year" name="cc-exp-year" type="text"> 
                <label for="cvv2">CVV</label> <input autocomplete="cc-csc" id="cvv2" name="cvv2" type="text">
                <input name="submit" type="submit" value="Submit">
        </form>
</body>
</html>
- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *nsurl = [NSURL URLWithString:@"https://www.myhttpsserver.co.uk/test.html"];

    BOOL showWKWebView = YES;

    if (showWKWebView) {
        //WKWebView version
        WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
        WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];

        NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];
        [webView loadRequest:nsrequest];
        [self.view addSubview:webView];
    } else {
        //UIWebView version
        UIWebView *webView = [[UIWebView alloc] initWithFrame: self.view.frame];
        webView.delegate = self;

        NSURLRequest *request = [[NSURLRequest alloc] initWithURL:nsurl cachePolicy: NSURLRequestUseProtocolCachePolicy timeoutInterval: 5.0];
        [webView loadRequest:request];
        [self.view addSubview:webView];
    }
}
Jim Holland
  • 1,180
  • 12
  • 19