【無料公開】JPYC決済とりあえず導入してみたい人向けに簡単に作れる決済サービスつくりました。

※追記12/9
アバランチ版に対応。またmetamaskアプリから直接読み取れるようになりました。更新お願いします。

勝手に作って勝手に使ってください。

JPYCがリリースされて2日目。
公式のパッケージを使ってうずらの販売サイトを作ろうとしたけれど、なかなか思うようにうまくいかなくて悶々としていた。

JPYCの社員の方々も積極的な発信を行なっていたし、なんだったら僕自身もJPYC公式の開発者向けの講習会を受けてきた。

しかし！！！！！
僕はノーコーダーでvide coder。プログラミングなんか四則演算で既に心が折れている人間。そんな僕がつまづいてるのであれば、もっとつまづいている人がいるだろうと思った。

そこで、最低限JPYCを受け取るだけの機能をもった簡単なパッケージがつくれないものかと考えた。その結果できたのがこのアプリだ。

とりあえずQRコードを読み込んでmetamaskのブラウザで開いてもらえれば、個人店のPayPayみたいな感じで自分で金額を入力してもらう。そして、アドレスも間違いもチェーンミスもトークン選択ミスも起させずに決済を成功させる。

そしてこれをプログラミング初心者あるいは未経験者でもAIを使えば簡単に自分用のそれにカスタムできるところまで作り上げた。

今回のnoteはこれの作り方を残りやすい形で残しておくためのnoteである。ブックマークなんてたぶん見返さないだろうしね。

追記
なんと実際に下北沢のカフェで導入されているようです！

使用感のイメージの確認にぜひ！

追記　11/17
アバランチ版にも対応しました！

アプリを使ってみよう！お客さんに見せるようのアプリの使い方。

おそらく、現段階でJPYCを使う人はアーリーアダプター的な人だろうからこのあたりのリテラシーは高いと思われる。なので、受け取り側がここでは気をつけるべきところだけ話しておくことにしよう。

①MetaMaskのQRリーダーで読み取らせないが、MetaMaskのブラウザで開かせる※追記。読み込めるようになりました

実はMetaMaskはブラウザ機能とQRスキャナーの機能を持ち合わせながらQRコードで読み込んだURLをブラウザでは開けないという致命的なバグがある。

もちろん、最新版のメタマスクでやってもこう。

今回のアプリを書き上げたGemini先生によるとこのような回答があった。

本当はmetamaskのQRスキャナーからすぐにアクセスできるとスマートだけど、こればかりは僕の手ではどうしようもない。

さらにchromeのブラウザで開いてもmetamaskが自動で起動しないので、どうしてもmetamaskのブラウザで開く必要がある。

なので、QRスキャンアプリでURLを読み取ってそのURLをmetamaskのブラウザで開くという面倒くさい仕様になってしまった。

metamaskのQRスキャンで直接開くためにはURLの冒頭に”https://metamask.app.link/dapp/”を貼り付ける必要がある
例：https://metamask.app.link/dapp/spectacular-starburst-ef88fd.netlify.app

②相手の入力金額をしっかり確認しよう。

次は金額入力画面。

送金ボタンを押すとすぐに署名画面が開くので、送金ボタンを押す前に金額をきちんと確認する必要がある。

確認してもらってしばらくしたら支払い完了の画面が出てくるのでこれを持って決済完了。

③トランザクション履歴を確認しよう

お客さんのトランザクション画面を確認するのもいいが、こちら側でもトランザクションが成功したらちゃんと自分のmetamaskのトランザクションのところに履歴が残るようになっている。

もし、ここに履歴が残されていなければトランザクションが成功していないことになるので、もう一度やってもらおう。（30秒くらい時間がかかる場合もある。）

なお、何らかの事情でお客さん側からトランザクションをキャンセルした場合にはもう一度画面を読み込んでもらえれば再開できるので、再度接続の署名をしてもらおう。

ここがブロックチェーンの醍醐味だと個人的に思っている。
ちゃんと決済が成功したという記録がちゃんと残る。なので、どちらかが支払いについて異議を申し立てた場合にすぐにわかる。しかも、これほどセキュアな取引にもかかわらず。個人開発者にとって現金化できるJPYCは本当に救世主なのだ。

