オンラインショップで商品を選べるようにする

Silicon Valley Super Ware

2020年9月6日

オンラインショップで商品を選べるようにする

今月は早くも、前回まででWebサービス上でのオンライン決済の仕組みができました。
前回の終わりに触れていますが、今後はより「リアル」なオンライン決済にするための実装を中心にお送りします。

前回までのサンプルのオンライン決済の仕組みは「商品固定」でした。

Webサービスで課金する場合、商品やサービスによって価格は違います。
また、オンラインの教材などの「情報」を売る場合は、支払い後商品をダウンロードできるようにすると、利用者にとって便利なサービスにすることができます。

そうした事を考えながら必要な機能を実装していきます！

決済のAPIを作る

前回まででオンライン決済の流れは理解できたでしょうか？
もう一度復習しておくと

• フロントエンドが決済の「セッション（作成）」をバックエンドに要求
• バックエンドがStripeにセッションをリクエストして情報を取得
• バックエンドがフロントエンドにセッション情報を返信

という流れです。

前回までに作った決済の仕組みは

バックエンドで固定の商品情報を使って決済のリクエストをStripeに送信しています

これをいろいろな商品を決済できるようにする方法は大きく2つの方法があります。

• 商品ごとに別のAPI(URL)を作成して呼び出す
• 商品情報をフロントエンドからリクエスト時にバックエンドに送る

Webサービスで課金対象になる「項目（商品・サービス）」が少ない場合は、最初の方法も一つの選択肢です。実装もデータベースなどは必要なくシンプルに行う事ができます。

しかし、商品が増えると、この方法は余り効率が良くありません。
商品が増えた場合は、商品情報をデータベースで保持して、そこから必要な情報を取得する方法にした方が全体の実装がはるかにシンプルになります。

例えば、データベースのエントリー（商品情報）に以下のような項目を設定します。

• 商品コード（商品を区別するためのID）
• 商品名
• 商品の写真など（インターネット上のURLなどを記憶）
• 価格
• 決済後の画面のURL（場合によっては個別の決済終了画面が必要）

のようになります。
最後の決済後の画面のURLは、支払い完了後オンラインの情報をダウンロードしたりする場合に、提供する情報毎に別々のダウンロードページが必要な場合などに利用できます。
したフロントエンドの実装と合わせると、これだけでオンライン決済が行えます

このようにデータベースで商品情報を管理した場合、この情報（リスト）を利用してオンラインショップの商品一覧を簡単に表示させることができます。
この一覧から利用者が商品を選んでそのままチェックアウト（決済）するという仕組みにすれば、オンラインストアーが完成です。

バックエンドに送るのは、商品のIDだけでもいいですし、

商品名や価格を一緒に送るのもOKです

HTTPの「POST」を使って、商品情報をセッションのリクエストをする時に一緒に送ります。このようなAPIにすることで、より実用的なオンライン決済の仕組みにすることができます。

商品情報をどこに保存するか？

では、商品情報をどこに保存するかが次の疑問になります。
データベースに置くのが検索したり、一覧を表示したりするのに都合が良い方法です。
簡単にWebサービスで使う事を考えると、この連載でも利用してきたFirebaseを利用するととても簡単に実現できます。

FirebaseのCloud Firestoreを使えば簡単です。商品のコレクション（例えば「products」）を作成してそこに、「id/name/price/photo/url」などのプロパティのエントリーを登録すればOKです。

Firebaseの良い所は、別のAPIを作らなくても、フロントエンドから直接アクセスできるので最低限のバックエンドの実装で本格的なサービスの構築が可能になります。

商品の登録も、フロントエンドから行うことも可能です。

当然、完全なサービスにするには「管理」の為の機能が必要ですよね？
商品の登録・削除、また価格の改定などはビジネスをしていると当然発生します。
こうした管理のサービスも、Firebaseを使えば簡単にできます。

管理モード

これも、この連載で紹介してきたことですが、商品の管理は管理者のみが出来るようにする必要があります。一般の利用者に商品の追加、削除、価格改定などができてしまうのはサービスとして問題ですよね？

そのためには、管理者を特定して区別する必要があります。

ここでも、Firebaseの機能を利用して簡単に解決できます。

Firebaseのユーザー認証（ログイン）の機能を使えば簡単に実現できます！

こうした、ユーザーの認証やデータベースの設定は慣れてしまえばそれほど大変な作業ではありませんが、初めての場合、少し面倒で時間がかかる作業（開発）になります。
それを、FirebaseをWebサービスに取り込めば、ほぼ特別なコードを書くことなしに実現できます。決済サービス自体も簡単でしたよね！

商品データベースと管理者の認証、管理モードそして、オンライン決済の仕組みは一見複雑そうですが、誰でも利用できる「外部のサービス」を上手く取り込んで利用する事で、初めてでも数日で実装が可能です。

シリコンバレースーパーウエアでは、フリーランスの型だけではなく、プログラミングを職業とされる方にビジネスを意識した マインドセットを身に着けるお手伝いも提供しています。プログラミングは手段であって、それをどのように生かして、将来のキャリアに結び付けて行くかを長期的な視点で考えるのがとても大切です。この意識が出来ると勉強の方向も絞られて、あなたの夢を実現する道筋が見えてきます。

興味のある方は今すぐお問合せください！

またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

• お問合せ
• Webサイト
• ニュースレターのお申込み

Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.