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

Squareではスマートフォン向けにPOSレジアプリを提供しています。このアプリを使うことで手軽にレジ機能が使え、さらにクレジットカード決済も利用できるようになります。数種類の商品を素早く販売するキオスクアプリに使ったり、その場で金額を入力して決済してもらうことができます。

![ui-PaymentActivity-08262017235356.png](https://qiita-image-store.s3.amazonaws.com/0/197026/0093f80d-945e-4bf8-d008-ee05cc8f0cee.png)

このPOSレジアプリにはAPIがあります。POS APIというのですが、これを使うと自分の作ったスマートフォンアプリとPOSレジアプリを連携させられます。URLスキームを使ったアプリ連携機能を使うのですが、これは何もスマートフォンアプリだけでなく、Webサイトでも利用できます。

今回はこのWebサイトにおけるPOSレジ機能の利用法について紹介します。[前回のiOS](http://qiita.com/goofmint/items/d33bb052a565f6a5586c)に続いて、今回はAndroidでの実装方法です。

## コードについて

今回のコードは[goofmint/Square_Web_POS_API_Demo](https://github.com/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レジアプリが呼び出されて決済画面になります。

![browser-ChromeTabbedActivity-08262017235334.png](https://qiita-image-store.s3.amazonaws.com/0/197026/858574d1-0249-b293-0c9e-b303b259a429.png)

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

<img width="1353" alt="Screenshot_ 2017-08-26 17.56.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/197026/49e4960c-29df-e7d0-8a7f-08649e7c747b.png">

コールバックされた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](https://docs.connect.squareup.com/articles/web-api-android)