웹사이트에서 Square의 POS 계산대 앱 사용(iOS편)

Square는 스마트폰용 POS 계산대 앱을 제공합니다. 이 앱을 사용하면 손쉽게 계산기 기능을 사용할 수 있으며, 신용 카드 결제도 사용할 수 있습니다. 여러 종류의 상품을 신속하게 판매하는 키오스크 앱에 사용하거나, 그 자리에서 금액을 입력하여 결제를 받을 수 있습니다.



이 POS 계산대 앱에는 API가 있습니다. POS API라고 합니다만, 이것을 사용하면 자신이 만든 스마트폰 앱과 POS 레지 앱을 연계시킬 수 있습니다. URL 체계를 사용하는 앱 연동 기능을 사용하지만, 이는 스마트폰 앱뿐만 아니라 웹사이트에서도 사용할 수 있습니다.

이번은 이 웹 사이트에서의 POS 레지 기능의 이용법에 대해 소개합니다. 우선은 iOS에서의 구현 방법입니다. Android에서의 구현은 이쪽을 참고해 주세요 .

코드 정보

이 코드는 goofmint/Square_Web_POS_API_Demo에 업로드되었습니다. 실장시의 참고로 해 주세요. 이 코드는 다음 라이브러리를 사용합니다.

Onsen UI
웹사이트에 쉽게 네이티브 앱라이크한 UI/UX를 구현할 수 있는 라이브러리입니다.

jQuery
DOM 조작용.

모두 필수라는 것은 아니지만, 개발의 용이성을 위해서 이용하고 있습니다.

POS 계산대 앱 호출 정보

이번에는 htps : // 에아 mpぇ. 코m/이라는 사이트에서 결제를 시작하고 결제가 끝난 후 htps : // 에어 mpぇ. 코 m / 굵은 CK이라는 URL을 호출하는 형태로 구현합니다.

우선 웹사이트측에서는 아래와 같은 코드로 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