Smiles Virtual Keyboard Test

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

Instructions:

  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.
    Samples:
    
    ...
    <!-- For sync loading -->
    <script src="https://<hostname>/SmilesKeyboard/scripts/smiles-password-form.js" ></script>
    <script>
    SmilesPassword({
        containerId: 'anIdentifier',
        user: smilesMemberNumber,
        clientId: 'client id',
        clientSecret: 'client secret'}, function(data){
        alert('response: ' + data);
    });
    </script>
    ...
                        

    Or, for async loading:
    
    
    <script type="text/javascript">
    window.smiles_async = function() { 
        SmilesPassword({
            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);
        });
    };
    
    </script>
                    
  3. If success the callback function receives the JSON with the user access token; otherwise, receives the XMLHttpRequest object. Success response:
    
    {
     "scope":"/smiles-bus/Integration/RedeemMilesSOAPV1_Partner",
     "memberNumber":"327021435",
     "expires_in":3600,
     "token_type":"Bearer",
     "access_token":"jqh9nDhACbR3KZOp19s8vf5pd8xHW0ybol88gJ4mlrfbGMB86f5IHj"
    }
                        
  4. To customize the input labels, include 'i18n' parameter:
    
    <div id="pass"></div>
    ...
    <script>
    SmilesPassword({
        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"
        }},
        function(data){
            alert('response: ' + data);
        }
    );
    </script>
                        

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

environment hostname
UAT portal-uat.smiles.com.br
Prod estaticos.smiles.com.br