WebサイトでSquareのPOSレジアプリを使う（Android編） #Android

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であればそれほど手間をかけずに作れるのではないでしょうか。

Square Connect API Documentation