WordPressで有料会員サイトつくってみた(その3)

IT
スポンサーリンク

スポンサーリンク

前回までで、レンタルサーバの契約、Wordpressのインストール、Wordpressテーマの変更による見栄えの調整、有料会員サイト用のプラグインの導入と動作確認までやってきました。ここからは最も重要な部分、決済機能についてご説明します。

OLBモジュール群の適用

結論から申し上げると、本サイトの決済機能はOnline Lesson Bookin Systemプラグインのアドオン機能であるさまざまなモジュールを使って実装していきます。

OLB Paypalモジュールの適用

決済機能はPayPalでの決済機能モジュールが用意されているので、以下のサイトで購入して「プラグインの新規追加」→「アップロード」から導入します。

OLB PayPal支払いモジュール | Online Lesson Booking Extensions
価格 2018-01-21 PayPal支払いモジュールの販売再開について 概要

プラグインアドオンを導入すると、OLBsystem→「PayPal支払い」が出てくるのでクリックすると以下のような画面に切り替わります。

各項目の説明は以下のとおりです。基本的に、PayPalアカウントを入力する以外はデフォルトの設定でOKです。

PayPalアカウントPayPalアカウント(メールアドレス)を入れます
(PayPalサンドボックスを使うときは、テスト用に作成した「Seller」アカウントのメールアドレスを入れます)
サンドボックスを使用するPayPalサンドボックス(テスト環境)を使う場合にチェックします
TLS 1.2通信を使うTLS 1.2通信を使う場合にチェックします。使わない場合はチェックを外します。
2016-01-12以降、PayPal sandboxでは TLS 1.2通信が必要です。TLS 1.2未対応のサーバー環境では IPN(即時支払通知)がエラーになります
通貨PayPal支払いの通貨を指定します
キャンセル時のURL(自動的に設定されます)
支払完了時のURL(自動的に設定されます)
PayPal IPN処理のURL(自動的に設定されます)

OLB Paypalモジュールの使い方

登録済みの会員がログイン中にアクセスできる任意のページ(例えば「マイページ」など)に、購入フォームのショートコードを挿入します。

ここで注意する必要がある点が1つあります。それは、現段階では「講師別の単価を設定できない」ということです。OLB Paypalモジュールは、あくまでチケットの購入であって、デフォルトでは消費するチケットはどの講師も同じなんですね。ですから、例えばA講師は1レッスン1チケット消費だけど、B講師は講師レベルも高いので1レッスン3チケット消費、などの設定をするには、後述するポイント消費モジュールを導入する必要があります。

講師ページごとにPaypalの購入ボタンを入れればいいかと思っていた私は、ここで方針転換して「チケット購入ページ」を作成し、そこに購入ボタンをショートコードで記入し、そのページのリンクを会員ウィジェットに追加しました。

ここで注意!
OLB Paypalモジュールを適用したときに作られる「お支払い」という名前のページはいじってはいけません。このページを直接編集して購入ボタンを設置した私は、ボタンを押してもPayPalに遷移しないという無限ループトラブルに陥りました・・・(プラグインの製作者の方の力を借り、なんとか復旧しましたが)

購入ボタンのショートコードは以下のようになります。

[olb_paypal_form price=”10000″ points=”10″ days=”30″ name=”+30 Days (JPY 10000)” ]

パラメータ役割
price価格
days有効期限の延長日数
pointsチケット数
(ポイント制モジュール使用時は、ポイント数)
name任意の商品名(日本語可)
qtyユニット数
form_id<form>タグのid (例: <form id=”xxx”>)

これでPayPalでのチケット購入は実装できました。ちなみに今回のサイトでは複雑になるのでチケットの有効期限については設けないことにしました。

ですので、OLB systemの全般設定画面で「有効期限なし」に忘れずにチェックを入れておきます。

次は、先にも記入した講師別の単価設定をするためのチケット制の導入です。

ポイント制モジュールの導入と使い方

ポイント制モジュールの導入方法は、OLB Paypalモジュールと同じで、以下のページからモジュールを購入してプラグインの新規追加からアップロードして有効化します。

プラグインを有効化すると、管理画面のOLB Systems配下に「ポイント制」が出てくるのでクリックすると、以下の画面に切り替わります。ここで注意するのは、(画面にも表示されますが)ポイントシステムを使いたい場合は、「全般設定」の「チケット制を適用する」を無効にすることです。

設定項目は以下のとおりです。

項目説明
ポイントを保存するメタキー標準では olbpoint となっています
ポイントの有効期限会員の保有ポイント数が更新された時に、有効期限を自動的に延長する日数です。例:”30″(日)
予約1件当たりの消費ポイント予約コスト(消費ポイント)が設定されていない講師に適用される標準の消費ポイントです。例:”100″(ポイント)

