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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   

    <!-- Facebook -->
    
    <meta property="og:title" content="WhispersApp | The Ultimate Consultancy Portal">
    <meta property="og:description" content="Button, link and a portal to sell remote consultative services. Specifically designed for lawyers, doctors, accountants, business consultants, architects, IT specialists, engineers and insurance specialists">


<meta name="description" content="Button, link and a portal to sell remote consultative services. Specifically designed for lawyers, doctors, accountants, business consultants, architects, IT specialists, engineers and insurance specialists">

<meta property="og:image" content="https://www.whispersapp.com/landing/assets/images/whis/og.jpg">
<link rel="icon" type="image/png" href="../landing/assets/images/whis/fav.png">
    
    
    <meta name="author" content="Techmetic">

    <title>WhispersApp | The Ultimate Consultant-Client Portal</title>

    <!-- vendor css -->
    <link href="../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/highlightjs/styles/github.css" rel="stylesheet">
    <link href="../lib/select2/css/select2.min.css" rel="stylesheet">
    <link href="../lib/timepicker/jquery.timepicker.css" rel="stylesheet">
    <link href="../lib/spectrum-colorpicker/spectrum.css" rel="stylesheet">
    <link href="../lib/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
    <link href="../lib/ion-rangeslider/css/ion.rangeSlider.css" rel="stylesheet">
    <link href="../lib/ion-rangeslider/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <!-- <link href="../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> -->
    <link href="../lib/mfonts/fontawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/rickshaw/rickshaw.min.css" rel="stylesheet">
       <link href="../lib/select2/css/select2.min.css" rel="stylesheet">
    <link href="../lib/datatables.net-dt/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="../lib/datatables.net-responsive-dt/css/responsive.dataTables.min.css" rel="stylesheet">
    <script src="https://www.paypal.com/sdk/js?client-id=AUHV_g4k0G4qwksI_m3Yvb6P2lme001WFnVyw6UY8IX9XGFLlxszo7jg_u44kl0h4tAQtSblye5UJuwt&currency=USD"></script>
<script type="text/javascript" src="../js/paypal.js"></script>

    <!-- Bracket CSS -->
    <link rel="stylesheet" href="../css/bracket.css">
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9HE1G2WDPD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9HE1G2WDPD');
</script>
  </head>

  <body>

  




  <!-- ########## START: MAIN PANEL ########## -->
   <!-- ########## START: MAIN PANEL ########## -->
    <div class="br-mainpanel pd-x-20 pd-sm-x-30" style="margin-left: 1px; margin-top: 1px; background-image: url(../img/bg2.jpg); background-size:100% 100%;">
      




      <div class="br-pagetitle">
        
        <div class="col-12" style="text-align: center;">
          <h4>Whispers App</h4>
          <p class="mg-b-0">The Ultimate Consultant-Client Portal</p>
        </div>
      </div><!-- d-flex -->



      <div class="br-pagebody pd-x-20 pd-sm-x-30" style="padding-top: 1px; margin-top: 2px;">



     
       

     

          

           <div class="d-flex align-items-center justify-content-center bg-gray-300 ht-600 pd-x-20 pd-xs-x-0"   style="background-image: url(../img/bg.jpg); background-size:100% ; border-radius:15px">
            <div class="card wd-450 shadow-base">
              <div class="card-body pd-x-20 pd-xs-40">
                <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-15 text-center">Step 2/5</h5>
                
               
                <br>
                                
                                <div class="col-xl-12" style="padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;">
              <div class="alert alert-info alert-solid pd-20" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <div class="d-sm-flex align-items-center justify-content-start">
                  <i class="icon ion-ios-checkmark-outline lh-0 tx-52"></i>
                  <div class="mg-sm-l-15 mg-t-15 mg-sm-t-0">
                    <h5 class="mg-b-2 pd-t-2">Congratulations!</h5>
                    <p class="mg-b-0 tx-xs op-8">We have created an account for <%= company.name %></p>
                  </div>
                </div><!-- d-flex -->
              </div><!-- alert -->
            </div><!-- col-xl-6 -->

            <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-5" style="font-size: 16px">Finish the Activation By Paying the Set Up Fee</h5>
            
            <p class="mg-b-0 tx-xs op-8 mg-b-15">If you test the system and you don't like it or it doesn't really solve your needs, we shall refund the money, no questions asked.</p>

