Hi,


I acquired basic knowledge by looking into your vidoes. I have a doubt in my payment gateway service and
it was written in node.js.

In my service flow, we have four pages. In the first page if i select the country name in the dropdown list, the default
language and optional languages will be selected in the right side dropdown and the logo of the country selection will remains same in the first page. But in the second page onwards the logo will be changed based on the country
selection in the first page and it remains reflected same throughout the remaining pages. Also the selection of the
language should also remains same as in first page selection.

First page - i have made some changes in the below which is highlighted in bold letters.

<!DOCTYPE html>
<html lang="eng">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Millicom</title>
    <!-- Bootstrap -->
    <link href="/v1/tigo/payment-auth/ui/stylesheets/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/v1/tigo/payment-auth/ui/stylesheets/main.css" rel="stylesheet">
    
</head>

<body>
    <div id="overlay_shield"></div>
    <div class="outer-container">
        <div class="container">                                              
            <div class="form-group  clearfix">
                <div class="imageleft"></div>
                <div class="imageright"></div>
                <div class="language-dropdown-container">
                    <label for="Localization">Language</label>

                    <select class="form-control" id="sltLanguage">
                        <option value="eng">English</option>
                         <option value="swa">Swahili</option>
                         <option value="spa">Spanish</option>
                         <option value="fra">French</option>
                    </select>
                </div>
            </div>
                <h2><%=  req.__('text.heading.tigo_secure') %></h2>             
                 <ul id="breadcrumbs-one" class="clearfix">
                    <li class="current"> <a><%=  req.__('text.purchase.customer_details') %></a></li>
                    <li ><a ><%=  req.__('text.purchase.verification_code') %></a></li>
                    <li><a ><%=  req.__('text.purchase.confirm') %></a></li>
                </ul>
               
            <div style="padding-top: 0px;"><b>Payment Details</b></div>
            <br>
            <table class="table">
                <tbody>
                    <tr>
                        <td><%=  req.__('text.purchase.merchant') %></td>
                        <td><%= merchant %></td>
                    </tr>
                    <tr>
                        <td><%=  req.__('text.purchase.amount_from_merchant') %></td>
                        <td><%= currency %> <%= amount %></td>
                    </tr>

                </tbody>
            </table>
            <div class="missdn-container">
        <div style=" margin: 0 0 10px; font-size: 15px; font-weight: bold;"> Customer Details</div>       
         <form action="/v1/tigo/payment-auth/authentication" method="POST" autocomplete="off">
                <div class="form-group">
                  
                   <% if(error && error == "INVALID_COUNTRY_CODE"){ %>
                    <div class="error-message-wrapper">
                        <div class="error-message">
                            <%=  req.__('text.purchase.select_country_error') %>
                        </div>
                    </div>
               <% } %>
                  
                    <label for="txtVerification"><%=  req.__('text.purchase.select_country') %></label>
                    <select name="country_code" id="country_id" tabindex="1" class="form-control country_select">                    
                         <option value="">-- Select country --</option>
                        <option value="tza">Tanzania</option>
                        <option value="sen">Senegal</option>
                        <option value="pry">Paraguay</option>
                        <option value="slv">El Salvador</option>                        
                    </select>
                </div>
                <div class="form-group">
                    <label id = "tigono" for="txtVerification"><%=  req.__('text.purchase.enter_tigo_cash_account_number') %> </label>
        
               <% if(error && error == "INVALID_MSISDN_FORMAT"){ alert("Error is:"+error); %>
               
                    <div class="error-message-wrapper">
                        <div class="error-message">
                           <%=  req.__('text.purchase.enter_number_format') %>  0712123123 <%=  req.__('text.purchase.or') %> +255716123123 <%=  req.__('text.purchase.or') %> 00255712123123
                        </div>
                    </div>
               <% } %>
               <% if(error && error != "INVALID_MSISDN_FORMAT" && error != "INVALID_COUNTRY_CODE"){ %>
               
                    <div class="error-message-wrapper">
                        <div class="error-message">
                            <%=  req.__('text.purchase.incorrect_tigo_msisdn') %>
                        </div>
                    </div>
               <% } %>
               
                    
                    <input type="text"  name="msisdn" class="form-control phone_number_txt  msisdn-input" id="phone_number">
                     <input type="hidden"  name="transaction_ref_id" value= "<%= transaction_ref_id %>">
                     <input type="hidden"  name="state" value= "msisdn-entry">
                </div>
                <div class="customer_details_help">
                    <em id="handy-message"> <%=  req.__('text.purchase.keep_phone_handy_and_code_via_sms') %>
                    </em>
                </div>
                <div class="form-group buttons country-code clearfix">
                    <button type="submit" id = "next_btn" class="btn btn-default current"><%=  req.__('text.label.next') %></button>
                          <button type="button" class="btn btn-default" onclick="window.location='/v1/tigo/payment-auth/callback/<%= transaction_ref_id%>?error=true';"><%=  req.__('text.label.cancel') %></button>
                </div>
                </form>
            </div>
              <div class="footer">
            <%=  req.__('text.footer.if_problem') %> <%=  req.__('text.footer.contact_customer_care') %>  <phone-number>
               </div>
        </div>
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#country_id").change(function(event){
   $("#sltLanguage").html("");
   var countryValue=$(this).val();
   var languageOptions="";
   switch(countryValue)
   {
    case 'tza':
    languageOptions ='<option selected="selected" value="swa">Swahili</option><option value="eng">English</option>';
   break;
 
    case 'sen':
    languageOptions ='<option selected="selected" value="fra">French</option><option value="eng">English</option><option value="wlf">Wolof</option>';
    break;

    case 'pry':
    languageOptions ='<option selected="selected" value="spa">Spanish</option><option value="eng">English</option>';
    break;

    case 'slv':
    languageOptions ='<option selected="selected" value="spa">Spanish</option><option value="eng">English</option>';
    break;
    
    default:
    languageOptions='<option value="eng">English</option><option value="swa">Swahili</option><option value="spa">Spanish</option><option value="fra">French</option>';
    break;

   }
   $("#stLanguage").html(languageOptions);
 
});


  $('#sltLanguage').change(function () {

$.ajax({
  type: "GET",
  url: '/v1/tigo/payment-auth/localization?state=enter_msisdn&lang='+$('#sltLanguage').val()+'&trans_ref_id=<%= transaction_ref_id %>',
  complete: handleXhrError
});

  });
