Merge branch 'master' of bitbucket.org:venbainformationtechnology/golf_backend

.gitignore

@@ -1,4 +1,23 @@
-/public
+
 /vendor
 .env
 /writable
+
+# Ignore vendor folder
+public/vendor/
+
+# Include assets folder and its files
+!public/assets/
+!public/square-js/
+!public/square-stylesheets/
+
+public/assets/css
+public/assets/data
+public/assets/fonts
+public/assets/images
+public/assets/js
+public/assets/libs
+public/assets/member_images
+
+!public/assets/member_css
+!public/assets/member_js

app/Controllers/Admin_controller.php

@@ -723,7 +723,7 @@ class Admin_controller extends BaseController
 			 if($row['status'] == 'Success'){
 				$cost =  json_decode($row['transaction'] , true)['payment']['amount_money']['amount'];
 			  }else{$cost='';}
-             $output .='<tr><td>'.$row['order_id'].'</td><td>'.$date->format('M-d-Y').'</td><td>'.$row['transaction_id'].'</td><td>'.$cost.'</td></td><td>'.$row['member_name'].'</td></td><td>'.$row['status'].'</td></tr>';
+             $output .='<tr><td>'.$row['order_id'].'</td><td>'.$date->format('M d , Y').'</td><td>'.$row['transaction_id'].'</td><td>'.$cost.'</td></td><td>'.$row['member_name'].'</td></td><td>'.$row['status'].'</td></tr>';
 			}  
 		    echo  $output .= '</tbody></table></div> ';
 		}
@@ -1107,7 +1107,7 @@ class Admin_controller extends BaseController
 		 $expirydate = new DateTime($data['credit_data'][$i]['expiring_date']);   
 		 if($data['credit_data'][$i]['running_balance'] > 0) 
 		 {$balance = "+ ".$data['credit_data'][$i]['running_balance'];}else{$balance = "- ".$data['credit_data'][$i]['used_points'];}
-		 $output .='<tr><td>'.$data['credit_data'][$i]['order_id'].'</td><td>'.$date->format('M-d-Y').'</td><td>'.$expirydate->format('M-d-Y').'</td><td>'.$balance.'</td><td>'.$data['credit_data'][$i]['avaiable_credit'].'</td></tr>';
+		 $output .='<tr><td>'.$data['credit_data'][$i]['order_id'].'</td><td>'.$date->format('M d , Y').'</td><td>'.$expirydate->format('M d , Y').'</td><td style="text-align: center;">'.$balance.'</td><td style="text-align: center;">'.$data['credit_data'][$i]['avaiable_credit'].'</td></tr>';
 		}  
 		echo  $output .= '</tbody></table></div> ';
 	

app/Models/Packages_and_pricing_model.php

@@ -7,7 +7,7 @@ class Packages_and_pricing_model extends Model
     protected $table      = 'packages_and_pricing';
     protected $primaryKey = 'id';
 	
-	protected $allowedFields = ['package_name','package_type', 'credit','cost', 'is_active'];
+	protected $allowedFields = ['package_name','package_type', 'credit','cost','discription','offer_label', 'is_active'];
 	
   
 }

app/Views/checkout.php

@@ -271,7 +271,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-6 mb-3">
 
-                                <label for="first_name">First Name</label>
+                                <label for="first_name">First Name<span class="text-danger">*</span></label>
 
                                 <input type="text" value="<?= $userdata[0]['name']; ?>" name="name" id="first_name" required>
                                 <span id="first_name_span_message"> </span>
@@ -279,7 +279,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-6 mb-3">
 
-                                <label for="last_name">Last Name</label>
+                                <label for="last_name">Last Name<span class="text-danger">*</span></label>
 
                                 <input type="text" value="<?= $userdata[0]['last_name']; ?>" name="last_name" id="last_name" required>
                                 <span id="last_name_span_message"> </span>
@@ -289,7 +289,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-12 mb-3">
 
-                                <label for="address">Street Address</label>
+                                <label for="address">Street Address<span class="text-danger">*</span></label>
 
                                 <input type="text" value="<?= $userdata[0]['address']; ?>" name="address" id="address" required>
                              <span id="address_span_message"> </span>
@@ -297,7 +297,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-4 mb-3">
 
