Smiles Virtual Keyboard Test

This is a sample page showing how add the Virtual Keyboard to your page.


  1. Import the js file by referring to it as an external JavaScript.
    <script src="https://<hostname>/SmilesKeyboard/scripts/smiles-password-form.js" ></script>
    In the page that will host the virtual keypad, add an empty DIV [at the place the Virtual Keyboard will be placed] with an proper ID.
    <div id="anIdentifier"></div>
  2. Initialize the JS component by providing
    1. the DIV's id,
    2. the Smiles Member Number,
    3. the Client Id,
    4. the Client Secret and
    5. the callback function.
    <!-- For sync loading -->
    <script src="https://<hostname>/SmilesKeyboard/scripts/smiles-password-form.js" ></script>
        containerId: 'anIdentifier',
        user: smilesMemberNumber,
        clientId: 'client id',
        clientSecret: 'client secret'}, function(data){
        alert('response: ' + data);

    Or, for async loading:
    <script type="text/javascript">
    window.smiles_async = function() { 
            containerId: 'anIdentifier'
            , user: userSmiles
            , clientId: 'client id'
            , clientSecret: 'client secret'}, function(data){
            alert('response: ' + data);
        (function() {
            var scripts = document.getElementsByTagName('script')[0];
            var s = document.createElement('script');
            s.async = true;
            s.src = "https://<hostname>/SmilesKeyboard/scripts/smiles-password-form.js";
            scripts.parentNode.insertBefore(s, scripts);
  3. If success the callback function receives the JSON with the user access token; otherwise, receives the XMLHttpRequest object. Success response:
  4. To customize the input labels, include 'i18n' parameter:
    <div id="pass"></div>
        containerId:  'pass',
        user:         'userSmiles',
        clientId:     'client id',
        clientSecret: 'client secret',
        // these are the customizations allowed for i18n'ing the prompt:
        i18n: {
            title : "Senha Smiles",
            passPlaceHolder: "Senha",
            keyboardTitle: "Teclado Virtual",
            okButton: "Confirmar pagamento",
            cleanButton: "Limpar"
            alert('response: ' + data);

The <hostname> in the above lines should be replaced with the corresponding environment name:

environment hostname