講師ごとの予約1件あたり消費ポイントを設定する

次に、講師ごとに予約時の消費ポイントを設定するために、講師ユーザーのプロフィール編集ページを開き、「予約1件当たりの消費ポイント」欄に消費ポイントを入力します。ここでは例として100ポイント消費としていますが、たとえば1ポイント1,000円で販売して、ある講師の1レッスンあたり単価を5,000円とすると、予約1件あたりの消費ポイントは5となります。

加えて、予約通知メールで、会員の保有ポイントを示す変数 “%USER_POINTS%” が使えるようになるので設定しておきましょう。

OLB Systems→メール設定を開きます。

予約受付通知とキャンセル受付通知のメッセージに以下の文言を追記します。

[保有ポイント数] 残り %USER_POINTS% pt
[有効期限] %USER_TERM% (%USER_TERM_REM%)

また、会員マイページにも保有ポイントを表示します。

「固定ページ」→「会員マイページ」を開き、以下の文言を追記します。

[保有ポイント数] 残り [olb_member_data key=”olbpoint”] pt

★注意★
ショートコードを書くときは、コード画面で書いてください。普通のテキスト画面で書くと、ショートコードがただの文字列と認識されてしまいます!

保有ポイントの更新

PayPalモジュールと保有ポイントモジュールを実装したので、保有ポイントは自動更新かと思いきや、ここは手動更新になります(うーん、改善してほしい…)
(2020/10/30削除)

(2020/10/30更新)
PayPalモジュールと保有ポイントモジュールを実装したので、Paypal決済がなされるとポイントは即時更新されます(念の為、即時更新されるかはサンドボックスを使って試してみてくださいね)

管理者は会員からの入金を確認した後で、保有ポイントを更新します。会員の「保有ポイント」は「有効期限」とともに予約可否の判定で参照され、予約対象講師の消費ポイント分の保有ポイントがあり、予約希望日が有効期限内であれば予約することができます。

  1. 管理者権限でログインし、入金を確認した会員のプロフィール編集ページを開きます。
  2. 入金額に応じて「保有ポイント」を更新し、整数値を入力して保存します。

管理者画面は以下の通りです。

無事にポイントが加算されていることを確認できました。

さて、ここまではスポット会員(1回のレッスンごとにポイントを利用する会員)向けの内容でしたが、次からはサブスク会員(月額や年額などの支払いを行う会員)向けの設定です。

OLB Paypal定期支払モジュールの適用

スポット会員用のPaypal決済機能モジュールと同様に、以下のサイトからPayPal定期支払モジュールを購入して「プラグインの新規追加」→「アップロード」から導入します。

プラグインアドオンを導入すると、OLBsystem→「PayPal定期支払い」が出てくるのでクリックすると以下のような画面に切り替わります。基本的に、Paypal支払い機能と同じで、PayPalアカウントを入力する以外はデフォルトの設定でOKです。

項目説明
PayPalアカウントPayPalアカウント(メールアドレス)を入れます
(PayPalサンドボックスを使うときは、テスト用に作成した「Seller」アカウントのメールアドレスを入れます)
サンドボックスを使用するPayPalサンドボックス(テスト環境)を使う場合にチェックします
TLS 1.2通信を使うTLS 1.2通信を使う場合にチェックします。使わない場合はチェックを外します。
2016-01-12以降、PayPal sandboxでは TLS 1.2通信が必要です。TLS 1.2未対応のサーバー環境では IPN(即時支払通知)がエラーになります
通貨PayPal支払いの通貨を指定します
キャンセル時のURL(自動的に設定されます)
支払完了時のURL(自動的に設定されます)
PayPal IPN処理のURL(自動的に設定されます)
更新時の設定
支払時にチケット残をリセットする定期の支払ごとに、まずユーザーの保有チケット(あるいはポイント)を0にリセットした後、新しいチケットを設定する場合にチェックします。
[事例]
これは例えば、定期支払ごとにチケット(あるいはポイント)を発行し、その有効期限を「次回支払日まで」として運用するときに、支払日の時点で残っていたチケットは「期限切れ」としてリセット(0に)してから、新しいチケットを発行するようなケースで使用します。

実装も、Paypal支払モジュールと同様にショートコードでの実装になります。レッスンチケット購入固定ページに実装すると以下のようなイメージになります。

ショートコードは、たとえば、毎月10,000円の定期支払であれば以下のようになります。

[olb_paypal_recurring_form price=”10000″ unit=”M” duration=”1″ name=”月額1万円” ]

パラメーターは以下を指定できます。

