Integración con WebView (ANTIGUA)

Integración

Para integrar el Widget mediante un WebView en iOS y Android, debes usar el siguiente HTML:

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

La configuración del widget se debe pasar a través de un querystring en lugar de usar JavaScript del lado del cliente.

¿Usas React Native?¡Revisa nuestra librería de npm @fintoc/fintoc-react-native para integrar el WebView a tu aplicación rápidamente!

Cómo funciona

Al incluir el WebView de Fintoc en tu aplicación móvil, debes pasar los siguientes query params para configurarlo, según el producto que quieras usar:

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

Parámetro	Tipo	Descripción
`public_key`	`string`	El `public_key` se usa para identificar tu aplicación o página web dentro de Fintoc. Los Links creados con un `public_key` se asignarán a la organización o usuario propietario de dicho `public_key`. Este token determinará si estás usando el entorno de sandbox o de producción. Recuerda que el `public_key` del sandbox comienza con `pk_test_`, mientras que el de producción comienza con `pk_live_`.
`holder_type`	`string`	El parámetro `holder_type` puede ser `business` o `individual`, y determina el tipo de cuenta que se conectará a Fintoc. Para payment initiation siempre debes usar `individual`.
`product`	`string`	El parámetro `product` puede ser `movements`, `subscriptions`, `invoices` o `payments`, y determina el producto y el tipo de Link que se creará.
`country`	`string`	El parámetro `country` debe ser el código `ISO 3166-1 alfa-2` del país al que estás intentando conectarte. Puede ser `cl` o `mx`. Por defecto es `cl`.
`institution_id`	`string`	* Opcional*. El parámetro `institution_id` corresponde al `id` de una institución financiera. Si se incluye, dicha institución se preseleccionará. Por ejemplo, el valor `mx_banco_banamex` haría que el widget se abra con Banamex por defecto.
`username`	`string` u `object`	* Opcional*. El `username` rellena previamente el campo de nombre de usuario al realizar un pago. Los atributos del objeto username se muestran abajo. Si se envía un string, tomará el valor por defecto para el atributo editable.
`webhook_url`	`string`	* Solo se usa para los productos `movements` e `invoices`; si estás integrando `payments` o `subscriptions` no lo necesitas. El parámetro `webhook_url` corresponde a la URL que recibirá una solicitud con el nuevo Link* después de su creación exitosa, incluyendo su link_token.
`widget_token`	`string`	El parámetro `widget_token` corresponde al token creado por el backend que inicializa y configura el widget. Actualmente, solo los productos `payments` y `subscriptions` usan un parámetro `widget_token`.

Objeto Username

Para rellenar previamente un nombre de usuario y cambiar los valores por defecto, puedes enviar un objeto con los siguientes atributos:

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

También puedes incluir parámetros anidados en tu query utilizando el siguiente formato de query string:

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

Librerías como qs pueden ayudarte a formatear automáticamente un objeto anidado.

Atributo	Tipo	Descripción
value	string	El nombre de usuario que se rellenará previamente en el widget. En Chile debes ingresar el RUT del usuario y en México debes ingresar su número de teléfono.
editable	bool	Si el campo es editable o no en el widget. Por defecto está configurado como `true`.

Ejemplo de uso

Aquí tienes algunos snippets para que empieces lo más rápido humanamente posible:

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

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

Fíjate que el ejemplo en Swift tiene un método webView. Este método define lo que sucede cuando un usuario hace clic en un enlace dentro del WebView. En el ejemplo, el enlace se abre en Safari, pero puedes personalizar este comportamiento a tu gusto (los enlaces podrían abrirse dentro de la misma aplicación, por ejemplo). Esto es importante porque, al usar el producto de Payment Initiation, después de finalizar el flujo de pago el usuario puede hacer clic en un enlace para descargar el comprobante de la transacción. Debes permitir que los enlaces se abran.

Redirecciones del WebView

Una vez integrado el WebView, puedes interactuar con sus eventos usando redirecciones.

Método	URL de redirección	Descripción
`onSuccess`	fintocwidget://succeeded	Este evento ocurrirá después de que el flujo finalice exitosamente.
`onExit`	fintocwidget://exit	Este evento ocurrirá después de que un usuario cierre el Widget prematuramente.
`onEvent`	fintocwidget://event/{event_name}?queryparam={value}	Este evento ocurrirá en cada evento disponible del widget. Puedes encontrar más información sobre estos eventos aquí.

onEvent (WebView)El evento onEvent para WebView está deshabilitado por defecto y se puede habilitar pasando el queryparam _on_event={any_value} como parámetro de https://webview.fintoc.com/widget.html (por ejemplo: https://webview.fintoc.com/widget.html?[...]&_on_event=true). Una vez habilitado, será posible recibir eventos onEvent. A partir del 1 de mayo de 2023, esta funcionalidad estará habilitada por defecto, por lo que es necesario manejar la redirección onEvent antes de esa fecha para evitar romper la integración con el Widget.

Para usar estos métodos en Android e iOS, puedes usar los siguientes 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
          } else {
            decisionHandler(.allow)
          }
    }

iOS - agregar el URL Scheme fintocwidgetAntes de integrar el widget de Fintoc con tu aplicación iOS, es importante agregar fintocwidget como un URL scheme permitido dentro del archivo Info.plist de la aplicación. Esto es necesario por razones de seguridad.

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

Inicio

Recursos

Pagos

Transferencias

Movimientos

Integración con WebView (ANTIGUA)

Integración

Cómo funciona

Objeto Username

Ejemplo de uso

Redirecciones del WebView

​Integración

​Cómo funciona

​Objeto Username

​Ejemplo de uso

​Redirecciones del WebView

Integración

Cómo funciona

Objeto Username

Ejemplo de uso

Redirecciones del WebView