-                                <label for="state">State</label>
+                                <label for="state">Province<span class="text-danger">*</span></label>
 
                                 <input type="text" name="state" id="state" value="<?= $userdata[0]['state']; ?>" required>
                                 <span id="state_span_message"> </span>
@@ -305,7 +305,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-4 mb-3">
 
-                            <label for="city">City</label>
+                            <label for="city">City<span class="text-danger">*</span></label>
                             
                             <input type="text" value="<?= $userdata[0]['city']; ?>" name="city" id="city" required>
                             <span id="city_span_message"> </span>
@@ -313,7 +313,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-4 mb-3">
 
-                                <label for="country">Country</label>
+                                <label for="country">Country<span class="text-danger">*</span></label>
                                 
 
                                 <!-- <input type="text" name="country" id="country" value="<?= $userdata[0]['country']; ?>"> -->
@@ -334,7 +334,7 @@ $web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https
 
                             <div class="col-lg-4 mb-3">
 
-                                <label for="zipcode">Postal Code</label>
+                                <label for="zipcode">Postal Code<span class="text-danger">*</span></label>
 
                                 <input type="text" name="pincode" id="pincode" value="<?= $userdata[0]['pincode']; ?>" required>
                                 <span id="pincode_span_message"> </span>

app/Views/credits_pack_form.php

@@ -64,6 +64,20 @@
                                                 </div>
                                             </div>
 
+                                            <div class="form-group row">
+                                                <label for="inputEmail3" class="col-4 col-form-label">Description<span class="text-danger">*</span></label>
+                                                <div class="col-7">
+                                                    <input type="text"  required  class="form-control"  name="discription" value="<?php if(isset($PackageData)){echo $PackageData[0]['discription'];} ?>" placeholder="Description">
+                                                </div>
+                                            </div>
+
+                                            <div class="form-group row">
+                                                <label for="inputEmail3" class="col-4 col-form-label">Offer Label<span class="text-danger">*</span></label>
+                                                <div class="col-7">
+                                                    <input type="text"  required  class="form-control"  name="offer_label" value="<?php if(isset($PackageData)){echo $PackageData[0]['offer_label'];} ?>" placeholder="Offer Label">
+                                                </div>
+                                            </div>
+
                                            
                                            
                                             <div class="form-group row">

app/Views/credits_pack_list.php

@@ -35,9 +35,10 @@
                                                 <tr>
                                                     <th>Pack Name</th>
                                                     <th>Pack Type</th>
-                                                    <th>Points</th>
+                                                    <th>Credits</th>
                                                     <th>Cost</th>
-                                                    <th>Status</th>
+                                                    <th>Description</th>
+                                                    <th>Offer Label</th>
                                                     <th>Action</th>
                                                 </tr>
                                             </thead>
@@ -49,9 +50,11 @@
                                                 <tr>
                                                         <td><?php echo $row['package_name'];?></td>
                                                         <td><?php echo $row['package_type'];?></td>
-                                                        <td><?php echo $row['credit'];?></td>
+                                                        <td style="text-align: center;"><?php echo $row['credit'];?></td>
-                                                        <td><?php echo $row['cost'];?></td>
+                                                        <td style="text-align: center;"><?php echo $row['cost'];?></td>
-                                                        <td><?php if($row['is_active'] == 1){ echo "Active"; }else{ echo "In-Active"; }?></td>
+                                                        <td><?php echo $row['discription'];?></td>
+                                                        <td><?php echo $row['offer_label'];?></td>
+                                                        <!-- <td><?php if($row['is_active'] == 1){ echo "Active"; }else{ echo "In-Active"; }?></td> -->
                                                         <td><a href="<?= base_url() ?>credits_pack_edit/<?php echo md5($row['id']);?>"><i class="mdi mdi-lead-pencil"  style="font-size:18px;"></a></td>
                                                        
                                                         

app/Views/member_form.php

@@ -89,9 +89,9 @@
                                             </div>
 
                                             <div class="form-group row">
-                                                <label for="inputEmail3" class="col-4 col-form-label">State<span class="text-danger"></span></label>
+                                                <label for="inputEmail3" class="col-4 col-form-label">Province<span class="text-danger"></span></label>
                                                 <div class="col-7">
-                                                <input type="text"  class="form-control" id="state"  name="state" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['state'];} ?>" placeholder="State" >
+                                                <input type="text"  class="form-control" id="state"  name="state" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['state'];} ?>" placeholder="Province" >
                                                
                                                 </div>
                                             </div>
