JPYCとxWINのQR コード決済アプリを作ってみた

サマリー

• 暗号通貨の決済はいろいろと手間
• リアル店舗で暗号通貨が普及するためには決済の簡易化が必要
• iPhone のカメラで読み込んで決済ボタンを押すだけで、指定金額の JPYC を Polygon で決済できる QR コードを表示する web アプリを作ってみた
• xWIN版もあるよ

JPYC で暗号通貨は身近になった

これまでの暗号通貨は手数料の高さや価格変動リスクなどから日常的な決済手段としてはあまり普及してきませんでした。

手数料のほぼ無視できる Polygon network が登場したこと、プリペイド式日本円ステーブルコインである JPYC が登場したことで、日本でも暗号通貨がぐっと身近になってきました。

暗号通貨の決済方法には課題が残る

一方、様々なネットワークや数々のコインが存在する暗号通貨の決済は決して簡単ではありません。Metamask などのウォレットアプリから ERC20 トークンを送金する際には、ネットワークの選択、送付先のアドレスの入力、送付額の入力などいくつかのステップが存在します。このため、日常での決済、とくに、店頭でこのステップを踏むのはあまり現実的ではありません。

これまでも、送金先アドレスについては、QR コードに送金先アドレスを埋め込む方法は存在し利用されてきました。しかし実際的には手数料がほぼ無視できる Polygon network で JPYC を送金するには次のステップが必要であり手間がかかっていました。

1. スマートフォンで Metamask などのアプリを開く
2. Network を Polygon(Matic)に変更
3. アセットから JPYC を選択
4. 送金先アドレスが埋め込まれた QR コードの読み込み
5. 送金額の入力
6. 送金ボタンを押す

手間が多すぎると思いませんか？ユーザーがこれだけの作業をするということは、それだけミスも発生しやすく、確認作業も必要です。

解決策：実は QR コードに Network、コイン、金額の情報を埋め込むことができる

上記の問題があり、QR コードに魅力を感じていなかったのですが、EIP を眺めていたところ、Network（Polygon）、コインの種類（JPYC のコントラクトアドレス）、送金額を埋め込むことができることがわかりました。

• EIP-681 URL Format for Transaction Requests

この内容を埋め込むには次のようなフォーマットの文字列を QR コードに埋め込みます。

ethereum:pay-[コントラクトアドレス]@[チェインID]/transfer?address=[送付先]&uint256=[送る金額]

ここでは Polygon (Matic)のネットワークを使って、JPYC を私のウォレットに 3JPYC 投げる例を書きます。

title	example
JPYC contract address	0x6ae7dfc73e0dde2aa99ac063dcf7e8a63265108c
Polygon Chain ID	137
Destination Address	0xafd382aCC893127D6fbb197b87453070Fc14D43d
Amount	3e18

なお、送金額は atomic unit (wei)で記載します。3e18 とは 3 x 10^18 を意味します。（ガス代の指定などもできますが、ここでは省略します。）

これらをフォーマットに従って書くと次のようになります。

ethereum:pay-0x6ae7dfc73e0dde2aa99ac063dcf7e8a63265108c@137/transfer?address=0x330668C9EF59dD4F3b9b32EE978719Ee756D4b44&uint256=3e18

こうしてできた ”URL” を QR コードに埋め込み、iPhone の標準カメラアプリや Metamask で読み込むと Metamask が上の情報を読み込み、ネットワークの変更やコインを選択してくれます。

そう、なんと、iPhone の標準カメラアプリで読み込ませると、自動で Metamask が起動し、上記の情報を取り込んでくれます。

QR コードをスキャンすれば、あとは画面の内容をチェックして送金ボタンを押すだけです。

解決策の実装

この QR コードでの決済方法を思いついた当初は、店頭にあるクレジットカード決済端末のようなものを考えていました。raspberry pi にタッチ液晶をつければ安価に作れると考えたからです。

しかし、よくよく考えてみると最近では決済端末用に iPhone や iPad などを使っているケースも多くあります。また、スマートフォンは広く普及しており、場合によっては、お古のスマートフォンが余っていることもあります。これを活用すれば、決済端末費用を抑えることができます。

そこで、簡単な web アプリで実装することにしました。これならブラウザさえ使えれば、どんな端末でも実現できます。

Javascript で QR コードを描く

web アプリの運用コストも抑えるために Javascript で実装しました。

（vue とか最近のフレームワークには追いつけていないので、オールドスタイルです。本職の方ならもっと素敵な web アプリを作ることができると思います。）

• QRcode.js
• jquery
• bootstrap

結果

下記のサイトで動作する web アプリを公開しました。半日弱で作ったので、いろいろ雑ですが、時間を見つけて改修していきます。

• JPYC版
• xWIN版 2021年8月13日追記

Readme

私が想定している使用スタイルは店員さんが金額を入力して QR コードを生成するようなものです。生成された QR コードをお客さんが Metamask などが入ったスマートフォンのカメラで読み取って決済します。

1. 店員さんがお店のスマートフォンなどで金額を入力し、QR コードを生成
2. 支払者がスマートフォンのカメラで QR コードを読み込む
3. 支払者が送金ボタンを押す

このように６ステップあった支払者の手順が２ステップまで減りました。これぐらい単純化されると（すくなくとも私は）実用に近づいたと思います。

なお、Readme に記載しておりますが、送付先アドレスはページトップのタイトルの右にある歯車マークを押すと指定できます。アドレスはブラウザの localstrage に保存されますので、次回以降は再設定不要です。web3.js を使えばもっと楽みたいなので、今後対応します。

今後の課題など

今回作成したような QR コードのソリューションを使えば、店舗側が暗号通貨を導入するハードルは大きく下がると思います。一方でまだまだ次のような課題が残っています。

• 今のウォレット（Metamask）には line pay や paypay ほどの手軽さはなく、超ライトユーザーの導入ハードルが高い
  • Metamask なにそれ
  • 入金時のアドレス？ネットワーク？なにそれ？DAI?Matic?ETH?
• JPYC とは別に gas 代として MATIC が必要であり、ライトユーザーには難しい
• 着金が確認できるまで少しラグがあり、ユーザーが送金ボタンを押してから店舗側がトランザクションを確認できるまでに時間がかかる
  • 意図的にガス代を低くして drop させることもできるため、トランザクションは確認したい

その他

• github
• xWIN版も作ったよ 2021年8月13日