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