Portfolioこのトピックについて
オンラインストアにログインした顧客に対して、POSシステム（スマレジ）からリアルタイムでポイント残高を取得して表示する仕組みを構築しました。
店舗で貯めたポイントをオンラインで確認できることで、オムニチャネル体験を実現しています。
なぜリアルタイム取得が重要なのか
定期バッチ同期の問題点
リアルタイム取得のメリット
- 常に最新のポイント残高を表示
- 顧客からの問い合わせが減少
- 「店舗で使った直後」でも正確に表示
全体アーキテクチャ
ポイント取得フロー
① 顧客がマイページを開く
ログイン後のマイページにアクセス
② 認証トークンを確認
認証済み → 続行 / 未ログイン → ログイン画面へ
③ ポイント取得をリクエスト
自社サーバーにAPI呼び出し
④ Shopify顧客IDから会員番号を抽出
例: gid://shopify/Customer/12345 → 12345
⑤ POSの顧客を検索
会員番号でPOSシステムを検索
⑥ ポイント残高を取得
現在のポイント数、有効期限などを取得
⑦⑧ 結果を返却・表示
フロントエンドに返却し、画面にポイント残高を表示
実現のための3つのポイント
この仕組みを実現するためには、3つの重要な要素があります。
1. ポイント取得の全体フロー
マイページを開いてからポイントが表示されるまでの一連の流れを詳しく解説します。
2. Shopify IDとPOS会員番号のマッピング
オンラインとオフラインで顧客を紐付けるために、Shopify顧客IDをPOSの会員番号として使う方法を解説します。
3. API認証とセキュリティ
ポイント残高は個人情報のため、適切な認証が必要です。セキュリティ設計について解説します。
顧客が見る画面イメージ
表示される情報
最近のポイント履歴
パフォーマンスの考慮
レスポンス時間の目標
待ち時間が長いとUX低下するため、ローディング表示で体感を改善します。
キャッシュの検討
この仕組みがもたらす効果
お客様にとって
- いつでも最新のポイント残高を確認できる
- 店舗で買った直後でもオンラインで正確に表示
- 「ポイントがおかしい」というストレスがない
運営側にとって
- ポイントに関する問い合わせが減少
- データ不整合によるクレームがなくなる
- オムニチャネル体験で顧客満足度向上