PWAに決済を入れてみた

PWA内でカード決済を行うと既存のApple PayやAndroid Payなどを通さないで決済できるので、アプリ内課金をしてもAppleに30%手数料を支払うことなく、決済会社への手数料だけで決済を行うことができるようになります。

PWAから決済できる方法をいくつか紹介します。

Payment Request API
Googleが開発しているPayment Request APIを使うことでPWA内でもスムーズに決済を行うことが可能です。

Googleの詳細記事
https://developers.google.com/web/updates/2016/07/payment-request?hl=ja

Payment Request APIはAndroid 向けChromeだけでしか利用することができなく、iOSのPWAではまだ対応していません。

Stripeを使った決済デモ
Stripeはエレガントに実装できる決済サービスです。これまでさまざまな実績があります。

Stripe決済のデモをPWAで作ってみました。
https://payment-demo-b9f1a.firebaseapp.com/

これはStripeのテスト環境を使って実装されていますので、動作確認はできますが実際の決済は行われません。

このURLのHome画面から以下を入力してみてください。

カード番号：4242424242424242 (4242を4回)
有効年月：クリックして年月を選ぶ (なんでもいい)
CVC: 333 (3桁の数字であればなんでもいい)

この後「カード登録」をクリックすると以下の様なアラートが表示されます。

「カード登録完了」の下にあるtok_で始まる値はStripeのtokenでこれを内部的に保存しておけばカード番号無しで決済を行う事ができます。

あと「番号決済」ページは番号で決済できる機能のデモです。

「決済番号」の所に1234とか適当に数字入れて「これで決済」をクリックすると決済を進めることができます。

この様なフローで決済が可能になることが分かりました。

1. お店が注文に紐付いた決済番号をお店用PWAで発行
2. 決済番号を購入者に渡す。メールで送ってもいいし、アプリその場で見せてもいい。
3. 購入者は決済番号を決済用PWA内に入力して決済内容を確認して決済完了

決済番号で決済をすることで一度アプリにカードを登録しておけば、決済の際は特にカードを持参していなくても決済が可能になります。

技術的には可能なんですが、ここまで簡単だと法律的にどうなんかなとちょっと心配してしまいますが…

また登録したカードに定期購読をくっつけれるので、毎月980円を自動的に決済みたいな事をすることも可能です。

こうやってPWAでも気軽に決済はできますので、これからのいろんな応用シーンが楽しみですね。