Squareではスマートフォン向けにPOSレジアプリを提供しています。このアプリを使うことで手軽にレジ機能が使え、さらにクレジットカード決済も利用できるようになります。数種類の商品を素早く販売するキオスクアプリに使ったり、その場で金額を入力して決済してもらうことができます。
このPOSレジアプリにはAPIがあります。POS APIというのですが、これを使うと自分の作ったスマートフォンアプリとPOSレジアプリを連携させられます。URLスキームを使ったアプリ連携機能を使うのですが、これは何もスマートフォンアプリだけでなく、Webサイトでも利用できます。
今回はこのWebサイトにおけるPOSレジ機能の利用法について紹介します。前回のiOSに続いて、今回はAndroidでの実装方法です。
コードについて
今回のコードはgoofmint/Square_Web_POS_API_Demoにアップロードしてあります。実装時の参考にしてください。このコードでは以下のライブラリを使っています。
-
Onsen UI
Webサイトに簡単にネイティブアプリライクなUI/UXを実装できるライブラリです。 -
jQuery
DOM操作用。
いずれも必須という訳ではありませんが、開発のしやすさのために利用しています。
POSレジアプリの呼び出しについて
今回は https://example.com/ というサイトで決済を開始し、決済が終わった後に https://example.com/callback というURLを呼び出す形で実装します。
まずWebサイト側では以下のようなコードでURLを呼び出します。
var dataParameter = {
// インテントのアクション。 com.squareup.pos.action.CHARGE 固定です。
"action": "com.squareup.pos.action.CHARGE",
// POSレジアプリがコールバックするURL
"S.com.squareup.pos.WEB_CALLBACK_URI": 'https://example.com/callback',
// アプリケーションID（自分のものに置き換えてください）
"S.com.squareup.pos.CLIENT_ID": "YOUR_APPLICATION_ID",
// バージョン（現在は1.3固定です）
"S.com.squareup.pos.API_VERSION": 'v1.3',
// 金額に関する情報
"i.com.squareup.pos.TOTAL_AMOUNT": "100",
"S.com.squareup.pos.CURRENCY_CODE": "JPY",
// 利用できる決済方法
"S.com.squareup.pos.TENDER_TYPES": [
"com.squareup.pos.TENDER_CARD",
"com.squareup.pos.TENDER_CARD_ON_FILE",
"com.squareup.pos.TENDER_CASH",
"com.squareup.pos.TENDER_OTHER"
].join(","),
// パッケージ。必ず com.squareup を指定
"package": "com.squareup",
// 取引に関する説明書き
"S.com.squareup.pos.NOTE": "notes for the transaction"
};
params = [];
for (var key in dataParameter) {
params.push(`${key}=${dataParameter[key]}`);
}
var uri = "intent:#Intent;" + params.join(';') + ';end';
location.href = uri;
iOSの場合と違い、各パラメータを;繋ぎで渡すのが特徴です。また、最後に ;end と付けるのを忘れないでください。
実行してみる
実行すると Androidのブラウザ からPOSレジアプリが呼び出されて決済画面になります。
決済が完了すると、再びブラウザが呼び出されます。この時のURLは設定で指定しているコールバックURLになります。なお、このコールバックURLはSquareの管理画面であらかじめ設定しておかなければなりません。
コールバックされたURLはGETリクエストになります。そしてURLの後に ? をつけて、その後にパラメータを持っています。
このパラメータで指定される文字列は決済完了した際の取引IDになります。例えばJavaScript上で処理を行う場合としては、次のようになります。
var param = location.search.replace('?', '').split('=');
こうして取得できるデータとしては下記になります。
| パラメータ | 内容 |
|---|---|
| com.squareup.pos.SERVER_TRANSACTION_ID | トランザクションID。ユニークなIDです |
| com.squareup.pos.CLIENT_TRANSACTION_ID | クライアントトランザクションID。決済によってはクライアント側だけで管理されますので、そのIDです |
エラーの場合はエラー情報が返ってきます。
| パラメータ | 内容 |
|---|---|
| com.squareup.pos.ERROR_CODE | エラーコード |
| com.squareup.pos.ERROR_DESCRIPTION | エラーの説明 |
このような手順でAndroidのブラウザ上でPOSレジアプリによる決済を提供できるようになります。なお、サードパーティーのブラウザでも利用できます。
実店舗や移動式店舗などと連動してWebサイト上で物販する際などにぜひ使ってみてください。カフェなどでアプリを作るのは難しくとも、HTMLであればそれほど手間をかけずに作れるのではないでしょうか。