Overview
The Browser SDK provides an easy way to integrate Fillr Autofill in to your own WebView based application, allowing users to populate web forms in your browser.
Prerequisites
Contact us for the Developer Key, Secret Key and SDK information required for the integration.
Install SDK
You can either install iOS SDK using Cococapods here or by downloading and add to your project manually here
Enable Fillr on Your Browser Tabs
The Fillr SDK requires your dev key and secret key to initialise, also your Fillr widget username and password. It is recommanded that you initialise Fillr in your app delegate’s didFinishLaunchingWithOptions
method.
Import Fillr header files into your swift bridging header
#import "FillrSDK/Fillr.h"
#import "FillrSDK/HeadlessBaseFillProvider.h"
#import "FillrSDK/FillrWidgetAuth.h"
#import "FillrSDK/FillrConfig.h"
Initialise the Fillr SDK once per app session
let fillr = Fillr.sharedInstance()
let remoteDepAuth = FillrWidgetAuth(username: "Username", password: "Password")
let fillrConfig = FillrConfig(devKey: "Your Dev Key", secretKey: "Your Secret Key", remoteDependencyAuth: remoteDepAuth)
fillr?.initialise(with: fillrConfig)
fillr?.fillProvider = HeadlessBaseFillProvider.sharedInstance()
fillr?.enabled = true
Enable the Fillr toolbar on each of your web views.
Fillr requires a reference to current active web view, you need to call trackWebView
and pass the web view reference, ideally as soon as the web view is created. If your app supports more than one web view in cases such as multiple tabs, you need to make sure calling trackWebView
each time currently active web view is changed.
Fillr.sharedInstance().trackWebview(webView)
Once Fillr has references to the web view, the SDK will take care of detecting webforms in the rendered HTML and prompt the user to autofill when appropriate.
Allow Fillr to track javascript events
To make Fillr be able to track javascript events, you need to call handleWebViewRequest
in your WKWebView navigation delegate as follows:
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
if Fillr.sharedInstance().canHandleWebViewRequest(navigationAction.request) {
Fillr.sharedInstance().handleWebViewRequest(navigationAction.request, forWebView: webView)
decisionHandler(.cancel)
return
}
// Integrator code goes here afterwards
...
decisionHandler(.allow)
}
It is very important to call ‘decisionHandler(WKNavigationActionPolicyCancel);’ and ‘return;’ for Fillr specific navigation requests, make sure you code do exactly as above.
Also, you need to notify Fillr about WKWebView navigation events:
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
Fillr.sharedInstance()?.handleWebViewDidStartLoad(webView)
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
Fillr.sharedInstance()?.handleWebViewDidFinishLoad(webView)
}
Fill Form
When there is a fillable form detected on the web page, Fillr SDK will notify its FillrProfilePayloadDelegate. Your class should conform to this delegate by implementing onProfilePayloadRequestedForWebView method. The requestedFields array passed to this method contains a list of the fields found in current form in the format of Fillr schema namespace. The field namespaces and profile data should be used as key value pairs of the payload dictionary. You pass mappingResult and this payload dictionary to Fillr class’s fillFormWithMappings method to fill the form.
func onProfilePayloadRequested(forWebView webView: UIView!, mappingResult: [AnyHashable : Any]!, requestedFields: [Any]!, selectedFields: [AnyHashable : Any]!) {
let samplePayload = [
"PersonalDetails.Honorific": "Mr.",
"PersonalDetails.FirstName": "John",
"PersonalDetails.MiddleName": "Middle",
"PersonalDetails.LastName": "South",
"PersonalDetails.BirthDate.Year": "1999",
"PersonalDetails.BirthDate.Month": "1",
"PersonalDetails.BirthDate.Day": "11",
"PersonalDetails.Gender" : "Male",
"PersonalDetails.SocialSecurityNumber": "865414088",
"PersonalDetails.TaxFileNumber": "865414088",
"PersonalDetails.Role": "Director",
"PersonalDetails.CompanyName": "Starks",
"ContactDetails.Emails.Email.Address": "john.south@fillr.com",
"ContactDetails.CellPhones.CellPhone.CountryCode": "61",
"ContactDetails.CellPhones.CellPhone.Number": "0455667788",
"ContactDetails.LandlinePhones.LandlinePhone.CountryCode": "1",
"ContactDetails.LandlinePhones.LandlinePhone.AreaCode": "208",
"ContactDetails.LandlinePhones.LandlinePhone.Number": "4561343",
"AddressDetails.PostalAddress.AddressLine1": "27 Oakmont Drive",
"AddressDetails.PostalAddress.StreetNumber": "27",
"AddressDetails.PostalAddress.StreetName": "Oakmont",
"AddressDetails.PostalAddress.StreetType": "Drive",
"AddressDetails.PostalAddress.Suburb": "Brentwood",
"AddressDetails.PostalAddress.AdministrativeArea": "California",
"AddressDetails.PostalAddress.PostalCode": "94513",
"AddressDetails.PostalAddress.Country": "United States",
"AddressDetails.BillingAddress.AddressLine1": "27 Oakmont Drive",
"AddressDetails.BillingAddress.StreetNumber": "27",
"AddressDetails.BillingAddress.StreetName": "Oakmont",
"AddressDetails.BillingAddress.StreetType": "Drive",
"AddressDetails.BillingAddress.Suburb": "Brentwood",
"AddressDetails.BillingAddress.AdministrativeArea": "California",
"AddressDetails.BillingAddress.PostalCode": "94513",
"AddressDetails.BillingAddress.Country": "United States",
"CreditCards.CreditCard.Number":"6868686868686868",
"CreditCards.CreditCard.Type": "Mastercard",
"CreditCards.CreditCard.Expiry": "06-2018",
"CreditCards.CreditCard.Expiry.Month": "06",
"CreditCards.CreditCard.Expiry.Year": "2020",
"CreditCards.CreditCard.NameOnCard": "John South",
"CreditCards.CreditCard.CCV": "678"
]
Fillr.sharedInstance()?.fillForm(withMappings: mappingResult, andPayload: samplePayload, withFieldSelections: selectedFields)
}
Trigger fill manually
Alternatively, you can trigger a fill anytime by calling triggerFill method, rather than relying on webview navigation events. This method is commonly used for BNPL scenario to fill generated credit card info.
Swift sample code:
Fillr.sharedInstance()?.triggerFill(webView)
Get latest fields from web view
You can also get all the latest fields from current web view form by using method getFormFields
and supplying a callback block. The block returns a dictionary with field namespace and a flag indicating the field is empty or not.
Swift sample code:
Fillr.sharedInstance()?.getFormFields({ ([AnyHashable : Any]?) in
})
Web Form Field Focused Delegate
You can implement a delegate FormEventDelegate
to get notified when a field within a web form has received focused. The field param in the method specifies the field namespace of the focused field.
Swift sample code:
fillr.fillPerformedDelegate = self
func onFieldFocused(_ field:String) {
}
Cart Scraper
Fillr provides cart scraper to extract shopping cart information when the web page finishes loading and shopping cart is detected. To use cart scraper feature, you need to enable it first:
Fillr.sharedInstance()?.setCartInformationExtractionEnabled(true)
Then set FillrCartInformationExtractionDelegate
variable on Fillr shared instance as follow:
Fillr.sharedInstance()?.setCartInformationExtractionDelegate(self)
Next, implement FillrCartInformationExtractionDelegate
method, and access cart scraper information through cartInformation parameter:
func onCartDetected(_ webView: UIView!, cartInformation: FillrCartInformation!) {
}
The total
, itemPrice
and lineTotal
value type of cart information
represents as NSInteger
to avoid any floating rounding or precision issue.
The itemPrice
, lineTotal
and total
work everything as cents. For
example, 36.89 USD
will be converted to integer value like 3689 USD
, which
will preserve .89
. The currency value follows the ISO 4217 code list like
EUR
, SEK
etc.
@interface FillrCartProduct : NSObject
@property (readonly) NSString *name;
@property (readonly) NSString *imageUrl;
@property (readonly) NSInteger itemPrice;
@property (readonly) NSInteger lineTotal;
@property (readonly) NSInteger quantity;
@property (readonly) NSString *url;
@end
@interface FillrCartInformation : NSObject
@property (readonly) NSInteger total;
@property (readonly) NSString *currency;
@property (readonly) NSArray<FillrCartProduct *> *products;
@property (readonly, copy) NSString *pageUrl;
@property (readonly, copy) NSString *version;
@property (copy) NSString *json;
@end
Untrack WebView
In order to clean all resources properly an integrator can use the untrack WebView method. Trying to untrack a WebView that is not currently tracked will do nothing.
Fillr.sharedInstance()?.untrackWebview(webView)
FillrSDK, Autofill widget and Cart Scraper widget Versions
The Fillr SDK’s use two javascript widgets. 1. Field detection - autofill widget 2. Cart detection - cart scraper widget.
In order to obtain the Fillr SDK version, please use the following snippet.
Fillr.sharedInstance().getSDKVersion()
In order to obtain the autofill widget version, please use the following snippet. The Autofill widget version only becomes avaiable after Fillr is initialized.
Fillr.sharedInstance().getAutofillWidgetVersion()
In order to obtain the cart scraper widget version, please use the snipped shown below. The cart scraper widget version only becomes avaiable after Fillr SDK is initalized, alternatively as part of the onCartDetected
callback, FillrCartInformation
object would also have the respective widget version.
Fillr.sharedInstance().getCartScraperWidgetVersion()
Optional Configuration
Enable/Disable Autofill for Users
Your users may want to enable/disable the Fillr Autofill when loading a new form. This can be achieved as follow:
Fillr.sharedInstance()?.enabled = true
Disable Capture Values
Capture value is a feature that fillr sdk can save user input data from webview back into Fillr profile. Capture value is enabled by default in the SDK, it can be turned off as follow:
Swift sample code:
Fillr.sharedInstance().captureValueDisabled = true
You can also only turn off capture credit card values:
Swift sample code:
Fillr.sharedInstance().captureCreditCardDisabled = true
Get notified of capture value events
To get notified of capture value events and access the values captured, implement delegate FillrCaptureValueDelegate
and its method onValuesCapturedForWebView
as follow:
Swift sample code:
func onValuesCaptured(forWebView webView: UIView!, valueMappings: [AnyHashable : Any]!) {
}
Debug Mode
You can enable debug mode to check the Fillr Autofill life cycle events as follow:
Fillr.sharedInstance()?.debugMode = true
Then you can run your app and search for Fillr Autofill
in XCode output console. The general expection of sequence of events are as follow for the first page:
Fillr Autofill - Track WebView: the autofill process started
Fillr Autofill - Track WebView: pre-injection
Fillr Autofill - Inject Widget: widget is injected into web view
Fillr Autofill - handleWebViewDidFinishLoad: proceed to injection
Fillr Autofill - iFrame Callback: ready for getting fields from page
Fillr Autofill - Scan Page: start getting fields from page
Fillr Autofill - Scan Page: fields received from page
Fillr Autofill - Mapping: request mapping information for fields
Fillr Autofill - Mapping: received mapping information for fields
Fillr Autofill - Fill Form: received payload from client
Fillr Autofill - Fill Form: form filled finally
If you navigate to a second page, it should gives:
Fillr Autofill - handleWebViewDidFinishLoad: proceed to injection
Fillr Autofill - iFrame Callback: ready for getting fields from page
Fillr Autofill - Scan Page: start getting fields from page
Fillr Autofill - Scan Page: fields received from page
Fillr Autofill - Mapping: request mapping information for fields
Fillr Autofill - Mapping: received mapping information for fields
Fillr Autofill - Fill Form: received payload from client
Fillr Autofill - Fill Form: form filled finally
Test Forms
The following are recommended forms for testing Fillr Autofill and validating your integration. They are easy to access and exercise a good range of fields from the Fillr profile:
- https://psr.slv.vic.gov.au
- https://www.gpcu.org/Applications/Loan-Payment-Form
- https://www.bradford.com.au/onlinepayment.html
Support
For technical support contact product@fillr.com
Draft document only. API subject to change.