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>
                       

5. To control if the ok button is enabled or disabled, use the function setOkButtonEnabled returned by the SmilesPassword component. Pass the parameter okButtonEnabled as false, to start the component with the Ok Button disabled.

   
                   <div id="pass"></div>
                   ...
                   <script>
                   const smslPasswd = SmilesPassword({
                       containerId:  'pass',
                       user:         'userSmiles',
                       clientId:     'client id',
                       clientSecret: 'client secret',
                       okButtonEnabled: false,
                       // 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);
                       }
                   );
   
                   // your logic to enable ok button
                   smslPasswd.setOkButtonEnabled(true);
                   </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