Integración Webview

Referencia para integrar el Widget en tu app o página web

Integración

Para integrarse con el Widget utilizando Webview para iOS y Android, se debe utilizar el siguiente html

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

La configuración del widget se pasa a través de un querystring en vez de utilizar javascript del lado del cliente.

Cómo funciona

Al incluir el webview de Fintoc en tu app debes pasarle los siguientes query params para configurarlo y utilizarlo. Los parámetros y sus valores dependen del producto.

https://webview.fintoc.com/widget.html
  ?public_key=pk_live_00000
  &holder_type=individual
  &product=movements
  &country=cl
  &webhook_url=https://your-server.com/webhook
  &widget_token=pi_XXXXXX_sec_YYYYYYYY
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)

  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("webhook_url", "https://your-server.com/webhooks")
    .appendQueryParameter("wiget_token", "pi_XXXXXXXX_sec_YYYYYYYYY")
    return builder.build()
}

Parametro

Tipo

Descripción

public_key

string

El publicKey se utiliza para identificar tu aplicación o página web con Fintoc. Los links creados se asignarán a la organización o usuario al que le pertenece el publicKey.
Este token determinará si estás en el ambiente de prueba o en el ambiente de producción. El publicKey en el ambiente de prueba empieza con pk_test y el de producción con pk_live

holder_type

string

El parametro holderType puede ser business o individual y determina el tipo de cuenta que se quiere conectar.

product

string

El parametro product puede ser movements o subscription y determina el producto y el tipo de link que se va a generar.

country

string

Debe ser el código ISO 3166-1 alfa-2 del país al que se quiere conectar. Puede ser cl o mx. Por defecto se usará cl.

webhook_url

string

El parametro webhookUrl es la url a la que se hará el request donde se enviará el link_token generado.

widget_token

string

Token para inicializar y configurar el cliente.

Actualmente se utiliza solo en el producto payments

Redirecciones del Webview

Al tener el webview integrado se puede interactuar con sus eventos utilizando redireccionamientos.

Método

Redirect URL

Descripción

onSuccess

fintocwidget://success

Este evento ocurre siempre que se termina el flujo de forma exitosa

onExit

fintocwidget://exit

Este evento ocurre cuando el usuario cierra el widget sin haber terminado el flujo

onEvent

fintocwidget://event

Este evento ocurre cada vez que el usuario cambia de vista en el widget

Para utilizar estos en Android y iOS se hace de la siguiente forma:

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("success")) {
        // onSuccess
      }
      if (action.equals("exit")) {
        // onExit
      }
      if (action.equals("event")) {
        // onEvent
      }
    }
  }
}
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 "success":
          // onSuccess
          break
        case "exit":
          // onExit
          break
        case "event":
          // onEvent
          break
        default:
          print("Widget action detected: \(actionType)")
          break
        }
        decisionHandler(.cancel)
        return
      }
      if handleRedirectURL(url) {
        decisionHandler(.cancel)
        return
     }
}