Integración
Para integrar el Widget mediante un WebView en iOS y Android, debes usar el siguiente HTML:https://webview.fintoc.com/widget.html
¿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.* *Este parámetro no es necesario para el producto de Payment Initiation**. |
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. Este parámetro no es necesario para el producto de Payment Initiation. |
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. |
session_token | string | Solo se usa para el producto de Payment Initiation El parámetro sessionToken corresponde al token creado por el backend al crear una Checkout Session y se usa para desplegar y configurar el Widget. |
widget_token | string | El parámetro widget_token corresponde al token creado por el backend que inicializa y configura el widget para el producto de Subscriptions.Actualmente, solo el producto subscriptions usa un parámetro widget_token. |
queryString = "
public_key=pk_live_XXX
&holder_type=individual
&product=movements
&country=cl
&link_token=pi_XXX
"
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("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)
}
}
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.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>