送金先や金額がプリセットされたKyash二次元バーコードの作り方
この記事は Kyash Advent Calendar 2020 1日目の記事です。
Kyashアプリでは、以下のようにユーザーの二次元バーコードを読み取って送金や請求を行うことができます。
| この二次元バーコードを読み込むと | ユーザーの画面が表示される |
|---|---|
 |
この仕組みを使って、オフィスでの飲食物や即売会での同人誌の決済の際に二次元バーコードを設置しておくといった形で利用されています。
仕組み自体は二次元バーコード化されたDeeplinkをアプリ内で判別してユーザーの画面を表示しているだけです。実は送金・請求画面を直接開いたり、金額やメッセージをプリセットする仕組みも用意されています。
コロナの状況で利用の機会が減っていて今さら感あるかもしれませんが、今回はこの仕組みについて説明しようと思います。
パラメータ
指定できるパラメータは下記の3つです。
| パラメータ | 説明 |
|---|---|
| action | send (送金) or request (請求) |
| amount | 送金/請求する金額 |
| message | 送金/請求時のメッセージ |
これらのパラメータを組み合わせたDeeplinkの例をいくつか紹介します。
1. kyash://qr/u/40063195108647819
パラメータなし。
| 二次元バーコード | 遷移先画面 |
|---|---|
| |
2. kyash://qr/u/40063195108647819?action=request
請求画面に遷移するパラメータあり。
| 二次元バーコード | 遷移先画面 |
|---|---|
 |
3. kyash://qr/u/40063195108647819?action=send&amount=39&message=thanks!
金額、メッセージつきの送金画面に遷移するパラメータあり*1。
| 二次元バーコード | 遷移先画面 |
|---|---|
 |
 |
ジェネレータ
Vue.js + TypeScriptで簡単な何かを作ってみたいと思っていたのでジェネレータを作りました。
https://kyash-barcode-generator.netlify.app/
Kyashアプリからダウンロードした二次元バーコードを読み込んで*2、action、amount、messageのパラメータを付与して新しい二次元バーコードを作成できます。
コードは https://github.com/konifar/kyash-barcode-generator にあります。Vueにちょろっと触れて面白かったです。不慣れで色々と実装が甘いところがあるので、IssueやPull Requestはお気軽にお願いします。
以上、送金先や金額がプリセットされたKyashの二次元バーコードの作り方の紹介でした。
ちなみに下記は自分に請求する画面を開く二次元バーコードです。もしよかったら実験としてKyashアプリから読み込んでみてください。
