Go to Qiita Advent Calendar Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@masaru21(ITサポーター MK)

【お客様向け】JPYCのQRコード決済リーダーアプリを開発してみた - 店舗のQRコードをスマホで読み取って決済

Last updated at Posted at 2025-11-27

はじめに

暗号資産（仮想通貨）による決済が注目を集める中、JPYC（JPY Coin） を使ったQRコード決済リーダーアプリを開発しました。このアプリは、お客様がスマートフォンで店舗のQRコードを読み取って決済するシステムです。

📱 このアプリの特徴

  • QRコード読み取り専用: 店舗が提示するQRコードをお客様のスマホで読み取り
  • 多様なウォレット対応: MetaMask、Trust Wallet、HashPort Walletなど主要ウォレットに対応
  • EIP-681準拠: 標準的なEthereumウォレット間で互換性のあるQRコード形式をサポート
  • JPYC初心者向け: HashPort Walletを使えばJPYCに慣れていない方でも簡単利用

🎯 この記事でわかること

  • QRコード決済リーダーアプリの仕組みと使い方
  • JPYCとは何か、なぜ注目されているのか
  • 店舗側・お客様側それぞれのメリット
  • 技術的な実装方法（エンジニア向け）

JPYCとは？なぜ注目されているのか

JPYCの特徴

JPYC（JPY Coin） は、日本円にペッグ（連動）したステーブルコインで、以下の特徴があります：

従来の決済方法との比較

決済方法 手数料 処理速度 国際送金 プログラマビリティ
JPYC決済 約10-50円 数秒-数分 ✅ ✅
クレジットカード 3-4% 即座 ❌ ❌
銀行振込 100-300円 即座-3営業日 ❌ ❌
他社QR決済 3-4% 即座 ❌ ❌

開発したQRコード読み取り決済アプリの概要

お客様向けQRコードリーダーアプリ

今回開発したのは、お客様がスマートフォンで使用するQRコード読み取り専用アプリです。店舗が表示するQRコードをスマホのカメラでスキャンして、JPYC決済を実行します：

主な機能

1. マルチネットワーク対応

2. SBT（ソウルバウンドトークン）対応

SBTは譲渡不可能なNFTで、顧客ロイヤリティプログラムに活用できます：

3. 自動ネットワーク検証

お客様のウォレットと店舗のQRコードのネットワークが異なる場合、自動で検出し、適切なネットワークへの切り替えを促します。

4. EIP-681準拠のQRコード対応

EIP-681（Ethereum URI Scheme） に完全準拠し、MetaMaskをはじめとする主要ウォレットが生成するQRコードを直接読み取ることができます：

対応QRコード形式例:

  • ethereum:0x1234...7890@137?value=1000000000000000000 （MetaMask生成）
  • {"type":"MASARU21_PAYMENT","to":"0x1234...7890"} （独自形式）
  • jpyc:0x1234...7890?amount=100&network=polygon （JPYC専用）

この互換性により、既存のウォレットアプリで生成されたQRコードもそのまま読み取れます。

5. 手動送金機能

QRコード読み取りだけでなく、手動でのJPYC送金も可能です：

手動送金の用途:

  • 個人間送金: 友人・家族への送金
  • アドレス帳機能: よく使うアドレスを保存
  • 定期送金: 毎月の支払いなど
  • 緊急時対応: QRコードが読めない場合の代替手段

6. 位置情報付き決済履歴

決済時の位置情報を記録し、支払い場所の振り返りが簡単にできます：

位置情報履歴の便利な使い方:

  • 家計管理: 「どこで何に使ったか」が一目瞭然
  • 旅行記録: 旅行先での支払い履歴をマップで振り返り
  • 店舗管理: よく利用する店舗の把握
  • 経費精算: 出張時の支払い場所を正確に記録

QRコード読み取り決済アプリの使い方

お客様側：アプリでQRスキャンして決済

ステップ1: アプリアクセスとウォレット接続

お客様が準備するもの

  • スマートフォン: カメラ機能付き
  • ウォット: MetaMask、Trust Wallet、HashPort Walletなど
  • JPYC残高: 決済に必要な金額
  • ガス代: ネットワーク手数料（少額）

