chirgwin/square_api.html

## square_api.html
<!DOCTYPE html>
<html>
<head>
<title>Square API example</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=0;"/>
<style type="text/css">
body
{
    font-family: Helvetica, Verdana, sans-serif;
}

input
{
    width: 160px;
    margin: 5px;
}

</style>
<script type="text/javascript">

function handleOnLoad()
{
    //see if there's a square callback param
    var squareResponse = getQueryVar("square_status");
    if (squareResponse)
    {
        //if so, alert user with the response
        alert ("Square transaction was " + squareResponse);
    }
}

// process a square payment
function paySquare()
{
    if (!Square.isSupported())
    {
        alert("Square is not supported on your device.");
        return false;
    }

    //return to this page
    var callbackUrl = document.location.href;
    if (document.location.href.indexOf("?") > 0)
    {
        callbackUrl = callbackUrl.substring(0, callbackUrl.indexOf("?"));
    }

    var amount = parseFloat(document.getElementById("amount").value);
    var description = document.getElementById("description").value;

    var square = new Square();
    squareOptions = {
      amount: amount,
      currency: "USD",
      description: description,
      callback: callbackUrl // this page
    };

    return square.pay(squareOptions);
}

// Square class
function Square()
{
}

Square.SCHEME = "square";
Square.ACTION_PAY = "pay";

// method for sending a payment to square application
Square.prototype.pay = function(params)
{
    var url = Square.SCHEME + "://" + Square.ACTION_PAY;
    url = formUrl(url, params);
    try
    {
        window.location = url;
    }
    catch(e)
    {
        alert("There was an error processing the square payment.");
        clearOrder();
        return false;
    }
    return true;
}

//static method for determining if square
//application is supported on the client
Square.isSupported = function()
{
    //only test for iOS for now
    return isIOSClient();
}
// query string utils

// create query string
function formUrl(url, params)
{
	var i = 0;
	for (var key in params)
	{
		if (i == 0)
		{
			url += "?";
		}
        else
        {
            url += "&";
        }
		url += key + "=" + params[key];
		i++;
	}
	return url;
}

// get the value of a single key from the questy string
function getQueryVar(variable)
{
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i < vars.length; i++)
  {
    var pair = vars[i].split("=");
    if (pair[0] == variable)
    {
      return pair[1];
    }
  }
  return false;
}

//test if this is an iOS device
function isIOSClient()
{
	return (navigator.userAgent.indexOf('iPhone') >= 0 || navigator.userAgent.indexOf('iPad') >= 0
			|| navigator.userAgent.indexOf('iPod') >= 0)
}


</script>
</head>
<body onload="handleOnLoad();">
<form method="POST" action="/" onsubmit="return paySquare();">
    <label for="amount">Amount: $</label><input type="text" id="amount">
    <br/>
    <label for="amount">Description: </label><input type="text" id="description" maxlength="100">
    <br/>
    <input type="button" id="squareTestButton" onclick="paySquare();" value="Square Up"/>
</form>
<a href="square://pay?amount=37&currency=USD&description=Testing+Square+API&default_email=some@email.address&default_phone=555-123-1234&callback=http://www.squareup.com/">hardwired square app url</a>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Square API example</title>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=0;"/>
	<style type="text/css">
	body
	{
	font-family: Helvetica, Verdana, sans-serif;
	}

	input
	{
	width: 160px;
	margin: 5px;
	}

	</style>
	<script type="text/javascript">

	function handleOnLoad()
	{
	//see if there's a square callback param
	var squareResponse = getQueryVar("square_status");
	if (squareResponse)
	{
	//if so, alert user with the response
	alert ("Square transaction was " + squareResponse);
	}
	}

	// process a square payment
	function paySquare()
	{
	if (!Square.isSupported())
	{
	alert("Square is not supported on your device.");
	return false;
	}

	//return to this page
	var callbackUrl = document.location.href;
	if (document.location.href.indexOf("?") > 0)
	{
	callbackUrl = callbackUrl.substring(0, callbackUrl.indexOf("?"));
	}

	var amount = parseFloat(document.getElementById("amount").value);
	var description = document.getElementById("description").value;

	var square = new Square();
	squareOptions = {
	amount: amount,
	currency: "USD",
	description: description,
	callback: callbackUrl // this page
	};

	return square.pay(squareOptions);
	}

	// Square class
	function Square()
	{
	}

	Square.SCHEME = "square";
	Square.ACTION_PAY = "pay";

	// method for sending a payment to square application
	Square.prototype.pay = function(params)
	{
	var url = Square.SCHEME + "://" + Square.ACTION_PAY;
	url = formUrl(url, params);
	try
	{
	window.location = url;
	}
	catch(e)
	{
	alert("There was an error processing the square payment.");
	clearOrder();
	return false;
	}
	return true;
	}

	//static method for determining if square
	//application is supported on the client
	Square.isSupported = function()
	{
	//only test for iOS for now
	return isIOSClient();
	}
	// query string utils

	// create query string
	function formUrl(url, params)
	{
	var i = 0;
	for (var key in params)
	{
	if (i == 0)
	{
	url += "?";
	}
	else
	{
	url += "&";
	}
	url += key + "=" + params[key];
	i++;
	}
	return url;
	}

	// get the value of a single key from the questy string
	function getQueryVar(variable)
	{
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i < vars.length; i++)
	{
	var pair = vars[i].split("=");
	if (pair[0] == variable)
	{
	return pair[1];
	}
	}
	return false;
	}

	//test if this is an iOS device
	function isIOSClient()
	{
	return (navigator.userAgent.indexOf('iPhone') >= 0 \|\| navigator.userAgent.indexOf('iPad') >= 0
	\|\| navigator.userAgent.indexOf('iPod') >= 0)
	}


	</script>
	</head>
	<body onload="handleOnLoad();">
	<form method="POST" action="/" onsubmit="return paySquare();">
	<label for="amount">Amount: $</label><input type="text" id="amount">
	<br/>
	<label for="amount">Description: </label><input type="text" id="description" maxlength="100">
	<br/>
	<input type="button" id="squareTestButton" onclick="paySquare();" value="Square Up"/>
	</form>
	<a href="square://pay?amount=37&currency=USD&description=Testing+Square+API&default_email=some@email.address&default_phone=555-123-1234&callback=http://www.squareup.com/">hardwired square app url</a>
	</body>
	</html>