パラメータ役割
price価格(毎回の支払金額)
pointsチケット数
(ポイント制モジュール利用時は、ポイント数)
unit期間単位(D:日、W:週、M:月、Y:年)
duration期間数(期間単位と組み合わせます)
「unit=”M” duration=”1″」で「毎月支払」となります
times支払回数(指定がなければ無制限)
「unit=”M” duration=”1″ times=”6″」で「毎月支払(全6回)」となります
name任意の商品名
form_id<form>タグのid (例: <form id=”xxx”>)

ここで、pointsを指定しない場合は有効期限のみが更新されます???

動作確認

決済部分の設定は以上になります。今回のサイトでは、スポット会員はレッスン受講に必要なポイントを購入する、サブスク会員は毎月の定期支払でレッスンを受け放題、という設定にしていますので、そのとおりの挙動になっているかの確認をします。

まず、PayPalビジネスアカウントに登録し、テスト環境を利用するサンドボックス機能を使っていきます。サンドボックスの利用方法は以下のページに詳細が載っているのでこちらをご確認ください。

PayPal テスト環境 Sandboxの使い方 - Qiita
ペイパルでは、決済サービスの動作確認ができるテスト環境として、Sandboxを公開しています。テスト用の「Buyer(買い手)」アカウントと、「Seller(売り手)」アカウントを作成し、サービス…

スポット会員のポイント購入~予約の流れ

今回は胡蝶しのぶ先生の1レッスン当たりの消費ポイントを5ポイントとし、スポット会員が13ポイント持っている状況を設定してテストしていきます。

購入できるポイントは1ポイント、5ポイント、10ポイントとしました(自動販売機みたいですねw)

記載したコードは以下のとおりです。

[olb_paypal_form price=”1000″ points=”1″ name=”1ポイント購入(1,000円)”]

[olb_paypal_form price=”5000″ points=”5″ name=”5ポイント購入(5,000円)”]

[olb_paypal_form price=”10000″ points=”10″ name=”10ポイント購入(10,000円)”]

で、胡蝶しのぶ先生のレッスンあたりの消費ポイントを5に設定します。

ここで、スポット会員がポイント購入画面から10ポイントを1回購入します。まず、現在ポイントを持っていない会員でログインします。

ここで、スポット会員がポイント購入画面から10ポイントを1回購入します。

PayPalのサンドボックスアカウントでログインします。

コレで無事に支払いが終わりました。次の画面でショッピングサイトに戻るというボタンを押すと、チケット購入のページに戻ってきます。「ご購入ありがとうございました」と表示されていればOKです。早速会員のポイントを確認してみましょう。

無事に10ポイント付与されていました。同様に1ポイント購入を3回繰り返して、合計13ポイントになるようにします。

では、このスポット会員でログインしてどのような挙動になるか試してみます。

ログイン~予約

まずトップ画面の「メンバーログイン」からログインします。

ちゃんとマイページに保有ポイント数が13ptであることが表示されています。次に、日別スケジュールから「胡蝶しのぶ」先生の空きスケジュールをクリックします。

ちゃんと予約できそうですので、予約をクリックします。

無事に予約ができました。会員マイページに戻って確認すると、ポイントが残り8ポイント(13ptマイナス5pt)に、そして次のスケジュールとして胡蝶しのぶ先生のレッスン予約が表示されています。

ここで、あと2回胡蝶しのぶ先生のレッスンを予約してみます。予約ができなくなるはずです。

予想通り、保有ポイントが足りませんと出ました。現在の保有ポイントをマイページで確認すると、3ポイントなので、1レッスン5ポイント必要な胡蝶しのぶ先生のレッスンは受けられないということですね。受けるには、あと2ポイントの購入が必要になる、ということです。

サブスク会員の定期購入~予約の流れ

今度はサブスク会員がちゃんと定期購入できるかどうかのテストをやっていきます。

本当は月額でテストしたいんですが、毎月ちゃんとポイントが溜まっているかの確認のために1ヶ月待つなんてことはできないので、簡素化のために、毎日100ポイントを100円で購入する購入ボタンを設置しました。

書いたコードは以下のとおりです。

[olb_paypal_recurring_form price=”100″ points=”100″ unit=”D” duration=”1″ name=”+100 Points Every 1 Day (JPY 100)”]

unit=”D” duration=”1″で、毎日ですね。

ここで、ポイントが残っていない生徒のIDでログインし直します。

そして、上記の毎日100ポイント購入のボタンをクリックします。すると、PayPalのページ(サンドボックスなのでテスト用のページ)にリダイレクトされます。ここで、「PayPalで支払う」ボタンをクリックします。

すると、PayPalのログイン画面が現れます。

