Integrate the Widget in a WebView

Integration

Load the following URL to integrate the Widget in an iOS or Android WebView:

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

Pass the Widget configuration in the query string instead of using client-side JavaScript.

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

How it works

Configure the Fintoc WebView by passing the parameters for your product in the query string:

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`	Identifier for your web application or page in Fintoc. Fintoc assigns each `Link` created with this key to the organization or user that owns the key. The key also selects the environment: sandbox keys begin with `pk_test_`, and production keys begin with `pk_live_`.
`holder_type`	`string`	Type of account to connect to Fintoc. One of `business` or `individual`. This parameter is not required for Payment Initiation.
`product`	`string`	Product and type of `Link` to create. One of `movements`, `subscriptions`, `invoices`, or `payments`.
`country`	`string`	Two-letter ISO 3166-1 alpha-2 country code for the account. One of `cl` or `mx`. Defaults to `cl`. This parameter is not required for Payment Initiation.
`webhook_url`	`string`	URL that receives the new `Link` and its `link_token` after successful creation. Only the `movements` and `invoices` products use this parameter.
`session_token`	`string`	Token created by your backend when it creates a Checkout Session. The token initializes and configures the Widget for Payment Initiation.
`widget_token`	`string`	Token created by your backend to initialize and configure the Widget for the Subscriptions product. Only the `subscriptions` product uses this parameter.

Build the query string in the following format:

queryString = "
  public_key=pk_live_XXX
  &holder_type=individual
  &product=movements
  &country=cl
  &link_token=pi_XXX
"

Usage example

Use the following Android and iOS examples to initialize the WebView:

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("product", "payments")
    .appendQueryParameter("public_key", "pk_live_INSERT_YOUR_API_KEY")
    .appendQueryParameter("session_token", "pi_INSERT_YOUR_sec_SESSION_TOKEN")
    return builder.build()
}

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 includes a webView method that handles links inside the WebView. The example opens links in Safari, but you can open them inside your application instead. When your customer completes a Payment Initiation flow, they can select a link to download the transaction receipt. Allow the WebView to open these links.

WebView redirections

Handle Widget events through the following WebView redirections:

Method	Redirect URL	Description
`onSuccess`	`fintocwidget://succeeded`	Fintoc redirects to this URL when the flow finishes successfully.
`onExit`	`fintocwidget://exit`	Fintoc redirects to this URL when your customer closes the Widget before completing the flow.
`onEvent`	`fintocwidget://event/{event_name}?queryparam={value}`	Fintoc redirects to this URL for each available Widget event. See Widget events for details.

onEvent (WebView)WebView integrations receive onEvent redirections by default. Handle these redirections to prevent them from interrupting your Widget integration.

Use the following Android and iOS examples to handle these redirections:

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

<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

Direct debit

Movements

Integrate the Widget in a WebView

Integration

How it works

Usage example

WebView redirections

​Integration

​How it works

​Usage example

​WebView redirections

Integration

How it works

Usage example

WebView redirections