如何在 Flutter 中实现 3D Secure（通过 Visa / MasterCard SecureCode 验证）？

Question

现有的 3DS 实现是这样的，在结帐和付款阶段，它涉及将客户从您的应用程序重定向到银行/发卡机构网站，客户可以在其中输入他们之前设置的密码以验证他们确实是持卡人。然后，该网站会将客户重定向回您的网站，并提供完成交易所需的信息。如何读取银行服务器对重定向的响应？我尝试通过 webview_flutter 执行此操作，但只能获得 URL 重定向。

Widget _view3ds(PaymentAnswer answer) {
  final url = answer.model['AcsUrl'];
  return Scaffold(
    appBar: AppBar(
      title: const Text('Pay'),
    ),
    body: WebView(
      initialUrl: url,
      initialPostParameters: answer.paramPost3DS(),
      javascriptMode: JavascriptMode.unrestricted,
      onPageFinished: _pageFinished
    ),
  );
}

void _pageFinished(String url)  {
  print(url);
  url.response ??? // Is there a way to get to the server response? Maybe there is another plugin that allows this?
}

有一个 swift 代码非常有效：

/// Handle result from 3DS form
    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        let urlString = request.url?.absoluteString
        if (urlString == Constants.cloudpaymentsURL) {
            var response: String? = nil
            if let aBody = request.httpBody {
                response = String(data: aBody, encoding: .ascii)
            }
            let responseDictionary = parse(response: response)
            webView.removeFromSuperview()
            post3ds(transactionId: responseDictionary?["MD"] as! String, paRes: responseDictionary?["PaRes"] as! String)
            return false
        }
        return true
    }

我可以在纯 flutter 上得到这样的东西吗？

Answer 1

您应该使用 RegExp 解析 url。我认为它应该是 "order_id" 或类似的东西，以防交易成功

if (url.contains('order_id')) {
  flutterWebViewPlugin.close();
  RegExp regExp = RegExp("order_id=(.*)");
  var token = regExp.firstMatch(url)?.group(1);
  ...
} else {
  print('rejected transaction');
}

Answer 2

您需要了解支付集成中发生的流程。基本上有应用程序、服务器和支付网关。

您的应用程序可能会向您的服务器发起支付，然后您的服务器可能会将此调用重定向到支付网关。或者，您的应用可以直接在支付网关上调用 link（这取决于实现）。在任何一种情况下，对支付网关的调用很可能是使用某种 callbackUrl 参数启动的。此 callbackUrl 将由支付网关用于通知您任何成功或失败。

在大多数情况下（如果不是全部），callbackUrl 是可公开访问的 url，因此很可能是您的服务器（您的应用程序不可公开访问，支付网关无法调用其上的任何端点）。请注意，您的应用程序仍然无法访问此数据，因为支付网关直接调用您的服务器。然后，您的服务器将执行 HTTP 重定向，这将由转到成功或错误页面的应用反映出来。

这个重定向 url 是关键。它应该保存一个您以后可以用来查询服务器状态的 transactionId 或一个通用的 success/failure 格式，为您的下一个工作提供足够的信息。

还请理解，以上仅为示例。您将必须弄清楚支付流程是如何在您的服务器中实现的。

要获取 WKWebView 导航功能的句柄，请使用导航委托： https://developer.apple.com/documentation/webkit/wknavigationdelegate

具体来说，您需要查看委托方法并选择合适的句柄来捕获 url。我认为以下内容会对您有所帮助：

func webView(WKWebView, didReceiveServerRedirectForProvisionalNavigation: WKNavigation!)

如何在 Flutter 中实现 3D Secure（通过 Visa / MasterCard SecureCode 验证）？

How to implement 3D Secure (Verified by Visa / MasterCard SecureCode) in Flutter?

3d-secure

dart

swift

flutter