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で購入できます。ちなみに$41なので約5000円。

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

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

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

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

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

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

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

Full Stripe > Settings > Stripeタブ

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

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

Full Stripe > Subscriptions > Subscription Plans

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

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

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

こんな感じに入力すると、

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 をクリック。

フォームの作成は

i、支払いの設定

ii、税金周りの設定

iii、見た目の設定

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

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

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

i、支払いに関する設定

Paymentタブです。

ii、税金周り

Financeタブです。

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

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

iii、見た目の設定

Appearanceタブです。

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

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

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

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

Custom Fieldsタブです。

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

Actions after Paymentタブです。

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

5、その他設定

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

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

Full Stripe > Settings > Appearanceタブ

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

Full Stripe > Settings > Email Notificationタブ

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

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

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

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

Full Stripe > Subscriptions > Subscription Formsタブ 

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

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

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

2 COMMENTS

K

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

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

返信する
たかさき

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

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

——

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

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

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

——

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

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

返信する

コメントを残す

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