返金するときには自分のMetaMaskから相手のQRコードを読み込んでJPYCを送金しよう。ガス代に使うpolygonなくて送れない場合には現金を返すか相手にpolgonを恵んでもらうかしよう。

このアプリの作り方

作り方はとっても簡単。

もちろん、パッケージの中にgoogleドキュメントで導入手順を書いているが、ここでも説明しておくことにしよう。

まずは「JPYC支払い用サイト」のフォルダからindex.htmlをダウンロードする。

こんな感じでgemini2.5proにお願いする（無料で使えます。）

なお、もっと確実にやりたい人はCursorのチャットにお願いするのもありです。

色々ピンポイントで修正してくれるすげーやつです。

出来上がったコードをコピーし、コードエディターindex.htmlの中身を全削除して貼り付けて保存。メモ帳でもいけますが、コードエディターアプリがない人は↑のcursorでもできるのでそれを使って編集すればいいでしょう。

あとはマニュアルに書いてあるとおり、Netlifyのアカウントをゲットしてリリースしちゃいましょう。

ステップ2：Netlifyでインターネットに公開

次に、編集した index.html をインターネットに公開し、あなた専用のURLを取得します。

1. Netlifyにログイン: https://app.netlify.com/ にアクセスし、ログインします。

2. 手動デプロイ: 「Projects」（または「Sites」）タブに移動します。

1. ドラッグ＆ドロップ: ステップ1で編集・保存した あなた専用の index.html ファイルを、その点線の枠内にドラッグ＆ドロップします。
   ※netlifyのアップロードはフォルダ単位でのみ受付なので、「JPYC決済サイト」などのフォルダを作ってその中にindex.htmlファイルを入れ込んだ上でフォルダをアップロードしてください

公開完了: 自動的にデプロイ（公開作業）が始まり、数秒で https://[ランダムな名前].netlify.app というURLが発行されます。これがあなたの店専用の決済URLです。

あとはQRのススメとかで「https://metamask.app.link/dapp/」と一緒に自分のURLを貼り付け、QRコード画像（.pngなど）をダウンロード。
例：https://metamask.app.link/dapp/spectacular-starburst-ef88fd.netlify.app

QRコードを作ってpptxにあるQRとさしかえて印刷して設置すれば完成！！！！！

ゼロから作り上げるのには2時間くらいかかったけど、今回のそれは5分もかからなかった！！！！

つくってみた感想

JPYCがきっと使いやすいアプリを作ってくれるだろう！！！と思っていたけど、そういえばJPYCはあくまでアプリ開発をする会社ではなくステーブルコインの発行体なのでそれは彼らの仕事ではなかった。

しかし、彼らが開発者向けの資料を揃えてくれていたおかげでMametaさんの記事を読ませる程度で作れてしまった。

最初はMetaMaskのQRはっつければいいやろ！と思ったものの、それがダメだったため、開発するに至った。

この前日、2日かけて制作中のウズラ販売サイトにJPYC決済を実装したため結構ヘロヘロだったが、「とにかくJPYCはやく使いたいし使わせたい！！！！」という強い意志で作り上げることができた。

もちろん、これがベストなツールではないのは間違いないので、この後の開発者たちがすごいアプリを作り出すことを楽しみにしたい。

↑この人の言うように、
高速処理と大量処理には向いていない。たぶんレジで詰まる。
でも、そういうところにはセミセルフレジがあるはずだ。気にしない。

ブロックチェーンの仕組み上、同時に決済とかもたぶんいけるはず。人的並列処理に期待！そのためのつなぎとしてとりあえずシンプルに使ってみたい！という人はぜひ使って欲しい。

そして、今回の開発に関して良かったなと思った人はぜひJPYCで投げ銭をしてもらえるとありがたい。有志のGiveaway待ってます！

Metamaskの拡張機能が入ったchromeブラウザかmetamaskのブラウザで開いてね！

もちろんnoteでの投げ銭も大歓迎！