WordPressに継続課金を実装した【WP Full Stripe】

WordPressで商品の販売をしようと思うと、鉄板はWooCommerce・Stripeなのですが、定期決済（＝継続課金）をしようと思うとStripe・WP Full Stripeが一番良いとのことなので、実装してみました。そのメモです。

最近は有料のオンラインサロンなどが盛んなので、自分で作れば良いのになぁと。

なぜWordPressでの継続課金でWP Full Stripeが最強なのかという記事はこちら。

要約すると「WP Full Stripeが一番コスパが良い」て感じですね。

全体の流れ

WP Full Stripeの購入&導入

プラグインを購入し、WPサイトへアップロード

プラグインとStripeとの紐付け

プラグインとStripeアカウントと紐づけます

サブスクリプション（定期決済）詳細の作成

フォームの作成

その他設定
ショートコードの挿入

この段階までやるとショートコードが生成されるので固定ページにショートコードを挿し入れれば決済フォームが出来上がり

という全6ステップ。コードはほぼ書かないで終わります。

英語なのが人によっては多少ネックなくらい。

１、WP Full Stripeの購入&導入

envato marketで購入できます。ちなみに記事更新日時点(2019/8/27)では$39なので約5000円弱。

https://codecanyon.net/item/wp-full-stripe/5266365

購入にはVisaやMastercard、PayPalなどが利用できます。

決済が済んだらダウンロードしてWPにインストールしましょう。

ちなみにWP Full StripeのFree版を有効化してるとエラー起こるので、Free版をオフにしてからプレミアム版を有効化してください。

２、プラグインとStripeとの紐付け

注：いきなりLiveのAPIを採用しちゃうと万が一決済された時におかしなことになるので、必ずTestのAPIで動作確認してからLiveに切り替えましょう！

注２：Live用のキーもらうためにはStripe管理画面にて申請が必要なので、早めに申請しておきましょう(私の時は申請と同時に許可おりましたが場合によっては時間かかるケースもあるかもなので)。

Stripeアカウントがないと何も進まないのでまずは作ってしまいましょう。

https://stripe.com/jp

登録が済んだら、Stripeの管理画面のテストAPIキーの取得から公開可能キーおよびシークレットキーを取得します。

Full Stripe > Settings > Stripeタブ

取得したコードをWP Full Stripeに入力し、StripeアカウントとWP Full Stripeを紐付けましょう。

３、サブスクリプション（定期決済）詳細の作成

Full Stripe > Subscriptions > Subscription Plans

上にある + Create Subscription Plan をクリック。

英語なので一応ニュアンスをメモってみました。

少し分かりづらいかもしれないので、ちょっと例を出すと、

例えば上画像のように入力すると、

  • IDはtest（管理画面で管理するためのIDなのでお客さんにとっては何の意味もない文字列です）
  • お客さんに表示される商品名（プラン名）は『テスト1』
  • 初期費用5000円の定期決済の料金は10万円（つまり初回は105000円の請求）
  • 6ヶ月ごとに決済が入り、1年経つと自動キャンセル

といった具合です。

４、フォームの作成

Full Stripe > Subscription > Subscription Forms

ここでは + Create inline Form あるいは + Create Popup Formを選択しますが、これに関してはデモを見たほうが分かりやすいのでURLを。

二つとも私が片手間に作ったものです。

Inline Formのデモ

Popup Formのデモ

要はinlineの方はテキストフィールドが埋め込まれており、popupはボタン押すと決済画面が表示される形です（ページ遷移はなし）。

今回はPopupで行くので、+ Create Popup Form をクリック。

フォームの作成は

  1. 支払いの設定
  2. 税金周りの設定
  3. 見た目の設定
  4. カスタムフィールドの設定
  5. 決済後のアクション設定

の5ステップです。面倒であればほぼデフォルトのままでも普通に動きます。

1、支払いに関する設定

Paymentタブです。

2、税金周り

Financeタブです。

VAT（=value-added tax = 付加価値税）は貿易に関するアレなので、物販の方はそこら辺を調べてみてください。

デジタル商品の取り扱いの場合はノータッチでOK。

3、見た目の設定

Appearanceタブです。

ちなみに上の画像のような設定でいくと下画像のようになります。

Simple Button Layout?をYesに設定すると英語などが消えるので、Yesにしてもいいかも。

もしかすると私の見落としでどっかの項目いじれば英語消える可能性も。

4、カスタムフィールドの設定

Custom Fieldsタブです。

5、決済後のアクション設定

Actions after Paymentタブです。

以上でフォーム作成が完了なので、下の方にあるSave Changesをクリック。

５、その他設定

フォームが完成したのでその他の設定をしていきます。

こちらも面倒な場合は基本いじらなくてもOK。

Full Stripe > Settings > Appearanceタブ

CSSの設定。必要に応じ、適当に調整してみてください。

Full Stripe > Settings > Email Notificationタブ

先の決済後アクション項目でEmailの送信をオンにした方は適当にメールの文言を設定しましょう。

何もいじらないと英語だけの文面のメールが送られてしまいます。

会員制サイトの場合はログインユーザーにもメールアドレスの入力をさせるかどうかやGoogleのリキャプチャ機能を使いたい方はこちらをYesにしてAPIキーを入力しましょう。

６、ショートコードの挿入

