WebView Integration (OLD)

Integration

To integrate the Widget using a WebView on iOS and Android, use this URL:

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

Pass the widget configuration through the query string instead of client-side JavaScript.

Using React Native?Use the @fintoc/fintoc-react-native npm library to integrate the WebView into your application.

How it works

Pass the following query parameters to configure the Fintoc WebView for your product:

Text

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

Parameter	Type	Description
`public_key`	`string`	Public key that identifies your web application or page in Fintoc. Links created with this key belong to the organization or user that owns the key. The prefix determines the environment: sandbox keys start with `pk_test_`, and production keys start with `pk_live_`.
`holder_type`	`string`	Type of account to connect to Fintoc. One of `business` or `individual`. For payment initiation, use `individual`.
`product`	`string`	Product and type of `Link` to create. One of `movements`, `subscriptions`, `invoices`, or `payments`.
`country`	`string`	ISO 3166-1 alpha-2 country code. One of `cl` or `mx`. Defaults to `cl`.
`institution_id`	`string`	Unique identifier for a financial institution. When provided, the widget preselects the institution. For example, `mx_banco_banamex` opens the widget with Banamex selected.
`username`	`string` or `object`	Username to prefill when making a payment. See the username object attributes. If you provide a string, the widget uses the default value for `editable`.
`webhook_url`	`string`	URL that receives a request containing the new `Link` and its `link_token` after successful creation. Used only with `movements` and `invoices`; you do not need `webhook_url` for `payments` or `subscriptions`.
`widget_token`	`string`	Backend-generated token that initializes and configures the widget. Only `payments` and `subscriptions` use this parameter.

Username object

To prefill a username and change the default values, send an object with these attributes:

username = {
  value: "123456789",
  editable: true
}

Use the following query string format to include nested parameters:

queryString = "
  public_key=pk_live_XXX
  &holder_type=individual
  &product=payments
  &username[value]=12345678-9
  &username[editable]=false
  &country=cl
  &widget_token=pi_XXX
"

Libraries such as qs can format a nested object.

Attribute	Type	Description
`value`	`string`	Username to prefill in the widget. In Chile, provide the user’s Chilean tax ID (RUT). In Mexico, provide the user’s phone number.
`editable`	`boolean`	Whether the field is editable in the widget. Defaults to `true`.

Usage example

Use these client-side examples to initialize the WebView on Android and iOS. Client (Android, Kotlin)

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.javaScriptCanOpenWindowsAutomatically = 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", "payments")
    .appendQueryParameter("public_key", "pk_live_INSERT_YOUR_API_KEY")
    .appendQueryParameter("widget_token", "pi_INSERT_YOUR_sec_WIDGET_TOKEN")
    return builder.build()
}

Client (iOS, Swift)

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate, WKUIDelegate {

    private var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.navigationDelegate = self
        webView.allowsBackForwardNavigationGestures = false
        webView.scrollView.bounces = false
        webView.isMultipleTouchEnabled = false
       	webView.configuration.preferences.javaScriptCanOpenWindowsAutomatically = true

        // zoom
        webView.scrollView.delegate = self
        webView.scrollView.minimumZoomScale = 1.0
        webView.scrollView.maximumZoomScale = 1.0

        let url = generateInitializationURL()
        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 webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }
        if let url = navigationAction.request.url {
            UIApplication.shared.open(url)
        }
        return nil
    }

    func generateInitializationURL() -> URL {
        let params = [
            "holder_type": "individual",
            "product": "payments",
            "public_key": "pk_live_INSERT_YOUR_API_KEY",
            "widget_token": "pi_INSERT_YOUR_sec_WIDGET_TOKEN",
        ]
        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!
    }
  
    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":
          	print("Succeeded!")
          	break
          case "exit":
          	print("Exited")
          	break
          default:
          	print("Another widget action detected: \(actionType)")
          	break
        }
        decisionHandler(.cancel)
        return
      } else {
        decisionHandler(.allow)
      }
}

The Swift example uses a webView method to handle links in the WebView. The example opens links in Safari, but you can open them in your application instead. After completing a Payment Initiation flow, the user can follow a link to download the transaction voucher. Allow the WebView to open links so the user can download the voucher.

WebView redirections

After integrating the WebView, handle its events through the following redirections:

Method	Redirect URL	Description
`onSuccess`	`fintocwidget://succeeded`	Occurs after the flow finishes successfully.
`onExit`	`fintocwidget://exit`	Occurs after the user closes the Widget before completing the flow.
`onEvent`	`fintocwidget://event/{event_name}?queryparam={value}`	Occurs for every event available in the widget. See Widget events for more information.

onEvent (WebView)The onEvent event is enabled by default. Handle the onEvent redirection to prevent the Widget integration from breaking when the WebView receives this event.

Use these client-side examples to handle the redirections on Android and iOS. Client (Android, Kotlin)

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
  }
}

Client (Android, Java)

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
      }
    }
  }
}

Client (iOS, Swift)

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
          } else {
            decisionHandler(.allow)
          }
    }

Add the fintocwidget URL scheme on iOSBefore integrating the Fintoc Widget with your iOS application, add fintocwidget as a permitted URL scheme in the application’s Info.plist file.

Client (iOS configuration)

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>fintocwidget</string>
			</array>
			<key>CFBundleURLName</key>
			<string>your.bundle.id</string>
		</dict>
	</array>

Home

Resources

Payments

Transfers

Movements

WebView Integration (OLD)

Integration

How it works

Username object

Usage example

WebView redirections

​Integration

​How it works

​Username object

​Usage example

​WebView redirections

Integration

How it works

Username object

Usage example

WebView redirections