Webベースのレジスターに簡単にクレジットカード決済機能をPaypalHereでつけてみた

どうもみなさん2014年お正月いかがおすごしですか？
Webシステム屋はお正月は、とても良い勉強期間だったりなんかしちゃったりします。
この期間私は、PayPalHereを勉強してみました。

---

PayPal Here?

PayPal HereとはiPhoneなどのスマフォやiPadなどのタブレット端末に、
専用のカードリーダーをつけることで、専用端末のレンタルをすることなく、
クレジットカード決済を導入することができるものです。
　
この他のサービスとして、

• 楽天スマートペイ
• square
• coiney

などがあります。
　
通常クレジットカード決済専用端末を導入するには
数週間の審査と、月額利用料5,000円程度負担しなければなりません。
スマフォ決済であれば、この審査は簡単に、かつランニングの負担は軽くなります。
　
専用端末が悪いような言い方になってしまうので、フォローします。
専用端末のいいところは、
月当たりの決済額が大きくなるごとに決済手数料がやすくなったり、
オンライン決済と合わせて契約すると別々に契約するより負担が軽くなったりしますし、
専用端末を貸し出していただけるサービス提供業者は、
私の経験上、総じてサポート体制がかなり充実しています。
　
専用端末を導入するか、スマフォ決済を導入するかは、
目指す店舗の大きさや、サービスの内容をベースに、
しっかり比較することをおすすめします。

---

Webベースのレジスター？

東日本大震災の際にユビレジが仮設の店舗で非常に役に立ったと話題になって依頼、
タブレット端末をPOSやキャッシュレジスターにするサービスが、たくさん展開されています。
日本では、タブレット端末によるPOSが大盛況ですが、
海外では、この他WEBベースのPOSソリューションがたくさんあります。
　

• PHP POS

　
などが有名ですが、大小かなりの数のソリューションがあります。
POSは複数拠点で利用するようなものでなければ、
仕組みは非常に単純なので、つくろうと思えば、
　

• キャッシュドロワ制御
• レシート印刷
• バーコードリーダー制御
• クレジットカード決済

　
を除いては、比較的簡単につくることができます。
　
バーコードリーダー機能については、
USB接続のものはバーコードリーダー自体がキーボードとして動いてくれます。
　
レシート印刷については、
一般的なレシートでなくB5などで印刷してOKなら印刷用CSSの適用で解決できますね。
　
キャッシュドロワについては、
Windows利用前提で、USB接続のものであれば、
COMポートから決まった信号を送れば良いので、
実はそれほど難しくないです。
　

---

クレジットカード決済

ECサイトなどで利用するオンラインのWEB決済であれば、
クレジットカード決済代行会社と契約することで、
規定のWEBインターフェイスに、クレジットカード番号をPOSTなどすることで、
比較的簡単に導入することができます。
　
それならWEBベースのPOSの場合も、決済代行会社と契約すればよいのじゃないか？
とお思いかもしれませんが、
日本国内の代行会社の審査は非常に厳しく、
WEBベースのPOSの利用のために、
決済代行会社との契約のための審査が通る可能性は、かなり少ないです。
　
というのも、POSなどで動作をさせるには「PA-DSS」などの
クレジットカード決済専用のセキュリティ基準に、
POS端末そのものを対応させる必要があり、
この基準に対応していなければ、
クレジットカード各社が利用を許可することはまずないからです。
仮に、審査が通ったとしても、事故などに関して、
全責任をPOS運用者あるいはPOS運用業者が負うことになります。
　
前述のPaypalHereなどスマフォクレジットカード決済サービスや、
専用端末などは、この基準に従った設計がなされています。
　

---

それなら話は早い！導入だ！

