Invoking verification
Once you have set the deep link parameters, you are ready to invoke the Truecaller verification on your mobile web page. You need to invoke the deep link using Javascript on your webpage. This will show the Truecaller verification dialog to the user if the Truecaller app is present on the user's mobile device.
Please note that in case Truecaller app is not present on the user's device, the deep link won't trigger anything. To effectively handle this case, you should use the deep as suggested in the example below :
window.location = "truecallersdk://truesdk/web_verify?
type=btmsheet
requestNonce=UNIQUE_REQUEST_ID
&partnerKey=YOUR_APP_KEY
&partnerName=YOUR_APP_NAME
&lang=LANGUAGE_LOCALE
&privacyUrl=LINK_TO_YOUR_PRIVACY_PAGE
&termsUrl=LINK_TO_YOUR_TERMS_PAGE
&loginPrefix=TITLE_STRING_PREFIX
&loginSuffix=TITLE_STRING_SUFFIX
&ctaPrefix=BUTTON_TEXT_PREFIX
&ctaColor=BUTTON_FILL_COLOR
&ctaTextColor=BUTTON_TEXT_COLOR
&btnShape=BUTTON_SHAPE
&skipOption=FOOTER_CTA_STRING
&ttl=TIME_IN_MILLISECONDS";
setTimeout(function() {
if( document.hasFocus() ){
// Truecaller app not present on the device and you redirect the user
// to your alternate verification page
}else{
// Truecaller app present on the device and the profile overlay opens
// The user clicks on verify & you'll receive the user's access token to fetch the profile on your
// callback URL - post which, you can refresh the session at your frontend and complete the user verification
}
}, 600);
.png?alt=media&token=d3ee5af0-118f-49e8-8781-abd99c4b2bc2)
This would trigger the deep link, and open the user's Truecaller profile dialog if the app is present on the device. And in case the app is not present, nothing opens. So now, using javascript, you can check for the document focus:
a. If the truecaller dialog opened, the document would have lost focus and you'll be taken to the else condition in the above check.
b. While in case the Truecaller app is not present on the device, the focus would always remain with the document and hence, you'll have the control in the 'if' condition.
Accordingly, you can map the next action on your page based on the two conditions.
When you trigger the Truecaller verification flow, you would receive a prompt confirmation that the flow has been initiated successfully. When the Truecaller deeplink is invoked, and the user has the Truecaller application installed and logged in, a callback is sent to your configured URL. This callback includes the configured request nonce and status as "flow_invoked."
Here is the sample of how the handshake callback looks like :
{
"requestId": "<<Request_Nonce Value>>",
"status": "flow_invoked"
}
Upon receiving the "flow_invoked" request notification, it is imperative for you to promptly reciprocate with an acknowledgment. This acknowledgment should be accompanied by a response code falling within the 2XX range, signifying successful communication.
This approach minimises reliance on "document.hasFocus". By leveraging the Handshake feature and receiving real-time callbacks, partners gain greater confidence and control in the user verification process, leading to a smoother user experience overall.
Please note that the Truecaller verification flow for mobile websites is currently supported for browsers on Android OS only. You can gracefully handle invoking Truecaller SDK only on Android and not iOS, by using either of the below to detect the iOS platform:
1) Looking for User Agent
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;2) Another way is relying on navigator.platform:
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS will be either true or false
Last modified 1mo ago