Skip to content

Client-side rendering

v4Guard's Checkpoint current renderization is done via implicit invocation, meaning that the widget will be rendered automatically when the script is loaded.

Render the widget

You have to add a element to your site with the v4guard-checkpoint class, which will be automatically scanned and replaced by the widget. The widget dimensions will be 310x90 pixels.

html
<form action="/sensitive" method="POST">
   <input type="email" placeholder="email address"/>
   <input type="password" placeholder="password"/>
   <div class="v4guard-checkpoint" data-sitekey="SITE_KEY"></div>
   <button type="submit" value="submit">Log in</button>
</form>

NOTE

By default, the widget will generate an invisible input with the name v4g-checkpoint-response which will be automatically filled with the response, and will be sent to the server on form submission with the rest of the form data.

html
<input type="hidden" name="v4g-checkpoint-response" value="chk_result_9b57e8d6fdbd4f79048b576b016e70af572a3bbeaa21dd8d4918e7edfd0e989c87cbe5079bf12b91bc6889995cc54715">

Check out the demo to see how the widget works and how it's integrated in the client-side.

Configuration

The Checkpoint's widget can be configured by adding the following parameters attributes on the element with the v4guard-checkpoint class.

ParameterData AttributeDescription
Site Keydata-sitekeyThe widget must have a valid site key, which is associated to your v4Guard Account.
Actiondata-actionA user's defined field, which will be sent and returned on the validation response. Useful for dispalying specific analytics of the widget's usage. (For example: signup, login...).

This field can only contain up to 32 alphanumeric characters, including _ and -.
Themedata-themeThe widget appearance, which can be either light, dark or auto.

Defaults to auto, which uses the user's system preferences.
Languagedata-languageThe widget language, which can be either auto (by default, to respect browser language), or any of the supported languages.

When auto, only available languages will be used, using en as fallback.
Callbackdata-callbackA JavaScript callback function that will be called when the challenge returns a response. The callback will receive the response token as a parameter.
Expired Callbackdata-expired-callbackA JavaScript callback function that will be called when the challenge expires and the user needs to refresh the website to get a new challenge.

Supported Languages

The Checkpoint widget supports the following languages:

LanguageCode
Automatic (Detect)auto
Spanishes, es_ES
Englishen, en_US
Korean (한국어)ko, ko_KR
Русскийru, ru_RU
Polskipl, pl_PL
Françaisfr, fr_FR
Japanese (日本語)ja, ja_JP
Chinese (简体中文)zh, zh_CN