【簡易版】WordPressで運営しているホームページをStripeの定期決済に対応させる方法

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

本記事では「会員制サービス」を構築するための具体的な手順をご紹介いたします。

なお、簡易版のため操作手順では一部のスクリーンショットを省略しております。より詳しい【完結版】をお求めの方は別途お問い合わせフォームからご相談ください。

当研究所ではサブスクリプションシステムを完備したブログ構築サービスを提供しているため「完結版」は非公開としておりますのでご了承をいただけますと幸いです。

【簡易版】WordPressで運営しているホームページをStripeの定期決済に対応させる方法
完全版の記事はこちら

【簡易版】WordPressで運営しているホームページをStripeの定期決済に対応させる方法

１. プラグインをインストール

プラグインは無料の「Simple WordPress Membership」。希望に併せてアドオンを導入しましょう。特に便利だったアドオンは下記の３つです。必須ではありませんが、導入すれば構築が早く完了できます。

Simple Membership After Login Redirection
Simple Membership Custom Messages
Simple Membership Form Shortcode

インストールはすぐに完了しますが「Simple WordPress Membership」は頻繁に更新されるため最新バージョンの活用をおすすめいたします。カスタマイズはプラグインのコアは触らない方が良いです。

２. プラグインの設定を行う

プラグインをインストールしたら以下を行います。

・会員レベルの作成

シルバー、ゴールド・プラチナなど複数のコースをもうける場合は「会員レベル」で３つを作成します。もし無料会員も考慮する場合は「会員レベル」で無料会員用のレベルを発行したのちに「一般設定」内で会員レベルIDを指定して無料会員の設定を紐づけます。会員レベルIDは会員レベルに表示されています。

会員レベル

WP Membership > 設定 > 一般設定

無料会員を有効にする場合のみチェックが必要です。当然ですが、無料会員を使わない場合は不要です。

・支払い用のAPIを連携させる

APIキーの連携は「WP Membership > 設定 > 支払い設定」で管理されています。Stripeでアカウントを作成するとすぐに『テスト用アカウント』が使えるのでテストAPIキーを入力していきましょう。

・会員登録後の承認方法を決める

会員登録があった際に「自動承認」とするか「一旦保留にして管理者が管理画面内から承認」するかどうかは運営スタイルよって異なってきます。仮にウェブサイトを利用する側が『一般閲覧ユーザー』と『無料会員ユーザー』しかいない場合は「無料会員ユーザー」を自動承認にしていた方が効率的です。

逆に「複数の会員コース」があって、すべてが有料ユーザーの場合は「管理者が手動で承認」した方が安全です。１つの運用ルールとして『決済時に入力したメールアドレス』と『会員登録時の使うメールアドレス』を共通にしてもらっておくように事前アナウンスしておけば不正なアクセスも防げます。

このあたりは会員とウェブサイト（または管理者）の距離感にもよってきますので、あなたが取り組む事業に合わせて最適な手段を選ぶようにしてください。月額式のオンラインサロンを運営するか、単純な会員制サービスを運用していくかでベストは方法は異なってくるはずです。承認方法は下記で変更可能。

会員登録直後に承認なしで運用するなら「有効」でOKです。

・メールの配信方法を決める

会員サイトを運営すると会員登録時にメールを送るなどが必要となります。もちろん「htmlメール」も送れますが『送信速度や受信環境を考慮するとプレーンテキストのまま送るのがベスト』です。設定する箇所は「WP Membership > 設定 > メール設定」にあります。チェックを入れるとhtmlモードになります。

３. 支払いボタンを作る

Stripeで定期支払いを行うための支払いボタンが必要です。ボタンは「WP Membership > 設定 > 支払い > Create New Button」で行います。ちなみにカンタンな編集であれば作成後でも操作は可能です。

次の画面で「支払いボタン」と「会員レベル」を連携させます。無料期間も設定可能です。Stripe側のIDと紐づける必要があります。下記の「plan_xxxxxxxx」はStripe側で取得できますのでご安心ください。

支払いボタン毎でStripeAPIを指定できます。上段の「Use Global API Keys Settings」にチェックを入れると「WP Membership > 設定 > 支払い設定」で設定したAPI設定が自動で読み込まれます。もしAPIを個別で入れたいときは上段のチェックを外してから各入力欄にAPIキーを入れるようにしてください。APIの下にある「Webhook Endpoint URL」はStripe側で使うのでメモ帳などにコピーしておきましょう。

