为 Android 和 iOS 构建基于 Web 的销售点
0/5 (0投票)
在这篇文章中，我们将逐步介绍使用 Square 构建您自己的应用程序的必要步骤。
使用 Square，您可以构建一个 Web 应用程序，该应用程序可以切换到 Square 销售点应用程序以接受面对面付款。最棒的是，您可以同时在 Android 和 iOS 上执行此操作，因此可以构建一个基于 Web 的销售点系统，该系统可以利用 Square 的硬件在 iOS 和 Android 上接受面对面付款。在这篇文章中，我们将逐步介绍构建您自己的应用程序的必要步骤。
为了创建一个跨平台的 Web 应用程序，我们需要逻辑来检测目标设备运行的平台。准确地做到这一点可能非常困难，并且有整个库专门用于解析用户代理。为了使此示例保持简单，我们将使用 javascript 解决方案，该解决方案大致在此Stack Overflow 答案中概述，该解决方案对用户代理使用正则表达式。
var userAgent = navigator.userAgent || navigator.vendor;
if (/android/i.test(userAgent)) {
return "Android";
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "iOS";
}
return "unknown OS"
如果用户使用的是 Android 或 iOS 设备，那么我们将显示一个按钮，单击该按钮将切换到原生的 Square 销售点应用程序。对于桌面和其他平台，我们将显示一个虚拟的电子商务表单，供用户输入其卡信息。
开始之前
如果您还没有创建 Square 帐户或注册应用程序以获取 API 凭据，请按照 Square API 的此入门指南中的步骤 1 和 2 进行操作。您需要您的application id 并填写您的callback url。
构建 URL
您可以通过链接启动切换到原生 Square 应用程序，就像导航到 Web 上的任何其他页面一样。请记住，链接的外观将与您通常放在href中的链接略有不同。
**iOS：**基本结构是使用这样的链接<a href="square-commerce-v1://payment/create?data=PARAMETERS">，其中PARAMETERS 是一个编码的 JSON 对象，其中包含有关销售金额、Square 应用程序应允许哪些支付方式等信息。您的PARAMETERS 可能如下所示
{
"amount_money": {
"amount": 500,
"currency_code": "USD"
},
"callback_url": "myapp-url-scheme://payment-complete",
"client_id": "MY_APPLICATION_ID",
"version": "1.2",
"notes": "Rental fee",
"options": {
"supported_tender_types": [
"CREDIT_CARD",
"CASH",
"SQUARE_GIFT_CARD",
]
}
}
请务必记住使用像encodeURIComponent()这样的函数对其进行编码，以便您的最终 URL 看起来像这样
<a href="square-commerce-v1://payment/create?data=%7B%22amount_money%22%3A%7B%22amount%22%3A500%2C%22currency_code%22%3A%22USD%22%7D%2C%22callback_url%22%3A%22myapp-url-scheme%3A%2F%2Fpayment-complete%22%2C%22client_id%22%3A%22MY_APPLICATION_ID%22%2C%22version%22%3A%221.2%22%2C%22notes%22%3A%22Rental%20fee%22%2C%22options%22%3A%7B%22supported_tender_types%22%3A%5B%22CREDIT_CARD%22%2C%22CASH%22%2C%22SQUARE_GIFT_CARD%22%5D%7D%7D">Click on me to Check out!</a>
您可以在iOS 指南中使用销售点 API了解更多选项。
**Android：**Android 链接看起来非常不同，但如果您以前使用过 Android，则应该比较熟悉。您只需将您的意图直接放入链接中即可
<a href="intent:#Intent;action=com.squareup.register.action.CHARGE;package=com.squareup;S.browser_fallback_url=https://my.website.com/index.html;S.com.squareup.register.WEB_CALLBACK_URI=https://my.website.com/index.html;S.com.squareup.register.CLIENT_ID=sq0ids-yOurCLieNtId;S.com.squareup.register.API_VERSION=v1.3;i.com.squareup.register.TOTAL_AMOUNT=100;S.com.squareup.register.CURRENCY_CODE=USD;S.com.squareup.register.TENDER_TYPES=com.squareup.register.TENDER_CARD,com.squareup.register.TENDER_CARD_ON_FILE,com.squareup.register.TENDER_CASH,com.squareup.register.TENDER_OTHER;end">Buy Now!</a>
所有交易信息都添加到不同的参数中。请参阅Android 的 Web API中的参考。
整合所有内容
现在，我们有了粗略检测操作系统以及处理 iOS、Android 和 Web 付款的逻辑。我们其余的代码由将所有内容粘合在一起的 HTML 和 javascript 组成。别忘了，测试代码的一种简单方法是使用ngrok 将您的开发环境公开到 URL。
如果您对此代码或使用销售点 Web API 有任何疑问，请阅读文档中的更多信息，或留下评论，或在 Twitter 上联系我们（@SquareDev）。并查看我们在下面创建的示例中的最终代码！
<!DOCTYPE html>
<html>
<head>
<title>Square Register API Web example</title>
<style type="text/css">
body {
background-color: #DDD;
margin: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h1,
a {
margin-left: 25%
}
button {
display: none;
width: 100%;
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #ffffff;
font-size: 70px;
background: #3498db;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
input {
border: 1px solid #BEBEBE;
padding: 7px;
margin: 0px;
outline: none;
width: 50%;
}
label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
text-align: left;
margin-left: 25%
}
span {
font-size: 20px
}
#form {
text-align: center;
}
</style>
</head>
<body>
<h1> Best Example Store</h1>
<br>
<a id="chargeButton">
</a>
<div id="form">
<!-- This isn't a real e-commerece form, but it could be! -->
<!-- Learn more about accepting payments online here: https://docs.connect.squareup.com/articles/adding-payment-form/ -->
<label>Card Number</label>
<input type="text" placeholder="This is a fake form!">
<label>CVV</label>
<input type="text" name="">
<label>Expiration Date</label>
<input type="text" name="">
<label>Postal Code</label>
<input type="text" name="">
</div>
<script>
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var callbackUrl = 'https://locahost'
var clientId = 'CLIENT_ID'
var iOSparameters = {
"amount_money": {
"amount": 100,
"currency_code": "USD"
},
"callback_url": callbackUrl,
"client_id": clientId,
"version": "1.1",
"notes": "totall optional note",
"options": {
"supported_tender_types": ["CREDIT_CARD", "CASH"]
}
}
var androidIntent = "intent:#Intent;action=com.squareup.register.action.CHARGE;package=com.squareup;S.browser_fallback_url=https://my.website.com/index.html;S.com.squareup.register.WEB_CALLBACK_URI=" + callbackUrl + ";S.com.squareup.register.CLIENT_ID=" + clientId + ";S.com.squareup.register.API_VERSION=v1.3;i.com.squareup.register.TOTAL_AMOUNT=100;S.com.squareup.register.CURRENCY_CODE=USD;S.com.squareup.register.TENDER_TYPES=com.squareup.register.TENDER_CARD,com.squareup.register.TENDER_CASH;end"
if (/windows phone/i.test(userAgent)) {
//There isn't a Square Register app for Windows Phone, so do nothing and leave the form.
}
if (/android/i.test(userAgent)) {
//For Android, we'd want to hide form, and display the proper link to the Register app.
console.log("Looks like you are on an android device!")
document.getElementById('form').style.display = 'none';
document.getElementById('chargeButton').style.display = 'inline-block';
document.getElementById('chargeButton').innerHTML = "Charge with Square Register (Android)";
document.getElementById('chargeButton').href = androidIntent;
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
//For Android, we'd want to hide form, and display the proper link to the Register app.
console.log("Looks like you are on an iOS device!")
document.getElementById('form').style.display = 'none';
document.getElementById('chargeButton').style.display = 'inline-block';
document.getElementById('chargeButton').innerHTML = "Charge with Square Register (iOS)";
document.getElementById('chargeButton').href = 'square-commerce-v1://payment/create?data=' + encodeURIComponent(JSON.stringify(iOSparameters))
}
</script>
</body>
</html>