決済アプリの体験手順

ステップ2: QRコードスキャンの実際の手順

店舗側で以下のようなQRコードが表示されていることを前提とします：

店舗側QRコード例（JSON形式）:

{
  "type": "MASARU21_PAYMENT",
  "to": "0x1234...7890",
  "amount": "1000",
  "network": "polygon",
  "chainId": 137,
  "contractAddress": "0xE7C3...5253",
  "merchant": {
    "name": "カフェ・サンプル",
    "id": "shop_001",
    "description": "コーヒー代金"
  }
}

EIP-681形式のQRコード例（MetaMask等で生成）:

ethereum:0xE7C3...5253@137?data=0xa9059cbb0000...7890000000...9aca00

ステップ3: アプリでQRスキャンから決済完了まで

お客様の操作手順

  1. アプリアクセス: jpyc-pay.app をスマホで開く
  2. ウォレット接続: MetaMask/Trust Wallet/HashPort Wallet等を選択
  3. QRスキャン: 店舗のQRコードをカメラで読み取り
  4. 決済内容確認: 金額、店舗名、ネットワークを確認
  5. ウォレットで決済承認
  6. 決済完了通知を受信

🎆 HashPort Wallet使用のメリット

  • 日本語サポートで初心者でも安心
  • JPYCの購入から決済までワンストップ
  • 国産ウォレットで信頼性が高い
  • 複雑な設定不要ですぐに使える

お客様側の操作（JPYC初心者の方でも簡単）

  1. 専用アプリでQRスキャン（https://jpyc-pay.app/）
  2. ウォレット選択（MetaMask、Trust Wallet、HashPort Walletなど）
  3. 決済内容確認
  4. ウォレット承認
  5. 決済完了

💡 JPYC初心者の方へ

HashPort Walletを使用すれば、JPYCに慣れていない方でも簡単に決済できます：

  • 日本語対応で分かりやすいUI
  • JPYCの購入から決済まで一つのアプリで完結
  • 複雑な設定不要で初回利用でもスムーズ
  • 国産ウォレットでサポートも安心

ステップ4: 決済確認

リアルタイム確認

  • 決済アプリでの即座の確認通知
  • ウォレット残高の即座の反映

詳細確認

  • ブロックエクスプローラーでの取引履歴確認
  • 会計システムとの連携（将来的に自動化可能）

対応ウォレット詳細

対応ウォレット一覧

ウォレット 接続方法 プラットフォーム 推奨度 特徴
MetaMask ブラウザ拡張 / モバイルアプリ PC / スマートフォン ⭐⭐⭐ 最も普及
Trust Wallet WalletConnect スマートフォン ⭐⭐⭐ 多通貨対応
HashPort Wallet URL接続 / WalletConnect スマートフォン ⭐⭐⭐ JPYC初心者向け
Coinbase Wallet WalletConnect スマートフォン ⭐⭐ 海外で人気

🦊 MetaMask

推奨環境: PC（ブラウザ拡張）、スマートフォン（MetaMaskアプリ）

PC での接続

  1. MetaMask拡張機能をインストール
  2. ウォレットを作成またはインポート
  3. アプリで「ウォレット接続」→「MetaMask」を選択
  4. MetaMask拡張機能で「接続」を承認

スマートフォンでの接続

  1. MetaMaskアプリをダウンロード
  2. ウォレットを作成またはインポート
  3. アプリで「ウォレット接続」を選択
  4. MetaMaskアプリが自動で開き、接続を承認

⚡ HashPort Wallet（JPYC初心者に推奨）

推奨環境: スマートフォン（HashPort Walletアプリ）

🎯 URL接続方法（推奨）

この方法が最も確実に接続できます:

  1. HashPort Walletをダウンロード

  2. ウォレットを作成またはインポート

  3. アプリのURL欄に以下を入力:

    https://jpyc-pay.app

  4. アプリ内ブラウザでサイトが開きます

  5. 「ウォレット接続」ボタンをタップ

  6. HashPortアプリで接続を承認

