WebView Integration
Reference to integrate the Widget as a WebView on your mobile application
Integration
To integrate the Widget using a WebView on iOS and Android, you must use the following HTML:
https://webview.fintoc.com/widget.html
The widget configuration needs to be passed through a querystring instead of using client side JavaScript.
Using React Native?
Check our
@fintoc/fintoc-react-nativenpm library to integrate the WebView to your application quickly!
How it works
When including the Fintoc WebView in your mobile application, you need to pass the following query params to configure it, depending on the product that you want to use:
https://webview.fintoc.com/widget.html
?public_key=pk_live_00000
&holder_type=individual
&product=movements
&country=cl
&widget_token=pi_XXXXXX_sec_YYYYYYYY
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.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("wiget_token", "pi_XXXXXXXX_sec_YYYYYYYYY")
return builder.build()
}
import UIKit
import WebKit
final class FintocViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate {
private let webView = WKWebView()
override func viewDidLoad() {
super.viewDidLoad()
webView.navigationDelegate = self
webView.allowsBackForwardNavigationGestures = false
webView.frame = view.frame
webView.scrollView.bounces = false
webView.isMultipleTouchEnabled = false
webView.scrollView.minimumZoomScale = 1.0
webView.scrollView.maximumZoomScale = 1.0
webView.scrollView.delegate = self
self.view.addSubview(webView)
let url = generateLinkInitializationURL()
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 generateLinkInitializationURL() -> URL {
let params = [
"holder_type": "individual",
"product": "payments",
"public_key": "pk_live_00000000000",
"widget_token": "pi_XXXXXXXX_sec_YYYYYYYYY",
]
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!
}
}
Parameter | Type | Description |
|---|---|---|
|
| The |
|
| The |
|
| The |
|
| The |
|
| Optional. The |
|
| Optional. The |
|
| The |
|
| The Right now, only the |
WebView Redirections
Once the WebView is integrated, you can interact with its events using redirections.
Method | Redirect URL | Description |
|---|---|---|
| fintocwidget://succeeded | This event will be occur after a Link gets created successfully. |
| fintocwidget://exit | This event will occur after a user closes the Widget prematurely. |
To use these methods on Android and iOS, you can use the following 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
}
}
Updated 3 months ago