How do I pass a variable from GAS to HTML and back?

Question

I am using GAS to create a web app. I have a doGet that generates the HTML page for the web app and a button on the web app that triggers a script. When I create the HTML page, there is a variable that I need to send to the web app that is then sent back to the script. That variable isn't used in the HTML page other than just transferring it.

Here is a minimal example of what I want to do: My doGet() creates the HTML and passes the variable foo to the page

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile("page");
  var foo = "12345";
  htmlOutput.foo = foo;
  return htmlOutput.evaluate().setTitle('Sample');
}

The HTML page has a button that, when clicked, should pass the variable foo back to GAS to run the function checkOut

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <button id="btn" onclick="doStuff()">Click Here</button>
  <script>
    function doStuff(){
      google.script.run.checkOut(foo);
    }
  </script>
</body>
</html>

In this example, checkOut just displays foo

function checkOut(foo){
  Logger.log(foo);
}

I don't want foo displayed anywhere on the HTML page, but what should I add in order to get it sent back to GAS?

TIA

Generally the client side (html) has to initiate the action however you can use templated html to load data on the html before it is rendered in the client and going from html to the server you can use google.script.run — Cooper