HashPort Walletの特徴

  • 日本語完全対応: 英語が苦手でも安心して利用
  • JPYC専用機能: JPYCの購入・管理・送金が簡単
  • 初心者フレンドリー: 複雑な設定なしで即座に利用開始
  • 国産サービス: 日本の法規制に準拠した安全性

店舗にとってのメリット

1. コスト削減

2. 新規顧客獲得

  • 暗号資産ユーザー: 技術に敏感な先進的なユーザー層
  • インバウンド観光客: 国境を超えた決済ニーズ
  • 若年層: デジタルネイティブ世代

3. マーケティング活用

SBTを使ったロイヤリティプログラム

QRコード読み取り決済のメリットと使用例

ケーススタディ: 暗号資産カフェでの導入試算（仮定）

店舗想定: 暗号資産決済専門カフェ（仮想的な事例）

  • 平均客単価: 800円（想定）
  • 主な顧客層: IT関係者、暗号資産投資家（想定）

JPYC決済導入効果の試算:

  • 従来の決済手数料: 3-4% → JPYC決済手数料: 約20-50円/回（理論値）
  • コスト削減効果: 既存キャッシュレス決済と比較して大幅減（試算）
  • 技術に敏感な顧客の新規獲得（期待値）
  • ブランド価値向上（「最新技術対応店」として話題化の可能性）

※ この数値は理論的な試算であり、実際の導入効果は店舗の規模、立地、顧客層などにより異なります。

お客様にとってのメリット

詳細なメリット

🏪 QRコード決済

  • 店舗での素早い決済
  • 金額間違いの防止
  • 自動的な店舗情報記録

👥 手動送金機能

  • 個人間での簡単送金
  • アドレス帳での管理
  • QRコードが無い場合の対応

📍 位置情報付き履歴

  • 支払い場所の自動記録
  • 家計簿として活用可能
  • 旅行・出張の記録として便利

実際の決済フロー体験

決済後の便利な機能

📱 即座に確認できること

  • 決済完了通知
  • トランザクションハッシュ
  • 残高更新
  • 支払い場所の地図表示

📊 履歴画面での振り返り

  • 日付・時間・場所・金額の一覧
  • 地図上での支払い場所表示
  • 月別・店舗別の集計
  • CSV出力で家計簿アプリに連携可能

エンジニア向け：技術実装詳細

アーキテクチャ概要

// プロジェクト構成
src/
├── components/          // React コンポーネント
│   ├── QRScannerSimple.tsx    // QRスキャナー
│   ├── PaymentProcessor.tsx   // 決済処理
│   ├── SBTDisplay.tsx         // SBT表示
│   └── NetworkValidation.tsx  // ネットワーク検証
├── utils/               // ユーティリティ
│   ├── network.ts       // ネットワーク管理
│   ├── sbt.ts          // SBT処理
│   └── paymentHistory.ts // 決済履歴
└── contracts/           // スマートコントラクト
    ├── jpyc.ts         // JPYCコントラクト
    └── sbt.ts          // SBTコントラクト

主要技術スタック

QRコード処理の実装例

// QRコード解析処理
export function parseQRCodeData(qrString: string): PaymentQRData | null {
  try {
    // JSON形式の検出
    if (qrString.startsWith('{')) {
      const data = JSON.parse(qrString);
      if (data.type === 'MASARU21_PAYMENT') {
        return {
          type: 'jpyc',
          address: data.to,
          amount: data.amount,
          network: data.network,
          chainId: data.chainId,
          contractAddress: data.contractAddress,
          shopName: data.merchant?.name,
          memo: data.merchant?.description
        };
      }
    }
    
    // EIP-681 URL形式の検出
    if (qrString.startsWith('ethereum:')) {
      return parseEthereumURI(qrString);
    }
    
    return null;
  } catch (error) {
    console.error('QR parsing error:', error);
    return null;
  }
}

EIP-681形式の解析実装

