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 = {
  // 金額に関する情報
  "amount_money": {
    "amount" : "100",
    "currency_code" : "JPY"
  },
  // POSレジアプリがコールバックするURL
  "callback_url" : 'https://example.com/callback',
  // アプリケーションID（自分のものに置き換えてください）
  "client_id" : "YOUR_APPLICATION_ID",
  // バージョン（現在は1.3固定です）
  "version": "1.3",
  // 取引に関する説明書き
  "notes": "取引に関する説明書き",
  "options" : {
    // 利用できる決済方法
    "supported_tender_types" : [
      "CREDIT_CARD",      // クレジットカード
      "CASH",             // 現金
      "OTHER",            // その他
      "SQUARE_GIFT_CARD", // ギフトカード
      "CARD_ON_FILE"      // オフライン決済
    ]
  }
};
// URIの生成
var uri = "square-commerce-v1://payment/create?data=" + encodeURIComponent(JSON.stringify(dataParameter));
location.href = uri;

金額は数値とともに通貨単位を指定する必要があります。さらにコールバックURLは自分のサイトのものを、アプリケーションIDも自分のものに置き換えてください。決済手段は提供できるものを指定してください。

呼び出すURIですが、スキーマは square-commerce-v1 固定です。パスは /payment/create で、 data パラメータに対して各種設定を指定します。

実行してみる

実行すると Safari からPOSレジアプリが呼び出されて決済画面になります。

決済が完了すると、再びSafariが呼び出されます。この時のURLは設定で指定しているコールバックURLになります。なお、このコールバックURLはSquareの管理画面であらかじめ設定しておかなければなりません。

コールバックされたURLはGETリクエストになります。そしてdataパラメータを持っています。

このdataパラメータで指定される文字列はJSONオブジェクトになります。例えばJavaScript上で処理を行う場合としては、次のように処理できるでしょう。

var param = JSON.parse(
  decodeURIComponent(
    location.search.replace('?data=', '')
  ));

こうして取得できるデータとしては下記になります。

パラメータ	内容
status	結果。正常終了の場合はokという文字です
transaction_id	トランザクションID。ユニークなIDです
client_transaction_id	クライアントトランザクションID。オフライン決済用です

このような手順でiOSのSafari上でPOSレジアプリによる決済を提供できるようになります。なお、Chromeなどのサードパーティーのブラウザでも利用できます。

実店舗や移動式店舗などと連動してWebサイト上で物販する際などにぜひ使ってみてください。カフェなどでアプリを作るのは難しくとも、HTMLであればそれほど手間をかけずに作れるのではないでしょうか。

Square Connect API Documentation