Integration

To integrate the Widget using a WebView on iOS and Android, you must use the following HTML:

https://webview.fintoc.com/widget.html

The widget configuration needs to be passed through a querystring instead of using client side JavaScript.

How it works

When including the Fintoc WebView in your mobile application, you need to pass the following query params to configure it, depending on the product that you want to use:

https://webview.fintoc.com/widget.html
  ?public_key=pk_live_00000
  &holder_type=individual
  &product=movements
  &country=cl
  &widget_token=pi_XXXXXX_sec_YYYYYYYY

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)
  supportActionBar?.hide()
    
  val widgetInitizalizationUrl = generateWidgetInitializationUrl()
  
  // Modify Webview settings - all of these settings may not be applicable
  // or necessary for your integration.
  val fintocWebview = findViewById<WebView>(R.id.webview)
  val webSettings = fintocWebview.settings
  webSettings.javaScriptEnabled = true
  webSettings.domStorageEnabled = true
  webSettings.cacheMode = WebSettings.LOAD_NO_CACHE
  webSettings.useWideViewPort = true
  WebView.setWebContentsDebuggingEnabled(true)

  fintocWebview.loadUrl(widgetInitizalizationUrl.toString())
}

private fun generateWidgetInitializationUrl() : Uri {
  val builder = Uri.parse("https://webview.fintoc.com/widget.html")
    .buildUpon()
    .appendQueryParameter("holder_type", "individual")
    .appendQueryParameter("product", "movements")
    .appendQueryParameter("public_key", "pk_live_00000000000")
    .appendQueryParameter("wiget_token", "pi_XXXXXXXX_sec_YYYYYYYYY")
    return builder.build()
}

import UIKit
import WebKit

final class FintocViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate {

    private let webView = WKWebView()
  
  override func viewDidLoad() {
    super.viewDidLoad()
     webView.navigationDelegate = self
     webView.allowsBackForwardNavigationGestures = false
     webView.frame = view.frame
     webView.scrollView.bounces = false
     webView.isMultipleTouchEnabled = false
     webView.scrollView.minimumZoomScale = 1.0
     webView.scrollView.maximumZoomScale = 1.0
     webView.scrollView.delegate = self
     self.view.addSubview(webView)

     let url = generateLinkInitializationURL()
     webView.load(URLRequest(url: url))
  }

  override var prefersStatusBarHidden : Bool {
    return true
  }

  @objc(scrollViewWillBeginZooming:withView:) func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
    scrollView.pinchGestureRecognizer?.isEnabled = false
  }
  

  func generateLinkInitializationURL() -> URL {
    let params = [
      "holder_type": "individual",
      "product": "payments",
      "public_key": "pk_live_00000000000",
      "widget_token": "pi_XXXXXXXX_sec_YYYYYYYYY",
      ]
    var components = URLComponents()
    components.scheme = "https"
    components.host = "webview.fintoc.com"
    components.path = "/widget.html"
    let queryItems = params.map { URLQueryItem(name: $0, value: $1) }
    components.queryItems = queryItems
    return components.url!
    }

  
}

Parameter	Type	Description
`public_key`	`string`	The `public_key` is used to identify your web application or web page within Fintoc. Links created with a `public_key` will get assigned to the organization or user that owns said `public_key`. This token will determine whether you're using the sandbox or the production environment. Remember that the `public_key` of the sandbox starts with `pk_test_`, while the production one starts with `pk_live_`.
`holder_type`	`string`	The `holder_type` parameter can be `business` or `individual`, and determines the type of account that will be connected to Fintoc.
`product`	`string`	The `product` parameter can be `movements`, `subscription`, `invoices`, `tax_returns`, `tax_statements` or `payments`, and determines the product and type of Link that will be created.
`country`	`string`	The `country` parameter must be the `ISO 3166-1 alfa-2` code of the country to which you're trying to connect. It can be `cl` or `mx`. Defaults to `cl`.
`webhook_url`	`string`	The `webhook_url` parameter corresponds to the URL that will get a request with the new Link after its successful creation, including its link_token.
`widget_token`	`string`	The `widget_token` parameter corresponds to the token created by the backend that initializes and configures the widget. Right now, only the `payments` product uses a `widget_token` parameter.

WebView Redirections

Once the WebView is integrated, you can interact with its events using redirections.

Method	Redirect URL	Description
`onSuccess`	fintocwidget://succeeded	This event will be occur after a Link gets created successfully.
`onExit`	fintocwidget://exit	This event will occur after a user closes the Widget prematurely.

To use these methods on Android and iOS, you can use the following snippets:

webview.webViewClient = object : WebViewClient() {
  override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    val parsedUri = Uri.parse(url)
    if (parsedUri.scheme.equals("fintocwidget")) {
      val action: String? = parsedUri.host
      val linkData: HashMap<String, String?>? = parseLinkUriData(parsedUri)
      if (action.equals("succeeded")) {
        // onSuccess
      }
      if (action.equals("exit")) {
        // onExit
      }
    }
    return true
  }
}

webview.setWebViewClient(new WebViewClient() {
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    Uri parsedUri = Uri.parse(url);
    if (parsedUri.getScheme().equals("fintocwidget")) {
      String action = parsedUri.getHost();
      HashMap<String, String> linkData = parseLinkUriData(parsedUri);
      if (action.equals("succeeded")) {
        // onSuccess
      }
      if (action.equals("exit")) {
        // onExit
      }
    }
  }
}

func webView(
      _ webView: WKWebView,
      decidePolicyFor navigationAction: WKNavigationAction,
      decisionHandler: @escaping ((WKNavigationActionPolicy) -> Void)
    ) {
      guard let url = navigationAction.request.url else {
        decisionHandler(.allow)
        return
      }
      let linkScheme = "fintocwidget";
      let actionScheme = url.scheme;
      let actionType = url.host ?? "";
      if actionScheme == linkScheme {
        switch actionType {
        case "succeeded":
          // onSuccess
          break
        case "exit":
          // onExit
          break
        default:
          print("Widget action detected: \(actionType)")
          break
        }
        decisionHandler(.cancel)
        return
      }
}