// EIP-681（Ethereum URI Scheme）の解析
function parseEthereumURI(uri: string): PaymentQRData | null {
  // ethereum:0x1234...@137?value=1000000000000000000
  const match = uri.match(/^ethereum:([^@?]+)(@(\d+))?\?(.+)$/);
  if (!match) return null;
  
  const [, address, , chainId, params] = match;
  const urlParams = new URLSearchParams(params);
  
  return {
    type: 'ethereum',
    address: address as `0x${string}`,
    amount: urlParams.get('value') || '0',
    chainId: chainId ? parseInt(chainId) : 1,
    // EIP-681では金額がWei単位なのでJPYC単位に変換
    contractAddress: undefined // ETHの場合はコントラクトアドレス不要
  };
}

ネットワーク自動検証

// ネットワーク検証ロジック
export function validatePaymentNetwork(
  currentChainId: number,
  qrData: PaymentQRData
): NetworkValidationResult {
  const requiredChainId = qrData.chainId;
  
  if (currentChainId === requiredChainId) {
    return {
      isValid: true,
      currentNetwork: getNetworkType(currentChainId),
      requiredNetwork: getNetworkType(requiredChainId),
      mismatch: false,
      message: 'ネットワークが一致しています'
    };
  }
  
  return {
    isValid: false,
    currentNetwork: getNetworkType(currentChainId),
    requiredNetwork: getNetworkType(requiredChainId),
    mismatch: true,
    message: 'ネットワークの切り替えが必要です',
    action: 'switch-network'
  };
}

今後の展望と課題

技術的発展

普及への課題

店舗側

  • 教育コスト: 暗号資産決済の理解促進
  • 技術サポート: 導入・運用支援体制
  • 法的対応: 税務・会計処理の整備

顧客側

  • ウォレット普及: MetaMaskなどの利用拡大
  • JPYC認知度: 一般消費者への浸透
  • ガス代問題: 手数料の最適化

解決策とサポート

ガス代支援サービス

実際に試してみる

デモアプリ体験

ライブデモ: https://jpyc-pay.app/

  1. ウォレット接続: MetaMaskやTrust Wallet、HashPort Walletで接続
  2. テストネットワーク: Sepoliaネットワークを使用
  3. テストJPYC: フォーセットから無料で取得可能
  4. QRスキャン: デモQRコードで決済体験

店舗向け導入支援

導入をご検討の店舗様向けに、以下のサポートを提供しています：

  • 技術相談: システム導入の技術相談
  • QRコード生成: 店舗専用QRコード作成支援
  • 運用サポート: 初期運用でのトラブルシューティング

まとめ

JPYC QRコード決済リーダーアプリは、従来の決済手数料を大幅に削減し、新しい顧客層の獲得、そして革新的なマーケティング手法を可能にする画期的なソリューションです。

主なメリット

  • ✅ お客様視点: シンプルなQRスキャンで即座に決済完了
  • ✅ 店舗視点: 大幅な手数料削減（3-4% → 数十円の固定費）
  • ✅ EIP-681対応: 既存ウォレットとの高い互換性
  • ✅ JPYC初心者対応: HashPort Walletで簡単アクセス
  • ✅ 国際対応: ボーダレスな決済体験

技術的優位性

  • EIP-681準拠: Ethereum標準に完全対応
  • マルチウォレット: MetaMask、Trust Wallet、HashPort Walletなど幅広く対応
  • クロスチェーン: Ethereum、Polygon、Avalancheの複数ネットワーク対応

次のステップ

  1. デモ体験: jpyc-pay.appでQRスキャン決済を実体験
  2. ウォレット準備: HashPort Wallet等でJPYC決済環境を整備
  3. 実店舗利用: 対応店舗でのリアル決済体験

暗号資産決済は確実に普及していく技術です。特にJPYCは日本円連動の安定性と、このようなQRスキャナーアプリの利便性により、従来のキャッシュレス決済を上回る体験を提供できます。新しい時代の決済システムを、ぜひ一度体験してみてください。

🔗 関連リンク

📝 技術記事

  • 本記事は実装可能な技術として、実際に動作するデモアプリケーションと共に公開しています
  • QRコード決済に関するご質問・ご相談は、上記連絡先までお気軽にお問い合わせください
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?