ここで大事なのは、必ずPayPalデベロッパー画面で作成したサンドボックスユーザーのうち、「Personal」のアカウントでログインすることです。なぜなら、PersonalのアカウントがBuyer(買い手)に設定されているからです。

この「Personal」のユーザーのManage accountsにあるボタンをクリックすると、ユーザーの詳細を見ることができるので、そこでIDのメールアドレス(もちろんダミーです)とパスワードをコピーして、PayPalにログインしましょう。

買い手としてログインに成功したら、上記のような画面になるので、購入価格が100円であることを確認して「同意して定期購入」をクリックします。

無事に支払完了画面に遷移しました。ここで条件のところに「日ごとに¥100JPY」が記載されていることを確認して、「ショッピングサイトに戻る」をクリックすると、以下の画面に戻ります。

では、ポイントが追加されているか確認してみましょう。会員マイページにアクセスします。

無事に100ポイントが付与されていることを確認できました。

本番では、サブスク会員はレッスン受け放題にしたいので、毎月かなりのポイントを付与し、月が変わるごとにリセットするという処理をすることになります。

そのためには、上記のように「OLB system」→ 「PayPal定期支払」→「支払い時にチケット残をリセットする」にチェックを入れておきましょう。こうしておけば、ポイントが山のように貯まる会員は出なくなるはずです。

以上が、Wordpressをつかってホットペッパービューティーみたいなサイトを作ってみた全貌です。細かい設定や有料プラグインの導入などありましたが、アクセス集中するからAWSを使わなきゃとかの場合以外であれば、基本スモールスタートなのでここに書いた内容でいけます!

ぜひ皆さんもプラグインを駆使して作ってみてください!

スポンサーリンク

コメント

  1. 肉好き より:

    こんにちは!
    紹介されているような方法で有料サイトを作った際、特定商取引法に基づく表示は必要ですか?
    無知な私にご教授ください。

  2. セブン より:

    初めまして。
    私もWordPress+OLBで会員サイト作成途中でOLB Paypalモジュールの導入を検討している最中で(ポイント制モジュールは導入済み)、どんぴしゃなmocmocさんのこのページを発見して歓喜しております笑

    少し気になる点があり、コメントさせていただきました。

    保有ポイントの更新
    PayPalモジュールと保有ポイントモジュールを実装したので、保有ポイントは自動更新かと思いきや、ここは手動更新になります(うーん、改善してほしい…)

    とのことですが、そもそもPayPalモジュールはPayPal決済と同時にOLBチケット(ポイント)を即時更新できるのが主機能なのではないでしょうか。

    OLBサイトの下記ページにもその旨が記載されています。
    https://olbsys.com/extensions/codes/olb-addon-paypal/
    使い方
    決済完了後、「有効期限」や「チケット数(ポイント)」を即時に更新します。

    mocmocさんのおっしゃる通り、PayPal決済が完了してもOLB会員のポイントを管理者が手動で更新しなければならないとすれば、OLB PayPal支払いモジュールのWebサイトの説明は問題あると私は思いますし、開発者に改善要求されてもいいのでは、と個人的には思います。

    PayPal支払いモジュールを購入するつもりでいたのですが、mocmocさんのサイトを発見してコメントさせていただいた次第です。

    もし差し支えなければ、PayPal支払いモジュールの現在の状況について共有させていただければ幸いです。
    ※コメントの返信ではなくメール返信でも構いません

    突然のお願いと長文失礼いたしました。

    • mocmoc より:

      セブンさま
      コメントありがとうございます。同じようにサイトを構築されている方がいらして嬉しい限りです!

      さて、ご指摘いただいた箇所ですね。
      ご指摘の通り、ポイントと有効期限は即時更新されます。
      申し訳ございません。このブログを書いた時点では、PayPalの決済(サンドボックスでテスト中)のタイムラグがあり、即時更新ができなかったので、プラグイン作成主へ問い合わせなどをして確認してみたところ、即時更新できた次第です。ご指摘くださりありがとうございます。

      当該箇所は書き直しておきますね。

      どうぞよろしくお願いいたします。

  3. セブン より:

    mocmoc様

    早速のご返信助かります!

    即時更新されるとのことで安心しました笑
    お互いサイト運営がうまくいくように頑張りましょう。

    mocmoc様のサイトはブックマークさせていただきました。
    またちょくちょく訪問させていただきます。

    この度は本当にありがとうございました。

    • mocmoc より:

      いえいえ、こちらこそご指摘ありがとうございます。おかげで間違った情報を配信せずに済みました。

      また、ブックマークもありがとうございます。あまり頻度は高くありませんがちょくちょく更新しているので、たまに覗いてやってください。

タイトルとURLをコピーしました