function handleXhrError(xhr) {
    document.open();
    document.write(xhr.responseText);
    document.close();
}



<% if (error && error == "INVALID_COUNTRY_CODE"){ %>
    $(".country_select").addClass("error");
<% } %>

<% if (error && error != "INVALID_COUNTRY_CODE"){ %>
    $(".msisdn-input").addClass("error");
<% } %>

</script>

                
                
                <script>
                $( document ).ready(function() {
                      $('#sltLanguage').val('<%=  req.getLocale() %>');
                     $('#tigono, #phone_number, #handy-message').hide();
                     var val;
                    $('#country_id').on('change', function(){
                        val = $('#country_id').val();
                        if (val == 'pry' || val == 'slv'){
                            $('#tigono, #phone_number, #handy-message').hide();
                        }else{
                            $('#tigono, #phone_number, #handy-message').show();
                        }
                    })
                    
                });
                    
               </script>
               
    
</body>

</html>


Second Page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <!-- Bootstrap -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/main.css" rel="stylesheet">
        <script src="/v1/tigo/payment-auth/ui/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="overlay_shield"></div>
        <div class="outer-container">
            <div class="container">
                <div class="form-group  clearfix">
                 <div class="imageleft"></div>
                 <div class="imageright"></div>
                    <div class="language-dropdown-container">
                        <label for="exampleInputEmail1">Language</label>

                    <select class="form-control" id="sltLanguage">
                         <option value="eng">English</option>
                         <option value="swa">Swahili</option>
                         <option value="spa">Spanish</option>
                         <option value="fra">French</option>
                    </select>

                    </div>
                </div>       
                <h2><%=  req.__('text.heading.tigo_secure') %></h2>



                 <ul id="breadcrumbs-one" class="clearfix">
                    <li > <a><%=  req.__('text.purchase.customer_details') %></a></li>
                    <li class="current"><a ><%=  req.__('text.purchase.verification_code') %></a></li>
                    <li><a><%=  req.__('text.purchase.confirm') %></a></li>
                </ul>
               <p class = "no-refresh">(<%=  req.__('text.no_refresh_warning') %>)</p>
                <p>
                   <%=  req.__('text.purchase.sms_sent_to') %> <%= msisdn%> <%=  req.__('text.purchase.with_verification_code') %>. <%=  req.__('text.verification.ckeck_phone_and_enter_code') %>
                </p>
                <div class="time-box">
                    <span class="glyphicon glyphicon-time"></span>
                    <p><%=  req.__('text.purchase.code_expires_in') %> <span id="theTime" class="timeClass" style="font-size: 20px;"></span></p>
                </div>
                
                <form action="/v1/tigo/payment-auth/verification/<%= transaction_ref_id%>" method="POST">
                <div class="verification-container">
                    <div class="form-group">
                        <label for="txtVerification"><%=  req.__('text.purchase.enter_verification_code') %></label>
                         <% if(error) {%>    
                       <p class="error-message"> <%=  req.__('text.purchase.invalid_pin') %>. <%=  req.__('text.purchase.enter_correct_pin') %>.</p>
                        <%}%>   
                        <input type="password" name="pin" class="form-control pin-input" id="txtVerification" AutoCompleteType="none">
                        <input type="hidden" name="transaction_ref_id" class="form-control" value="<%= transaction_ref_id%>"">
                    </div>
                    <div class="form-group buttons clearfix">
                        <button type="submit" class="btn btn-default next"><%=  req.__('text.label.next') %></button>
                          <button type="button" class="btn btn-default" onclick="window.location='/v1/tigo/payment-auth/callback/<%= transaction_ref_id%>?error=true';"><%=  req.__('text.label.cancel') %></button>
                    </div>                
                </div>
                </form>
                <p class="footer">
               <%=  req.__('text.footer.if_problem') %>   <%=  req.__('text.footer.contact_customer_care') %>  &lt;phone number&gt;              
                </p>

            </div>
        </div>
        
        
        
     <script>
     var executing = <%= countdown_execuion%>;
     try{
     var num = Number("<%= token_life%>");
     }catch(e){
     
     }
           sec = parseInt(((num/1000)%60));
           min = parseInt(((num/(1000*60))%60));           
           console.log(num+" "+sec+" "+min);
           