支払った後に飛ばすページURLを指定できます。リターンURLに指定のURLを入力すると支払いボタンから支払いを完了したあと指定URLに自動転送がかかります。支払い時に住所入力を必須にする場合は上段にチェックを入れます。また支払いボタンを画像にしたい場合は画像URLのパスを指定してください。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 ※ 2万を超えるお客様がご使用中！

ここで念のため「会員登録時の順序」を整理しておきます。今回は「複数の申込みコース」があって「すべてが有料」というもっともスタンダードなパターンで考えます。会員登録の流れは以下となります。

１. 支払いボタンから購入する
２. リターンURLで指定したページに飛ばす
３. ページ先で会員登録フォームが開く
４. 会員登録を行う（購入時と同じメールアドレス）
５. 管理者が確認して承認する
６. 会員サイトが閲覧可能になる

カンタンに言えば、申込みコースの数だけ「あらかじめ作成済みの会員レベルと支払いボタンを紐づける必要がある」という前提の作業となります。仮に申込コースが１つ（ゴールドコース等）であれば作業自体も１度で終わるのであまりむずかしく考える必要はありません。利用者目線、管理者目線の両方で考えながら作業を進める必要があるので少しややこしくなりますが紙等に書き出せば解りやすいはずです。

無事「支払いボタン」が作成できると「Manage Payment Buttons」に表示されます。なお「Stripe Plan ID」のみまだ入力できていませんので、あとから編集して入れましょう。

４. Stirpeで商品を作成

Stripeでアカウント作成後にログインしてください。ちなみに本番申請するまでは終始テストモード。

定期決済用の商品は「Billing > 商品」から登録をしていきます。次に「テスト商品を追加」をクリック。

商品名にコース名を入れて「商品を作成」をクリック。

次の画面で「単価」と「請求間隔」を決めます。無料（トライアル）期間をもうける場合はトライアル期間に日数を入力ください。以下は無料期間が30日で毎月3900円の請求がかかる商品となります。ちなみに「日次（毎日）」の請求や「週次（毎週）」や「３ヶ月毎」など色々な期間が選べます。

各項目を入力したら「料金プランを追加」をクリック。

料金プランが追加されたら「plan_xxxxxxxx」をコピーしましょう。そして一度「WordPressの管理画面」へ戻って「WP Membership > 設定 > 支払い > Manage Payment Buttons」のなかにある「Edit」から支払いボタンの編集画面に入ってください。

そしてさきほどコピーした「plan_xxxxxxxx」を「Stripe Plan ID」に貼り付けます。その後最下部にある「支払データ保存」をクリック。

５. APIキーとWebhookの設定

StripeのAPIキーが管理されている場所は下記です。

メニューを開くとAPIキーが表示されます。

API連携ができたらStripe API Settingsの最下部にある「Webhook Endpoint URL」をコピーしてください。ちなみにいくつ支払いボタンを作っても「Webhook Endpoint URL」は共通なのでご安心ください。WordPressとStripeを連携動作させるための最終段階で必要となる「通信用のおまじない」のようなものと思えばOKです。

コピーしたら「Stripe」に戻って左メニューにある「開発者 > Webhook」をクリック。

そして「エンドポイントを追加」をクリック。

下記の画面からWebhookを設定していきます。エンドポイントURLにさきほどコピーした「Webhook Endpoint URL」を貼り付けます。そしてバージョンは最新のAPIバージョンを選択してください。

次に受け取るための「送信イベント」を追加していきます。追加する送信イベントは３種類。customerとchargeとinvoice（invoice.payment_succeeded）です。まずはcustomerから追加。

一番上をクリックすると下記のようにまとめて追加されます。次は「charge」です。同じ要領でまとめて追加。最後はinvoiceの「invoice.payment_succeeded」を単品で追加。

ちなみに「イベント数」はStripe側の機能調整で増減する可能性があるので時期によっても異なります。送信イベントを追加できた状態になったら「エンドポイントを追加」をクリック。Stripe側の作業は以上で完了です。

６. 支払いから登録までの流れを作る

支払いボタン用のショートコードは下記にあります。WordPressへ戻って「WP Membership > 設定 > 支払い > Manage Payment Buttons」のショートコードボタンにタグが表示されています。ショートコードボタンを貼ったページ側を開くと「今すぐ参加する」ボタンが表示されていますね。