<% if (company.country == 'Kenya') { %>

            <form action="/mpesa/<%= company.phone %>" method="POST">
              <div class="form-group">
                                <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-5" style="font-size: 16px">Pay Via M-Pesa</h5>
                                  <label for="phone">Enter phone number where money will be deducted(Starting with 254)</label>
                  <input class="form-control" id="phone" type="text" name="phone" placeholder="e.g. 254722112233">
                                </div><!-- form-group -->
                                <div class="form-group mg-b-20" style="display: none;">
                                  <label for="amount">Amount in Ksh.</label>
                  <input class="form-control" type="number" value="1200" name="amount" id="amount" placeholder="eg. 1000">
                                  
                                </div><!-- form-group -->

                                <div class="form-group mg-b-20" style= "display: none">
                                  <label for="account">Password</label>
                  <input class="form-control" type="text" value="<%= company.accountNumber %>" name="account" id="account" placeholder="eg. 1000">
                                  
                                </div><!-- form-group -->


                <button class="btn btn-success btn-block">Pay 1100Kes Via M-Pesa</button>

            </form>    
            <form style="margin-top: 16px;">
  <script src="https://checkout.flutterwave.com/v3.js"></script>
  <button  class="btn btn-primary pd-y-12 btn-block" type="button" onClick="makePayment()">Pay <%= currency %> 35 Via Debit/Credit Card</button>
</form>

<script>

  
  function makePayment() {
     var phone = '<%- company.phone %>';
     var name = '<%- company.name %>';
     var email = '<%- company.email %>';
     var id = '<%- company._id %>';
    


    FlutterwaveCheckout({
      public_key: "FLWPUBK-0e3012345d85e4e52580e8d15aead971-X",
      tx_ref: id,
      amount: '35',
      currency: "KES",
      country: "KE",
      redirect_url: // specified redirect URL
        "https://www.whispersapp.com/users/success",
      payment_options: "card,mpesa,mobilemoneyrwanda,mobilemoneyuganda,qr,paypal",
      customer: {
        email: email,
        phone_number: phone,
        name: name,
      },
      callback: function (data) { // specified callback function
        console.log(data);
      },
      customizations: {
        title: "Whispers App",
        description: "Payment for business account creation",
        logo: "https://www.whispersapp.com/img/fav.png",
      },
    });
  }
</script>
<% } %>
                               
<% if (company.country !== 'Kenya') { %>
<form>
  <script src="https://checkout.flutterwave.com/v3.js"></script>
  <button  class="btn btn-primary pd-y-12 btn-block" type="button" onClick="makePayment()">Proceed to Pay <%= currency %> 35</button>
</form>

<div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"WhispersApp Set Up Fee","amount":{"currency_code":"USD","value":1}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';

            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

<script>

  
  function makePayment() {
     var phone = '<%- company.phone %>';
     var name = '<%- company.name %>';
     var email = '<%- company.email %>';
     var id = '<%- company._id %>';
    


    FlutterwaveCheckout({
      public_key: "FLWPUBK-0e3012345d85e4e52580e8d15aead971-X",
      tx_ref: id,
      amount: '35',
      currency: "<%= currency %>",
      country: "",

      redirect_url: // specified redirect URL
        "https://www.whispersapp.com/users/success",
      payment_options: "",
      customer: {
        email: email,
        phone_number: phone,
        name: name,
      },
      callback: function (data) { // specified callback function
        console.log(data);
      },
      customizations: {
        title: "Whispers App",
        description: "Payment for business account creation",
        logo: "https://www.whispersapp.com/img/fav.png",
      },
    });
  }
</script>


<div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"amount":{"currency_code":"USD","value":1}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';

            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

<% } %>





              </div><!-- card-body -->
            </div><!-- card -->
          </div><!-- d-flex -->
          </div></div>
        
       

   

      </div><!-- br-pagebody -->

<%- include('partials/footer'); -%>