function countDown() {
executing = true;
if (num == '0' || num == '00' || (min == '00' && sec == '00' ) || (min == '0' && sec == '0' )) {
     sec = "00";
    $(".time-box").html( '<span class=\"glyphicon glyphicon-time\"></span><p><%=  req.__('text.purchase.code_expired') %>.</p><button id="resend" onclick="resendPin()" class="btn btn-default"><%=  req.__('text.purchase.resend') %></button>');    
    $(".time-box").addClass("error");
    executing = false;
      $(".next").prop("disabled",true);
      $(".pin-input").prop("disabled",true);
          
 }else {

  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
   min = min;
  }
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "0" + min : min) + ":" + sec + " min";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
}
}

function addLoadEvent(func) {
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
    if(typeof executing == undefined || !executing){
          countDown();
      }
});
        
        </script>
        
            <script>
                function resendPin() {
                
                    $.ajax({
                    type: 'POST',
                    url: '/v1/tigo/payment-auth/verification/resend/<%= transaction_ref_id%>',
                    error: handleXhrError,
                    success: function (data) {
                    
                    $(".time-box").html( '<span class=\"glyphicon glyphicon-time\"></span><p><%=  req.__('text.purchase.code_expires_in') %> <span id=\"theTime\" class=\"timeClass\" style=\"font-size: 20px;\"></span></p>');    
                    $(".time-box").removeClass("error");
                          $(".next").prop("disabled",false);
                          $(".pin-input").prop("disabled",false);
                    
                         try{
     var num = Number(data.token_life);
     }catch(e){
     
     }
           sec = parseInt(((num/1000)%60));
           min = parseInt(((num/(1000*60))%60));           
                if (num == '0' || num == '00' || (min == '00' && sec == '00' ) || (min == '0' && sec == '0' )) {
     sec = "00";
    $(".time-box").html( '<span class=\"glyphicon glyphicon-time\"></span><p><%=  req.__('text.purchase.code_expired') %>.</p><button id="resend" onclick="resendPin()" class="btn btn-default"><%=  req.__('text.purchase.resend') %></button>');    
    $(".time-box").addClass("error");
     $(".next").prop("disabled",true);
      $(".pin-input").prop("disabled",true);
    
    
 }else {    
                countDown();
                }
                    
                    }
                  });

                };
            </script>
        
        <script type="text/javascript">

  $('#sltLanguage').change(function () {

$.ajax({
  type: "GET",
  url: '/v1/tigo/payment-auth/localization?state=verification&lang='+$('#sltLanguage').val()+'&trans_ref_id=<%= transaction_ref_id %>',
  complete: handleXhrError
});

  });
