> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fintoc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView Integration (OLD)

> Reference for integrating the Widget as a WebView in your mobile application

## Integration

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

```text theme={null}
https://webview.fintoc.com/widget.html
```

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

<Info>
  **Using React Native?**

  Use the [`@fintoc/fintoc-react-native`](https://github.com/fintoc-com/fintoc-react-native) npm library to integrate the WebView into your application.
</Info>

## How it works

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

```text Text theme={null}
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.<br />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](/guides/movements/overview-data-aggregation/products-and-institutions-movements). 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](/guides/resources/widget/widget-webview-integration-old#username-object). 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:

```text theme={null}
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](https://www.npmjs.com/package/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)**

```kotlin theme={null}
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)**

```swift theme={null}
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](/guides/payments/overview-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](/guides/resources/widget/widget-events) for more information. |

<Warning>
  **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.
</Warning>

Use these client-side examples to handle the redirections on Android and iOS.

**Client (Android, Kotlin)**

```kotlin theme={null}
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)**

```java theme={null}
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)**

```swift theme={null}
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)
          }
    }
```

<Warning>
  **Add the `fintocwidget` URL scheme on iOS**

  Before integrating the Fintoc Widget with your iOS application, add `fintocwidget` as a permitted URL scheme in the application's `Info.plist` file.
</Warning>

**Client (iOS configuration)**

```xml theme={null}
<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>fintocwidget</string>
			</array>
			<key>CFBundleURLName</key>
			<string>your.bundle.id</string>
		</dict>
	</array>
```