Full Stripe > Subscriptions > Subscription Formsタブ 

画像の赤枠箇所をクリックするとショートコードが出てくるので、そちらを固定ページなり投稿に差し込みます。

ちなみに複数を挿入したりも出来ますし、説明文をショートコードの下に入れたり、細かいデザインに関してはCSSで変えちゃってもいいですね。

私が実装した時日本語の情報全くなかったので困っている人がたどり着ければ幸いです〜。

キャンセル処理・カード番号変更の実装方法（追記9/18）

コメントいただいた『ユーザー自身でキャンセル処理やカード番号の変更ができるページを実装する方法』につきましては下記記事の方でまとめてあります。

【WP Full Stripe】登録キャンセル（中断）とクレジットカードの更新ページの作成

12 COMMENTS

K

いつも参考にさせて頂いております。

WP full stripeにて、自動課金の解除方法（できればユーザー自身で解除できる）をご教示頂けますとありがたいです。

返信する
たかさき

コメントいただきありがとうございます。

ある程度の知見をお持ちという前提でお話進めさせていただきますが、下記手順で実装できるかと思います。

——

１、固定ページを新規作成し、[fullstripe_subscription_update]のショートコードを用意

２、管理画面 > Full Stripe >Settings > EmailNotifycationタブ > Subscription update security code

メールにてユーザー側に送信されるURLを手順1で作成した固定ページのURLにする

——

手順的には上記の2つのみでキャンセルおよびカード情報のアップデートなども可能になります。

取り急ぎでの返答でしたので、時間ができ次第もう少し分かりやすくした手順を本日ないし明日までの時間ができたときにでも記事にしようかと思います。

返信する
桜井恵三

WP full stripeにて、自動課金の解除方法（できればユーザー自身で解除できる）に関してはもう少し、具体的に教示いただけないでしょうか。よろしくお願いします。

返信する
Satsohi さん

初めまして。突然の質問失礼いたします。

WP full stripeのサブスクリプションで継続課金している人が、
ログインするページの機能などはWP full stripeのプラグインには無いのでしょうか？
他の会員サイト系のプラグインやWordPressのユーザー機能と連携しているのでしょうか？

色々調べてもどうしてもわからず、ご教授頂ければ幸いです。
宜しくお願い致します。

返信する
たかさき

初めまして！

>ログインするページの機能などはWP full stripeのプラグインには無いのでしょうか？

WP Full Stripeはあくまでサブスクリプション形式の決済システムを担うプラグインでしかないので、ログインなどの機能は別途作る必要があるかと思います（おそらくbuddyPressあたりかなと）。
仰るような機能（決済ユーザーのみへの情報提供や場所提供）をなるべくコストを押さえた上で実装するには、課金ユーザーのメールアドレスの管理はWP Full Stripeでも出来るので、

1.メルマガ方式にする
2.課金したユーザーのみにメール経由でFaceBookグループのURLやLINE@のIDをお教えするなどしてクローズドな場所を教える
3.課金したユーザーのみにメール経由でパスワードを知らせ、WPの限定公開機能（パスワードを入力すると記事が閲覧できる）を用いてクローズドな情報提供をする

とかの方法が思い浮かびます。いずれにせよメールを介する形ですね。

—-

>他の会員サイト系のプラグインやWordPressのユーザー機能と連携しているのでしょうか？

僕はWP Full Stripeの開発チームでもなんでもないので詳しいところは分からないのですが、現時点ではおそらくないかと……。

疑問点等々解決しましたら幸いです。

返信する
たかさき

追記

そういえば、決済後のリダイレクトページの設定もできたので、決済した後のユーザーをFacebookグループのURLに飛ばしたり、LINE@のURLに飛ばしたり、パスワードの表示画面に飛ばすなどする方法もあるかと思います。

WordPress上でWP Full Stripeを絡めて課金ユーザーかどうかの条件分岐をするシステム構築するのはそれなりに手間やコストがかかりそうなので予算がそれなりに取れる場合については作ってしまうのも手かと思いますが、なるべくコストを抑えて実装するには今挙げたようなメールを介したり、リダイレクトをしたりなどして工夫するのが良いかもしれません。

返信する
Satoshi

ご回答ありがとうございます。
ログイン機能などはやはり別で設定するしかないようですね・・・
ありがとうございました！

返信する
Satoshi

ご回答ありがとうございます。
ログイン機能などはやはり別で設定するしかないようですね・・・
ありがとうございました！

返信する
ピロ

初めまして！とてもわかりやすい説明ありがとうございます！！

もしよければ、１点教えて頂きたいのですが、WP Full Stripeは、年間の使用料を払わなければ、使えないのでしょうか？

プラグインを購入しようとしたら、「年間〇〇ドル」と出てきたので、少し不安になりまして(;’∀’)

お手数をおかけしますが、何かご存知でしたら教えて頂けると助かりますm(__)m

返信する
たかさき

買い切りなのでかかりませんよー！

おっしゃっているのは
wpfullstripe
これのことですかね？
こちらは追加のサポートですね、手厚いサポート受けられる代わりに年間費追加ねーみたいな料金プランでして有料プラグインでよく見かけるやつですです

返信する

コメントを残す

メールアドレスが公開されることはありません。

次の記事

【CSS】Easy Table of Contentsのデザイ…