function handleXhrError(xhr) {
    executing = true;
    document.open();
    document.write(xhr.responseText);
    document.close();
}

<% if (error){ %>
    $(".pin-input").addClass("error");
<% } %>

</script>
                <script>
                $( document ).ready(function() {
                      $('#sltLanguage').val('<%=  req.getLocale() %>');                      
                    });
               </script>

        
    </body>
</html>


Third Page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- Bootstrap -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/main.css" rel="stylesheet">
        <script src="/v1/tigo/payment-auth/ui/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="overlay_shield"></div>
        <div class="outer-container">
            <div class="container">
                <div class="form-group  clearfix">
                  <div class="imageleft"></div>
                  <div class="imageright"></div>
                    <div class="language-dropdown-container">
                        <label for="exampleInputEmail1">Language</label>

                        <select class="form-control" id="sltLanguage">
                             <option value="eng">English</option>
                             <option value="swa">Swahili</option>
                             <option value="spa">Spanish</option>
                             <option value="fra">French</option>
                        </select>
                    </div>
                </div>       
                <h2><%=  req.__('text.heading.tigo_secure') %></h2>


                <div class="success-box">
                    <span class="glyphicon glyphicon-time"></span>
                    <h4><%=  req.__('text.success.transaction_successful') %></h4>
                     <p><%=  req.__('text.success.redirect_to_merchant') %>, <a href="<%= redirect_uri%>?trans_status=success&external_ref_id=<%= external_ref_id%>&transaction_ref_id=<%= transaction_ref_id%>&transaction_id=<%= transaction_id%>"><%=  req.__('text.success.click_here') %></a>.</p>
                </div>
              </div>
            
             <div class="support_message">
               <%=  req.__('text.footer.if_problem') %> <%=  req.__('text.footer.contact_customer_care') %>  <phone-number>
            </div>
              
            </div>
        </div>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   <script>
        window.setTimeout(function() {
    window.location.href = '/v1/tigo/payment-auth/callback/<%= transaction_ref_id%>?trans_status=success&external_ref_id=<%= external_ref_id%>&transaction_ref_id=<%= transaction_ref_id%>&transaction_id=<%= transaction_id%>';
}, 100)
      </script>
                <script type="text/javascript">

  $('#sltLanguage').change(function () {

$.ajax({
  type: "GET",
  url: '/v1/tigo/payment-auth/localization?state=success_purchase&lang='+$('#sltLanguage').val()+'&trans_ref_id=<%= transaction_ref_id %>',
  complete: handleXhrError
});

  });
 
function handleXhrError(xhr) {
    document.open();
    document.write(xhr.responseText);
    document.close();
}
</script>
   <script>
         $( document ).ready(function() {
              $('#sltLanguage').val('<%=  req.getLocale() %>');                      
            });
     </script>
    </body>
</html>


