如何在 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
    }

我可以在純顫振上得到這樣的東西嗎？

Answer 1

您需要了解支付集成中發生的流程。 基本上有應用程序、服務器和支付網關。

您的應用程序可能會向您的服務器發起付款，然后您的服務器可能會將此調用重定向到支付網關。 或者，您的應用程序可以直接調用支付網關上的鏈接（這取決於實現）。 在任何一種情況下，對支付網關的調用很可能是使用某種callbackUrl參數啟動的。 支付網關將使用此callbackUrl來通知您任何成功或失敗。

在大多數情況下，如果不是全部，callbackUrl 是一個可公開訪問的 url，因此很可能是您的服務器（您的應用程序不可公開訪問以供支付網關調用任何端點）。 請注意，您的應用程序仍然無法訪問此數據，因為支付網關直接調用您的服務器。 然后，您的服務器將執行 HTTP 重定向，該重定向將通過應用程序轉到成功或錯誤頁面來反映。

這個重定向 url 是關鍵。 它應該包含一個您以后可以用來查詢服務器狀態的 transactionId，或者包含為您的下一個工作提供足夠信息的一般成功/失敗格式。

另外請理解，以上只是一個例子。 您必須弄清楚付款流程是如何在您的服務器中實現的。

要獲得 WKWebView 導航功能的句柄，請使用導航委托： https : //developer.apple.com/documentation/webkit/wknavigationdelegate

具體來說，您需要查看委托方法並選擇合適的句柄來捕獲 url。 我認為以下內容會對您有所幫助：

func webView(WKWebView, didReceiveServerRedirectForProvisionalNavigation: WKNavigation!)

Answer 2

您應該使用 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');
}