ということで、スマフォクレジット決済を導入だ！
と、思ったらちょっと早計でした。
海外であれば、こういったサービスにWEB APIは付き物なのですが、
前述のとおり、日本では、法的な基準や、審査が非常に厳しい国ですので、
海外でスマフォ決済対応しているサービスでも、
日本国内のみAPI提供をしていなかったり、
十分な説明がされていないケースがほとんどです。
　
PayPalHereに関しても同様で、APIはあるようですが、
公式に十分な説明がなされていないものをつかうのは、
実際にお金のやりとりが行われるサービスで利用するのは
危険としか言いようがありません。
　
さて、どうしたものか…
　
とおもっていたら、PayPal Here にはURLSchemeが搭載されていることを知りました！
これで簡単にWEBベースのPOSにクレジットカード決済機能が導入できます。
　
URLSchemeとは
「アプリケーション名://メソッド?パラメータ」
というようなURLを実行することで、
端末内のアプリケーション制御ができる機能です。
これならjavascriptなどで簡単に作れるじゃないか！！

---

ってなわけで、作ってみました。

言いたいことはほぼこのクラスの中に入っています。

function　paypal_here_helper(){
	
	//商品データ保存用
	this._items = [];
	
	//設定
	this._params = {};
	
	//コンストラクタ
	this.initialize.apply(this, arguments);
	
}

paypal_here_helper.prototype = {
	
	
	//コンストラクタ
	initialize: function( params ){
		this._params['callback'] = params['callback'];
		this._params['merchantEmail'] = params['merchantEmail'];
	},
	
	//商品追加
	add_item: function( itemname, price, quantity ){
		
		var item = {};
		item['name'] = itemname;
		item['description'] = itemname;
		item['quantity'] = quantity;
		item['unitPrice'] = price;
		item['taxRate'] = '0.0';
		item['taxName'] = 'Tax';
		
		
		this._items.push( item );
		
	},
	
	
	//支払い実行
	goto_here: function(){
		
		//設定
		var invoice = {};
		invoice['itemList'] = {};
		invoice['itemList']['item'] = this._items;
		invoice['paymentTerms'] = 'DueOnReceipt';
		invoice['currencyCode'] = 'JPY';
		invoice['discountPercent'] = '0';
		invoice['merchantEmail'] = this._params['merchantEmail'];
		
		
		//URL生成
		var retUrl = encodeURIComponent(　this._params['callback'] + "?{result}?Type={Type}&InvoiceId={InvoiceId}&Tip={Tip}&Email={Email}&TxId={TxId}");
		var pphereUrl = "paypalhere://takePayment?returnUrl=" + retUrl;
		pphereUrl = pphereUrl + "&accepted=cash,card,paypal"
		pphereUrl = pphereUrl + "&step=choosePayment";
		pphereUrl = pphereUrl + '&invoice=' + encodeURIComponent(JSON.stringify(invoice));
		
		
		
		//ジャンプ
		location.href = pphereUrl;
	}
	
	
	
};

▲このコードをファイルに保存し、HTMLからロード。
あとは、
　

			//初期化
			var phh = new paypal_here_helper({
				
				//コールバックURL
				'callback': return_url,
				
				//店舗メールアドレス
				'merchantEmail': 'parsley-eater@i.softbank.jp'
			});
			
			//商品追加
			phh.add_item( 'コーヒー', 300, 1 );
			phh.add_item( 'サンドイッチ', 450, 1 );
			
			
			//支払い実行
			phh.goto_here();

とjavascriptを実行すればOKです。
　
コールバックは、GETで
　
Type:「CrediCard」←固定
InvoiceId: 支払いID
Tip:？
TxId:トラッキングコード
　
が返ります。
Tipだけ意味がわかりませんでした…「0」が返っているようなのですが…
これを取得し支払い済みとして処理すればOKです。

---

簡単！簡単！！

Javascriptでここまで簡単にできるのはいいですねー。
　
と思うのは早計です。いや、仕組みがつくれるのはいいのですが、
これだけ簡単なので、設計や運用に関しては、
通常より遥かに慎重になる必要はあります。
　
またそもそも、前々からおもっている個人的な意見ですが、
金銭のやりとりが実際に発生するものを、
iPhoneなどを通じて行うことに関して、
小売店やサービス提供業者としての資質に疑問を持つ
消費者は少なくないとおもいます。
ましてや、そのiPhoneが誰かのポケットから出てきたものだとしたら…
　
スタイリッシュだとか、簡単だとか、
そういった理由でスマート決済を利用するのは良くないとおもいます。
　
私のこのコードを利用すること自体は、お好きにして頂いて結構ですが、
しっかり決済サービスは「選択」をしてくださいね。