Hi,
I dont think I broke the example, the only changes that I have done is to bypass the Dotenv library.
I think I can handle that. 
location-info.php is working fine
inside the sq-payment-flow.js the createPayment function returns the error
Error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data square.js:formatted:5890
ke square.js:5890
and the following code is your square.js code is crashing inside the “case ‘console’” at the
“t && t.apply(xe.console, r)”
function ke(e, t) {
Ue[e] = Ue[e] || [
],
Ue[e].push(t),
function (e) {
if (!Me[e]) switch (Me[e] = !0, e) {
case 'console':
'console' in xe && X.forEach((function (e) {
e in xe.console && G(xe.console, e, (function (t) {
return function (...r) {
He('console', {
args: r,
level: e
}),
t && t.apply(xe.console, r)
}
}))
}));
break;
window.createPayment = async function(token) {
const dataJsonString = JSON.stringify({
token
});
try {
const response = await fetch('https://mymadrasah.co.uk/123456/process-payment.php', {
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) {
window.showError(data.errors[0].detail);
} else {
window.showError('Payment Failed.');
}
} else {
window.showSuccess('Payment Successful!');
}
} catch (error) {
console.error('Error:', error);
}
}
location-info.php
<?php
// Note this line needs to change if you don't use Composer:
// require('square-php-sdk/autoload.php');
require 'vendor/autoload.php';
// use Dotenv\Dotenv;
use Square\SquareClient;
// dotenv is used to read from the '.env' file created for credentials
// $dotenv = Dotenv::create(dirname(__DIR__));
// $dotenv->load();
// The access token to use in all Connect API requests.
// Set your environment as *sandbox* if you're just testing things out.
class LocationInfo {
// Initialize the Square client.
var $currency;
var $country;
var $location_id;
function __construct() {
//$access_token = getenv('SQUARE_ACCESS_TOKEN');
$access_token = "EAAAENUaCQNZuTd4ugz7nzrs-86RFjVUxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// 'environment' => getenv('ENVIRONMENT')
$this->square_client = new SquareClient([
'accessToken' => $access_token,
'environment' => "sandbox"
]);
// $location = $this->square_client->getLocationsApi()->retrieveLocation(getenv('SQUARE_LOCATION_ID'))->getResult()->getLocation();
$location = $this->square_client->getLocationsApi()->retrieveLocation("31M5Txxxxxxxx")->getResult()->getLocation();
$this->location_id = $location->getId();
$this->currency = $location->getCurrency();
$this->country = $location->getCountry();
}
public function getCurrency() {
return $this->currency;
}
public function getCountry() {
return $this->country;
}
public function getId() {
return $this->location_id;
}
}
$location_info = new LocationInfo();
?>
index.php
<?php
require 'vendor/autoload.php';
include 'utils/location-info.php';
use Square\Environment;
// dotenv is used to read from the '.env' file created for credentials
// $dotenv = Dotenv\Dotenv::create(__DIR__);
// $dotenv->load();
// Pulled from the .env file and upper cased e.g. SANDBOX, PRODUCTION.
// $upper_case_environment = strtoupper(getenv('ENVIRONMENT'));
$upper_case_environment = "SANDBOX";
//$web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https://web.squarecdn.com/v1/square.js" : "https://sandbox.web.squarecdn.com/v1/square.js";
$web_payment_sdk_url = "https://sandbox.web.squarecdn.com/v1/square.js";
?>
<html>
<head>
<title>My Payment Flow</title>
<!-- link to the Square web payment SDK library -->
<script type="text/javascript" src="<?php echo $web_payment_sdk_url ?>"></script>
<script type="text/javascript">
window.applicationId =
"<?php
// echo getenv('SQUARE_APPLICATION_ID');
echo "sandbox-sq0idb-1sdAosroBG2XGsq8wGuL3w";
?>";
window.locationId =
"<?php
// echo getenv('SQUARE_LOCATION_ID');
echo "31M5T28Sxxxxxxx";
?>";
window.currency =
"<?php
echo $location_info->getCurrency();
?>";
window.country =
"<?php
echo $location_info->getCountry();
?>";
</script>
<link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">
<link rel="stylesheet" type="text/css" href="public/stylesheets/sq-payment.css">
</head>
<body>
<form class="payment-form" id="fast-checkout">
<div class="wrapper">
<div id="apple-pay-button" alt="apple-pay" type="button"></div>
<div id="google-pay-button" alt="google-pay" type="button"></div>
<div class="border">
<span>OR</span>
</div>
<div id="ach-wrapper">
<label for="ach-account-holder-name">Full Name</label>
<input id="ach-account-holder-name" type="text" placeholder="Jane Doe" name="ach-account-holder-name" autocomplete="name" /><span id="ach-message"></span><button id="ach-button" type="button">Pay with Bank Account</button>
<div class="border">
<span>OR</span>
</div>
</div>
<div id="card-container"></div><button id="card-button" type="button">Pay with Card</button>
<span id="payment-flow-message"></span>
</div>
</form>
<script type="text/javascript" src="public/js/sq-ach.js"></script>
<script type="text/javascript" src="public/js/sq-apple-pay.js"></script>
<script type="text/javascript" src="public/js/sq-card-pay.js"></script>
<script type="text/javascript" src="public/js/sq-google-pay.js"></script>
<script type="text/javascript" src="public/js/sq-payment-flow.js"></script>
</body>
</html>