@@ -159,7 +159,7 @@
                         <div class="row">
                             <div class="col-12">
                                 <div class="page-title-box page-title-box-alt">
-                                    <h4 class="page-title"> Change Password </h4>
+                                    <h4 class="page-title"> Reset Password </h4>
                                     <div class="page-title-right">
                                         <ol class="breadcrumb m-0">
                                             <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>

app/Views/members_list.php

@@ -8,6 +8,23 @@
         color: #002B60;
         border-color: #000;
     }
+    .test {
+        box-shadow: 0 2px 6px 0 rgba(0,86,193,.5);
+        cursor: pointer;
+    color: #fff;
+    font-size: 15px;
+    padding: 10px;
+    width: 55px;
+    height: 25px;
+    line-height: 8px;
+    background: #00B4D5;
+    border-radius: 5px;
+    font-weight: 500;
+    display: block;
+}
+    /* th{
+        text-align: center;
+    } */
  </style>
  <!-- start page title -->
                             <div class="row">
@@ -61,9 +78,9 @@
                                                 <tr>
                                                 <td hidden><?php echo $row['id'];?></td>
                                                         <td><?php echo $row['name'];?></td>
-                                                        <td><?php echo $row['mobile'];?></td>
+                                                        <td style="text-align: center;"><?php echo $row['mobile'];?></td>
                                                         <td><?php echo $row['email'];?></td>