Fourth Page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- Bootstrap -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="/v1/tigo/payment-auth/ui/stylesheets/main.css" rel="stylesheet">
        <script src="/v1/tigo/payment-auth/ui/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="overlay_shield"></div>
        <div class="outer-container">
            <div class="container">
                <div class="form-group  clearfix">
                  <div class="imageleft"></div>
                  <div class="imageright"></div>
                    <div class="language-dropdown-container">
                        <label for="exampleInputEmail1">Language</label>

                        <select class="form-control" id="sltLanguage">
                             <option value="eng">English</option>
                             <option value="swa">Swahili</option>
                             <option value="spa">Spanish</option>
                             <option value="fra">French</option>                            
                        </select>
                    </div>
                </div>       
                <h2><%=  req.__('text.heading.tigo_secure') %></h2>
   


     <ul id="breadcrumbs-one" class="clearfix">
                    <li > <a > <%=  req.__('text.purchase.customer_details') %> </a></li>
                    <li><a ><%=  req.__('text.purchase.verification_code') %></a></li>
                    <li class="current"><a ><%=  req.__('text.purchase.confirm') %></a></li>
                </ul>
               <p class = "no-refresh">(<%=  req.__('text.no_refresh_warning') %>)</p>
                <h4><%=  req.__('text.purchase.payment_details') %></h4>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><%=  req.__('text.purchase.merchant') %></td>
                            <td><%= merchant %></td>
                        </tr>
                        <tr>
                            <td><%=  req.__('text.purchase.amount_from_merchant') %> </td>
                            <td><%= currency_merchant%>  <%= amount_merchant%> </td>    
                        </tr>
                        <tr>
                            <td> <%=  req.__('text.purchase.amount_from_tigo_cash') %> </td>
                            <td><%= currency_tigo%>  <%= amount_tigo%> </td>    
                        </tr>
                        <tr>
                            <td><%=  req.__('text.purchase.fees') %></td>
                            <td><%= currency_tigo%>  <%=  purchase_fee %></td>    
                        </tr>
                        <tr>
                            <td><%=  req.__('text.purchase.taxes') %></td>
                            <td><%= currency_tigo%>  <%=  purchase_taxes %></td>    
                        </tr>
                        <tr>
                            <td><%=  req.__('text.purchase.total_debit_amount') %></td>
                            <td><%= currency_tigo%> <%= amount_to_debit %></td>    
                        </tr>
                        <tr>
                            <td><%=  req.__('text.purchase.tigo_money_account') %></td>
                            <td><%= msisdn%></td>    
                        </tr>
                    </tbody>
                </table>
                
                <p class="payment-info"> <%=  req.__('text.purchase.forex_rate_tigo_uses') %> <span><%= currency_conversion_rate%></span> <%=  req.__('text.purchase.from') %> <%= currency_merchant%> <%=  req.__('text.purchase.to') %>
<%= currency_tigo%>.</p>      
                  
                <form action="/v1/tigo/payment-auth/transactions/<%= transaction_ref_id%>/purchase" method="POST">
                <div class="confirm-container">
                    <div class="form-group">
                        <label for="txtVerification"><%=  req.__('text.purchase.enter_your_tigo_money_pin_to_confirm') %></label>
                        <% if(error && error != "BLANK_TIGO_PIN") {%>    
                       <p class="error-message"> <%=  req.__('text.purchase.invalid_pin') %>. <%=  req.__('text.purchase.enter_correct_pin') %>.</p>
                        <%}%>
                        <% if(error && error == "BLANK_TIGO_PIN") {%>    
                       <p class="error-message"> <%=  req.__('text.purchase.blank_pin') %>. <%=  req.__('text.purchase.enter_correct_pin') %>.</p>
                        <%}%>   
                        <input type="password" name="pin" class="form-control pin-input" id="txtVerification" AutoCompleteType="Disabled">
                        <input type="hidden" name="transaction_ref_id" class="form-control" value="<%= transaction_ref_id%>"">
                    </div>
                    <div class="form-group buttons clearfix">
                        <button type="submit" class="btn btn-default current"><%=  req.__('text.label.next') %></button>
                          <button type="button" class="btn btn-default" onclick="window.location='/v1/tigo/payment-auth/callback/<%= transaction_ref_id%>?error=true';"><%=  req.__('text.label.cancel') %></button>
                    </div>                
                </div>
        </form>


            </div>
        </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

  $('#sltLanguage').change(function () {

$.ajax({
  type: "GET",
  url: '/v1/tigo/payment-auth/localization?state=purchase&lang='+$('#sltLanguage').val()+'&trans_ref_id=<%= transaction_ref_id %>',
  complete: handleXhrError
});

  });
 
function handleXhrError(xhr) {
    document.open();
    document.write(xhr.responseText);
    document.close();
}

<% if (error){ %>
    $(".pin-input").addClass("error");
<% } %>

</script>
       <script>
                $( document ).ready(function() {
                      $('#sltLanguage').val('<%=  req.getLocale() %>');                      
                    });
               </script>

        
    </body>
</html>

Please make necessary changes in all pages based on the above scenario. I tried for many times. but its not working.
Kindly make it possible, its very much helpful for me