WordPressテーマ『十二単』リリース 🎉

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

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

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

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

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

もくじ

全体の流れ

  1. WP Full Stripeの購入&導入
  2. プラグインとStripeとの紐付け
  3. サブスクリプション(定期決済)詳細の作成
  4. フォームの作成
  5. その他の設定
  6. ショートコードの挿入

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

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

1、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版をオフにしてからプレミアム版を有効化してください。

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

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

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

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

https://stripe.com/jp

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

WP Full Stripe使い方1

Full Stripe > Settings > Stripeタブ

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

WP Full Stripe使い方2

3、サブスクリプション(定期決済)詳細の作成

Full Stripe > Subscriptions > Subscription Plans

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

WP Full Stripe使い方3

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

WP Full Stripe使い方4

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

WP Full Stripe使い方5

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

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

といった具合です。

4、フォームの作成

Full Stripe > Subscription > Subscription Forms

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

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

Inline Formのデモ

Popup Formのデモ

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

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

WP Full Stripe使い方6

フォームの作成は

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

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

1、支払いに関する設定

Paymentタブです。

WP Full Stripe使い方7

2、税金周り

Financeタブです。

WP Full Stripe使い方8

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

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

3、見た目の設定

Appearanceタブです。

WP Full Stripe使い方9

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

WP Full Stripe使い方10

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

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

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

Custom Fieldsタブです。

WP Full Stripe使い方11

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

Actions after Paymentタブです。

WP Full Stripe使い方12

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

5、その他設定

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

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

Full Stripe > Settings > Appearanceタブ

WP Full Stripe使い方13

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

Full Stripe > Settings > Email Notificationタブ

WP Full Stripe使い方14

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

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

WP Full Stripe使い方15

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

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

Full Stripe > Subscriptions > Subscription Formsタブ 

WP Full Stripe使い方16

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

WP Full Stripe使い方17

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

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

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

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

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

Kさん

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

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

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

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

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

——

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

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

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

——

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

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

桜井恵三さん

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

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

https://takasaki.work/wp-full-stripe-userinfoupdate/

一応こちらのページにてまとまっているのですが、この記事を修正した方がよろしいでしょうか?
また、修正にあたってどの点が分かりづらいなどございましたらご意見を参考に修正いたします!

桜井恵三さん

これで分かります。ご丁寧にありがとうございます。

(このコメントはwithdiv旧サイトから転載したものです)

Satsohiさん

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

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

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

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

初めまして!

>ログインするページの機能などは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さん

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

(このコメントはwithdiv旧サイトから転載したものです)

ピロさん

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

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

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

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

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

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

おっしゃっているのは

wpfullstripe

これのことですかね?

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

むーみんさん

素晴らしい情報、ありがとうございます!

1つ質問失礼いたします🙇
決済フォームの言葉がすべて英語なのですが、これは日本語に変更するにはどうすればいいんでしょうか?

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

記事の中の画像にもあるかと思うのですが、設定の`Appearance`という項目の`form language`みたいな項目を`ja`に設定すれば日本語化できるかと!

むーみんさん

たかさきさん

ありがとうございます!!!!
とてもとても助かりました🙏

(このコメントはwithdiv旧サイトから転載したものです)

むーみんさん

今確認したところ、apperanceに下記の項目しかないのですが、これはどうすればいいでしょうか・・・?🙇

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

アップデートによる仕様変更が考えられますね。
とは言え、以前のバージョンでサポートしてた以上、さすがにどこかしらの項目には言語変更のあるかと思います……。

もし、探してみてもないようでしたら再度ご連絡いただけたら僕の方でも探してみますね

むーみんさん

たかさきさん

くまなく見ましたが、ありませんでした・・・。
そうですよね、以前あったのものがないなんて考えにくいですよね。。🙇

(このコメントはwithdiv旧サイトから転載したものです)

たかさきさん

となると、ストライプ側の仕様が変更してその変更にプラグインが追いついていないか、はたまたプラグイン側からは干渉できない仕様変更なのかとかも考えられます……。

最近忙しくてしばらくはまとまった時間が取れないので、また数日後にここのコメント欄に来ていただければ追記してると思いますー!

対応遅れてしまいすみません!

むーみんさん

たかさきさん

とんでもございません・・・!
ご返事いただき非常にうれしく思っております。
ありがとうございます🙏

(このコメントはwithdiv旧サイトから転載したものです)

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。