-                                                        <td class="credit_usage"  id="<?php echo md5($row['id']);?>"><?php echo $row['credits'];?></td>
+                                                        <td class="credit_usage" style="text-align: center;"  id="<?php echo md5($row['id']);?>"><span class="test"><?php echo $row['credits'];?></span></td>
                                                         <td><?php if($row['is_active'] == 1){ echo "Active"; }else{ echo "Deactive"; }?></td>
                                                         <td><a href="<?= base_url() ?>member_edit/<?php echo md5($row['id']);?>"><i class="mdi mdi-lead-pencil"  style="font-size:18px;"></i></a>
                                                         <?php if ($row['is_active'] == 1) { ?>

app/Views/transactions_list.php

@@ -63,7 +63,7 @@
                                                 { ?>
                                                 <tr class="order_details" id="<?php echo $row['member_id'];?>">
                                                         <td><?php echo $row['order_id'];?></td>
-                                                        <td><?php $date = new DateTime($row['created_at']);    echo $date->format('M-d-Y');  ?></td>
+                                                        <td><?php $date = new DateTime($row['created_at']);    echo $date->format('M d , Y');  ?></td>
                                                         <td><?php echo $row['transaction_id'];?></td>
                                                         <td><?php if($row['status'] == 'Success'){
                                                           echo json_decode($row['transaction'] , true)['payment']['amount_money']['amount'];

app/Views/user_form.php

@@ -87,9 +87,9 @@
                                             </div>
 
                                             <div class="form-group row">
-                                                <label for="inputEmail3" class="col-4 col-form-label">State<span class="text-danger"></span></label>
+                                                <label for="inputEmail3" class="col-4 col-form-label">Province<span class="text-danger"></span></label>
                                                 <div class="col-7">
-                                                <input type="text"  class="form-control" id="state"  name="state" value="<?php if(isset($userList)){echo $userList[0]['state'];} ?>" placeholder="State">
+                                                <input type="text"  class="form-control" id="state"  name="state" value="<?php if(isset($userList)){echo $userList[0]['state'];} ?>" placeholder="Province">
                                                
                                                 </div>
                                             </div>

public/assets/member_js/ajax.js

@@ -0,0 +1,315 @@
+$(document).ready(function(){
+  $(".pack-submit").click(function(){
+    id = $(this).attr("id");
+    console.log(id);
+    url = $('#url').val();
+    $.ajax({ 
+      type: "post",
+      url: ''+url+'add_package_cartdata',
+      data: { 'id' : id , 'c_token' : $('#c_token').val() },
+      json: true,
+      success: function(res) {
+        res = JSON.parse(res);
+        window.location = ''+url+'view_cart/'+res.token+'';
+      },
+      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+    });
+  });
+});
+
+
+$(document).ready(function(){
+$(".input-text").change(function(){
+  id = $(this).attr("id");
+  url = $('#url').val();
+  var cost = $('#cost_'+id+'').val();
+  $('.'+id+'').html('$'+$('#'+id+'').val() * cost+'');
+  // console.log($('.0').text().replace("$", ""));
+  subtotal = Number($('.0').text().replace("$", "")) + Number($('.1').text().replace("$", ""));
+  $('.subtotal').html('$'+subtotal+'');
+  pst = subtotal * $('#pst').val() / 100;
+  $('.pst').html('$'+pst+'');
+  gst = subtotal * $('#gst').val() / 100;
+  $('.gst').html('$'+gst+'');
+  total = subtotal + pst + gst;
+  $('.total').html('$'+total+'')
+
+
+  $.ajax({ 
+    type: "post",
+    url: ''+url+'change_count_onclick',
+    data: { 'id' : $('#cart_token_id_'+id+'').val() , 'count' : $('#'+id+'').val() },
+    json: true,
+    success: function(res) {
+    },
+    error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+  });
+});
+});
+
+
+$(document).ready(function(){
+  $(".editAddress").click(function(){
+    id = $(this).attr("id");
+   alert(id);
+    url = $('#url').val();
+    $.ajax({ 
+      type: "post",
+      url: ''+url+'member_address_form',
+      data: { 'id' : id  },
+      json: true,
+      success: function(res) {
+       $('.address-form').css('display','block');
+       $('.address-form').append(res);
+       // window.location = ''+url+'view_cart/'+res.token+'';
+      },
+      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+    });
+  });
+});
+
+$(document).ready(function(){
+  $(".submit").click(function(){
+    var formData = $('#member_address').serialize();
+   alert(formData);
+    url = $('#url').val();
+    $.ajax({ 
+      type: "post",
+      url: ''+url+'member_address_edit_or_add',
+      data: formData,
+      json: true,
+      success: function(res) {
+       if(res == true){  
+         $('.address-form').css('display','none'); 
+      //  $("#address_list").load(window.location + "#address_list"); 
+       }
+      },
+      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+    });
+  });
+});
+
+$(document).ready(function(){
+  $("#card-button").click(function(){
+    // $('#loading-spinner-overlay').css('visibility', 'visible');
+    
+  });
+
+  $(".select-address").click(function(){
+   
+    var value = $(this).attr("value");
+    $('#address_id').val(value);
+    
+  });
+
+  var val = $('.checked').val();
+    $('#address_id').val(val);
+});
+
+$(document).ready(function(e){
+  $("#address-btn").click(function(){
+    // var formData = $('#member-address-save').serialize();
+    url = $('#url').val();
+    $.ajax({ 
+      type: "post",
+      url: ''+url+'member_address_edit',
+      data: {
+        id : $('#id').val(),
+        name : $('#first_name').val(),
+        last_name : $('#last_name').val(),
+        address : $('#street_address').val(),
+        gender : $("input[name='gender']:checked").val(),
+        city : $('#city').val(),
+        state : $('#state').val(),
+        pincode : $('#pincode').val()
+      },
+      json: true,
+      success: function(res) {
+       if(res == true){  
+        // $("#member-address").load(location.href + " #member-address");
+         console.log((res));
+         $('.success-message').show();
+         $('.success-message').delay(3000).fadeOut('slow');
+       }
+      },
+      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+    });
+  });
+});
+
+
+$(document).ready(function(e){
+  $("#pass-btn").click(function(){
+    const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}/;
+    if ($('#old_password').val() != '' && $('#new_password').val() != "" && $('#confirm_password').val() != "" ) 
+    {
+      if ($('#old_password').val() != $('#new_password').val()) 
+      {
+        if (passwordPattern.test($('#new_password').val())) 
+        {
+          $('#error_np').html("");
+          old_password = $('#old_password').val();
+          new_password = $('#new_password').val();
+          confirm_password = $('#confirm_password').val();
+          var formData = $('#member-pass-save').serialize();
+          url = $('#url').val();
+          if (new_password == confirm_password) 
+          {
+            $.ajax({ 
+              type: "post",
+              url: ''+url+'member_password_edit',
+              data: formData,
+              json: true,
+              success: function(res) {
+               if(res == 1){  
+                 window.location.href = url+"member_logout";
+               }
+               else{
+                $('#error_op_after_check').html("Please check your old password").css('color' , 'red');
+                $('#old_password').val(old_password);
+                $('#new_password').val(new_password);
+                $('#old_password').val(old_password);
+                $('#confirm_password').val('');
+               }
+              },
+              error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+            });
+          }
+          else
+          {
+            $('#error_op_after_check').html("Please check your old password").css('color' , 'red');
+          }
+        }
+      else
+      {
+        $('#error_np').html("Must contain at least one number 
and one uppercase 
and one special character like !@#$%^&*() 
and lowercase letter,
and at least 8 or more characters").css('color' , 'red');    
+      }
+      } 
+      else 
+      {
+        $('#error_np').html("Old password and new passowrd is same").css('color' , 'red');
+      }
+    }
+    else
+    {
+      if ($('#old_password').val() == "" )
+      {
+        $('#error_op_after_check').html("Input required").css('color' , 'red');
+      }
+      if ($('#new_password').val() == "")
+      {
+        $('#error_np').html("Input required").css('color' , 'red');
+      }
+      if ($('#confirm_password').val() == "" )
+      {
+        $('#error_cp').html("Input required").css('color' , 'red');
+      }
+    }
+   
+  });
+});
+
+$(document).ready(function(e){
+$('#old_password').on('keyup', function () {
+  $('#error_op_after_check').html("");
+  url = $('#url').val();
+  $.ajax({ 
+    type: "post",
+    url: ''+url+'check_old_password',
+    data: { id : $('#id').val() ,old_password : $('#old_password').val() },
+    json: true,
+    success: function(res) {
+      console.log(res);
+     if(res == 1){  
+      $('#error_op').html("Matching").css('color' , 'green')
+     }
+     else{
+      if ($('#old_password').val().length == 0) {
+        $('#error_op').html("");
+      } else {
+        $('#error_op').html("Not matching").css('color' , 'red');
+      }
+
+     }
+    },
+    error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+  });
+});
+}); 
+
+
+$(document).ready(function(){
+$('#new_password, #confirm_password').on('keyup', function () {
+  if ($('#confirm_password').val() == "" )
+  {
+    $('#error_cp').html('');
+  }
+  if ($('#new_password').val() == "" )
+  {
+    $('#error_np').html("");
+  }
+  if($('#confirm_password').val() != $('#new_password').val())
+  {
+    $('#error_cp').html("Password and confirm password doesn't match").css('color', 'red');
+  }
+  else
+  {
+    $('#error_cp').html("");
+  }
+  if ($('#new_password').val() == $('#confirm_password').val() && $('#confirm_password').val().length > 0 ) {
+    // $('#error_cp').html('Matching').css('color', 'green');
+  }
+  else if($('#new_password').val().length == 0 || $('#confirm_password').val().length == 0){
+    if ($('#confirm_password').val() == "" )
+    $('#error_cp').html('');
+    if ($('#new_password').val() != "" )
+    $('#error_np').html("");
+  } 
+
+});
+});
+
+$(document).ready(function(e){
+  $("#pincode").change(function(){
+    zip_id = $("#pincode").val();
+    url = $('#url').val();
+    $.ajax({ 
+      type: "post",
+      url: ''+url+'zipcode_data',
+      data: { 'id' : zip_id },
+      json: true,
+      success: function(res) {
+        res = JSON.parse(res);
+        if(res != 0){  
+          $('#city').val(res[0].city);
+          $('#state').val(res[0].state);
+        }
+      },
+      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+    });
+  });
+});
+
+
+
+// $(document).ready(function(){
+//     $(".pack-submit").click(function(){
+//       id = $(this).attr("id");
+//       url = $('#url').val();
+//       console.log($('#c_token').val())
+//       $.ajax({ 
+//         type: "post",
+//         url: ''+url+'add_package_cartdata',
+//         data: { 'id' : id , 'c_token' : $('#c_token').val() },
+//         json: true,
+//         success: function(res) {
+//           res = JSON.parse(res);
+//           console.log(res);
+//           $('#c_token').val(res.token);
+//           $('#'+id+'').html('View Cart');
+//           $('#'+id+'').attr('href', ''+url+'view_cart/'+res.token+'')
+//         },
+//         error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+//       });
+//     });
+// });

public/square-js/sq-ach.js

@@ -0,0 +1,50 @@
+async function ACHPay(buttonEl) {
+  const accountHolderNameEl = document.getElementById('ach-account-holder-name');
+  const achMessageEl = document.getElementById('ach-message');
+  const achWrapperEl = document.getElementById('ach-wrapper');
+
+  let ach;
+  try {
+    ach = await window.payments.ach();
+    achWrapperEl.style.display = 'block';
+  } catch (e) {
+    // If the ACH payment method is not supported by your account then
+    // do not enable the #ach-account-holder-name input field
+    if (e.name === 'PaymentMethodUnsupportedError') {
+      achMessageEl.innerText = 'ACH payment is not supported by your account';
+      accountHolderNameEl.disabled = true;
+    }
+
+    // if we can't load ACH, we shouldn't bind events for the button
+    return;
+  }
+
+  async function eventHandler(event) {
+    const accountHolderName = accountHolderNameEl.value.trim()
+    if (accountHolderName === '') {
+      achMessageEl.innerText = 'Please input full name';
+      return;
+    }
+
+    // Clear any existing messages
+    window.paymentFlowMessageEl.innerText = '';
+
+    try {
+      const result = await ach.tokenize({
+        accountHolderName,
+      });
+      if (result.status === 'OK') {
+        // Use global method from sq-payment-flow.js
+        window.createPayment(result.token);
+      }
+    } catch (e) {
+      if (e.message) {
+        window.showError(`Error: ${e.message}`);
+      } else {
+        window.showError('Something went wrong');
+      }
+    }
+  }
+
+  buttonEl.addEventListener('click', eventHandler);
+}

public/square-js/sq-apple-pay.js

@@ -0,0 +1,35 @@
+async function ApplePay(buttonEl) {
+  const paymentRequest = window.payments.paymentRequest(
+    // Use global method from sq-payment-flow.js
+    window.getPaymentRequest()
+  );
+
+  let applePay;
+  try {
+    applePay = await window.payments.applePay(paymentRequest);
+  } catch (e) {
+    console.error(e)
+    return;
+  }
+
+  async function eventHandler(event) {
+    // Clear any existing messages
+    window.paymentFlowMessageEl.innerText = '';
+
+    try {
+      const result = await applePay.tokenize();
+      if (result.status === 'OK') {
+        // Use global method from sq-payment-flow.js
+        window.createPayment(result.token);
+      }
+    } catch (e) {
+      if (e.message) {
+        window.showError(`Error: ${e.message}`);
+      } else {
+        window.showError('Something went wrong');
+      }
+    }
+  }
+
+  buttonEl.addEventListener('click', eventHandler);
+}

public/square-js/sq-card-pay.js

@@ -0,0 +1,35 @@
+async function CardPay(fieldEl, buttonEl) {
+  // Create a card payment object and attach to page
+  const card = await window.payments.card({
+    style: {
+      '.input-container.is-focus': {
+        borderColor: '#006AFF'
+      },
+      '.message-text.is-error': {
+        color: '#BF0020'
+      }
+    }
+  });
+  await card.attach(fieldEl);
+
+  async function eventHandler(event) {
+    // Clear any existing messages
+    window.paymentFlowMessageEl.innerText = '';
+
+    try {
+      const result = await card.tokenize();
+      if (result.status === 'OK') {
+        // Use global method from sq-payment-flow.js
+        window.createPayment(result.token);
+      }
+    } catch (e) {
+      if (e.message) {
+        window.showError(`Error: ${e.message}`);
+      } else {
+        window.showError('Something went wrong');
+      }
+    }
+  }
+
+  buttonEl.addEventListener('click', eventHandler);
+}

public/square-js/sq-google-pay.js

@@ -0,0 +1,29 @@
+async function GooglePay(buttonEl) {
+  const paymentRequest = window.payments.paymentRequest(
+    // Use global method from sq-payment-flow.js
+    window.getPaymentRequest()
+  );
+  const googlePay = await payments.googlePay(paymentRequest);
+  await googlePay.attach(buttonEl);
+
+  async function eventHandler(event) {
+    // Clear any existing messages
+    window.paymentFlowMessageEl.innerText = '';
+
+    try {
+      const result = await googlePay.tokenize();
+      if (result.status === 'OK') {
+        // Use global method from sq-payment-flow.js
+        window.createPayment(result.token);
+      }
+    } catch (e) {
+      if (e.message) {
+        window.showError(`Error: ${e.message}`);
+      } else {
+        window.showError('Something went wrong');
+      }
+    }
+  }
+
+  buttonEl.addEventListener('click', eventHandler);
+}

public/square-js/sq-payment-flow.js

@@ -0,0 +1,220 @@
+async function SquarePaymentFlow() {
+
+
+
+  // Create card payment object and attach to page
+
+  CardPay(document.getElementById('card-container'), document.getElementById('card-button'));
+
+
+
+  //Create Apple pay instance
+
+  // ApplePay(document.getElementById('apple-pay-button'));
+
+
+
+  // Create Google pay instance
+
+  // GooglePay(document.getElementById('google-pay-button'));
+
+
+
+  //Create ACH payment
+
+  // ACHPay(document.getElementById('ach-button'));
+
+}
+
+
+
+window.payments = Square.payments(window.applicationId, window.locationId);
+
+
+
+window.paymentFlowMessageEl = document.getElementById('payment-flow-message');
+
+
+
+window.showSuccess = function(message) {
+
+  window.paymentFlowMessageEl.classList.add('success');
+
+  window.paymentFlowMessageEl.classList.remove('error');
+
+  window.paymentFlowMessageEl.innerText = message;
+
+}
+
+
+
+window.showError = function(message) {
+
+  window.paymentFlowMessageEl.classList.add('error');
+
+  window.paymentFlowMessageEl.classList.remove('success');
+
+  window.paymentFlowMessageEl.innerText = message;
+
+}
+
+
+
+window.createPayment = async function(token) {
+
+   $('#loading-spinner-overlay').css('visibility', 'visible');
+
+  var address = $('#member_address').serialize();
+
+  const dataJsonString = JSON.stringify({
+
+    token,
+
+    idempotencyKey: window.idempotencyKey,
+
+    amount : document.getElementById('amount').value,
+
+    order_id : document.getElementById('order_id').value,
+
+    address : address
+
+  });
+
+  
+
+  try {
+
+     var getUrl = window.location;
+
+        path_name = "/"+getUrl.pathname.split('/')[1];
+
+
+    
+
+    const response = await fetch(window.location.origin+path_name+"/processPayment", {
+
+      method: 'POST',
+
+      headers: {
+
+        'Content-Type': 'application/json'
+
+      },
+
+      body: dataJsonString
+
+    });
+
+
+
+  
+
+    const data = await response.json();
+
+
+
+   
+
+    if (data.errors && data.errors.length > 0) {
+
+      if (data.errors[0].detail) {
+
+        console.log(data);
+
+        //window.showError(data.errors[0].detail);
+
+        var getUrl = window.location;
+
+        path_name = "/"+getUrl.pathname.split('/')[1];
+
+        window.location.href = window.location.origin+path_name+"/payment_failed/"+document.getElementById('order_id').value;
+
+      } else {
+
+        window.showError('Payment Failed.');
+
+      }
+
+    } else {
+
+      var getUrl = window.location;
+
+      path_name = "/"+getUrl.pathname.split('/')[1];
+
+      window.location.href = window.location.origin+path_name+"/payment_success/"+document.getElementById('order_id').value;
+
+     // window.showSuccess('Payment Successful!');
+
+    }
+
+  } catch (error) {
+
+    console.error('Error:', error);
+
+  }
+
+}
+
+
+
+// Hardcoded for testing purpose, only used for Apple Pay and Google Pay
+
+window.getPaymentRequest = function() {
+
+  return {
+
+    countryCode: window.country,
+
+    currencyCode: window.currency,
+
+    lineItems: [
+
+      { amount: '1.23', label: 'Cat', pending: false },
+
+      { amount: '4.56', label: 'Dog', pending: false },
+
+    ],
+
+    requestBillingContact: false,
+
+    requestShippingContact: true,
+
+    shippingContact: {
+
+      addressLines: ['123 Test St', ''],
+
+      city: 'San Francisco',
+
+      countryCode: 'US',
+
+      email: 'test@test.com',
+
+      familyName: 'Last Name',
+
+      givenName: 'First Name',
+
+      phone: '1111111111',
+
+      postalCode: '94109',
+
+      state: 'CA',
+
+    },
+
+    shippingOptions: [
+
+      { amount: '0.00', id: 'FREE', label: 'Free' },
+
+      { amount: '9.99', id: 'XP', label: 'Express' },
+
+    ],
+
+    total: { amount: '1.00', label: 'Total', pending: false },
+
+  };
+
+};
+
+
+
+SquarePaymentFlow();

public/square-stylesheets/sq-payment.css

@@ -0,0 +1,125 @@
+.payment-form {
+  padding: 50px 0px 50px 0px;
+  width: 100%;
+  max-width: 1000px;
+  margin: 40px auto;
+  display: flex;
+  justify-content: center;
+  border-radius: 20px;
+}
+
+.payment-form {
+  align-items: center;
+}
+
+@media (max-width: 1050px) {
+  .payment-form {
+    border-radius: 0;
+    margin: 0;
+    height: 110vh;
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .payment-form {
+    padding: 30px;
+    box-sizing: border-box;
+  }
+}
+
+#apple-pay-button {
+  height: 48px;
+  width: 100%;
+  display: inline-block;
+  -webkit-appearance: -apple-pay-button;
+  -apple-pay-button-type: plain;
+  -apple-pay-button-style: black;
+}
+
+#fast-checkout {
+  background: #fafafa;
+  color: black;
+}
+
+#fast-checkout input {
+  border-radius: 6px;
+  position: relative;
+}
+
+#fast-checkout .wrapper {
+  max-width: 343px;
+  position: relative;
+}
+
+#fast-checkout button {
+  width: 100%;
+}
+
+#fast-checkout button#apple-pay-button {
+  background: white;
+  color: black;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  line-height: 18px;
+  padding: 13px;
+}
+
+#fast-checkout .border {
+  color: rgba(0, 0, 0, 0.55);
+  background: rgba(0, 0, 0, 0.1);
+  height: 1px;
+  width: 100%;
+  margin: 30px 0;
+  font-size: 12px;
+  line-height: 20px;
+  text-transform: uppercase;
+  position: relative;
+}
+
+#fast-checkout .border span {
+  position: absolute;
+  top: -10px;
+  background: #fafafa;
+  padding: 0 10px;
+  left: calc(50% - 1em - 5px);
+}
+
+#ach-wrapper {
+  display: none;
+}
+
+#ach-wrapper input:first-of-type {
+  margin-bottom: 10px;
+}
+
+#ach-message {
+  width: 100%;
+  margin-top: 11px;
+  margin-bottom: 11px;
+  font-size: 14px;
+  display: inline-block;
+  color: #bf0020;
+}
+
+#ach-message:empty:before, #message:empty:before {
+  content: "\200b";
+}
+
+#payment-flow-message {
+  width: 100%;
+  margin-top: 11px;
+  margin-bottom: 11px;
+  height: 100px;
+  display: block;
+}
+
+#payment-flow-message.error {
+  color: #bf0020;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+#payment-flow-message.success {
+  color: #3374ff;
+}

