無料で写真販売サイトを作る方法—WooCommerceの使い方—Stripeの設定

無料で写真販売サイトを作る方法—WooCommerceの使い方—Stripeの設定

いよいよStripeの設定です。これが終われば販売体制が整ったことになります。

Stripeのアカウントを取得している前提で話を進めます。

Advertisement

Stripeの設定

ダッシュボード画面にずっと以下のアラートが出ていたと思います。

「お持ちのStripeアカウントキーを設定してください」をクリックします。

以下の画面に飛びます。

「Webhookエンドポイント」の設定

まずはテストしたいので「テストモードを有効化」にチェックを入れます。

「Webhookエンドポイント」のグレーの下地になっているURLをコピーするかメモします(1)。その横の「Stripe account settings」をクリックします(2)。

Webhookとは、簡単に言うと「ここにサイトが有るよ!と他のサイトに呼びかける仕組みのようです。

 

Stripeに飛んで、IDとパスワードを聞いてくるので記入してサインインします。

 

エンドポイントの登録画面になるので、右にある「+エンドポイントを追加」をクリックします。

 

ポップアップウインドウが出ますので、先ほどコピーしたURLをペースト(もしくは記入)し(1)、「エンドポイントを追加」をクリックします。

 

認証のため登録しているメールアドレスとパスワードを記入して「認証する」をクリックします。

エンドポイントにURLが記入されて「モード」が「ライブ」になりました

引き続き設定をするので左サイドバーの「開発者」の下にある「APIキー」をクリックします。

APIキーの記入

テストモードで確認ですので、右上の「テストデータを表示する」をクリックして「テストデータを表示中」に変えます。

公開可能」と「シークレットキー」の「トークン」をコピーまたはメモしてください。「シークレットキー」のトークンは「テスト用キーを表示」をクリックすると表示されます。

 

ワードプレスのダッシュボードに戻り「テスト用公開鍵」に「公開可能」のトークンをペースト(記入)します。「テスト用秘密キー」に「シークレットキー」のトークンをペースト(記入)します。

あとはデフォルトで構いませんが、今回もStripeチェックアウトを選択しておきました。

下にある「変更を保存」をクリックして決定します。

以上でテストモードでの設定が終わりました。ちゃんと機能するかチェックしてみましょう。

動作の確認

一点買ってみましょう。実際のサイトアドレスにアクセスして、商品を1つ選択します。

以下のようなページになるので、カートに入れます。(「今すぐ購入」ですぐに購入することもできますが、確認のためカートに入れて買ってみます)

以下の表示が出てカートに追加されましたので、「カートを表示」をクリックして表示させます。
カートが表示されて、内容が間違いなければ「お支払いへ進む→」をクリックします。
必要事項を記入し、「支払いに進む」をクリック。
「注文の支払い」画面になったら「Place Order」をクリックして支払います。
Stripeの支払い用ポップアップウインドーが開くので、テスト用のクレジットカードナンバー“4242 4242 4242 4242”と今以降の月と年月日を有効期限に記入し、CVCも適当に3桁の数字を記入して、「00000を支払う」をクリックします。ブルーがグリーンに変わりチェックが付けば支払い完了です。
画面が「注文受付」に変わります。ダウンロードの黒抜きになっているところをクリックすると写真がダウンロードできます。
購入時に登録したメールアドレスにも注文確認のメールが届き、そこからも写真はダウンロードできます。

テストモードを解除して本格稼働へ

先程の設定をもう一度、テストモードを外して行います。
ワードプレスのダッシュボードに戻り「WooCommerce」→「設定」→上の方に並んでいる「決済」をクリックし(1)、「Stripe」の「管理」をクリックします。
するとStripeの管理画面になりますので、「テストモードの有効化」のチェックを外します。

次にStripeのダッシュボードへアクセスして「公開可能」と「シークレットキー」のトークンをコピーまたはメモします。その際はテストデータを表示する」のボタンが外れていることを確認してください。

ライブ公開可能な鍵」に「公開可能」のトークンをペースト(記入)し、「ライブ秘密キー」に「シークレットキー」のトークンをペースト(記入)します。

以上で販売サイトが実際に可動いたします。

ついでに—カスタマイズ

WooCommerceのテーマStorFrontには多くの子テーマがあります。中には無料のものもありますので、それらを使って少しカスタマイズしてみましょう。

 

「外観」→「テーマ」に行き、「新規追加」をクリックします。すると「テーマを追加」画面になりますので「テーマを検索…」に“StoreFront”と記入すると多くの子テーマが出てきます。

詳細をみて、StoerFrontの子テーマもしくは英語だとChild Themaと記載のあるものから選びます。

Deli (StorFrontの子テーマ)

ナチュラルでオーガニックな感じのテーマのようです。写真販売に使っても悪くはないですね。

WOOT (StorFrontの子テーマ)

最初からトップページに商品のスライドショーが設定されていいます。本気の販売目的なら良さそうですね。

フロントページのカスタマイズ用プラグイン

フロントページに「カテゴリー別ショップ」を表示させないようにしたり、おすすめ商品を並べたりすることが簡単にできるプラグインがありました。

“Homepage Control”というプラグインで、ワードプレスのプラグインで検索すると簡単に出てきます。インストールすると「外観」の「カスタマイズ」画面に、以下のような“Homepage Control”項目が追加できます。

表示/非常時と並び順も変えられます。

StorFront用のアドオンプラグインのようですが、とても便利なのでこちらもインストールすることをおすすめします。

まとめ

今回はじめて私もWooCommerceを使って、写真販売サイトを構築しましたが、思った以上に簡単でした。

世界で一番普及しているであろうEコマース・プラグインなので多くのアドオンがありそうです。コードを書かなくても、もっと自由に見た目や機能を変えることが出来るでしょう。しかも、ここまで作ってレンタルサーバー料金以外まったくかかっていません。

どれくらい売れるのかわからないけど、試しに写真販売サイトを作ってみたい!というような場合はEasy Digital DownloardsよりWooCommerceのほうがいいかもしれません。

Tipsカテゴリの最新記事