public/square-stylesheets/style.css

@@ -0,0 +1,68 @@
+@import url(https://square-fonts-production-f.squarecdn.com/square-sans.min.css);
+
+html {
+  color: #151c1f;
+  font-family: var(--square-sans-text);
+  font-size: 16px;
+  line-height: 24px;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.55);
+  font-family: var(--square-sans-text);
+}
+
+h1 {
+  text-align: center;
+}
+
+form {
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+button {
+  font-family: var(--square-sans-text);
+  margin: 0 auto 20px auto;
+  background-color: #3374ff;
+  padding: 12px 16px;
+  color: #fff;
+  border-radius: 8px;
+  border: none;
+}
+
+button:focus {
+  outline: none;
+}
+
+button:hover {
+  cursor: pointer;
+  filter: brightness(90%);
+  -webkit-transition: all 30ms ease-in-out;
+  -moz-transition: all 30ms ease-in-out;
+  -ms-transition: all 30ms ease-in-out;
+  -o-transition: all 30ms ease-in-out;
+  transition: all 30ms ease-in-out;
+}
+
+input:focus {
+  border: none;
+  outline: none;
+}
+
+input {
+  width: 100%;
+  height: 48px;
+  padding-left: 16px;
+  background-color: #fff;
+  font-size: 16px;
+  border: 1px solid #d9d9d9;
+  box-sizing: border-box;
+}