Full Stripeの使い方 サブスク(継続課金)

  • このエントリーをはてなブックマークに追加
  • LINEで送る

明けましておめでとうございます!

新年一発目のブログ、見にきていただきありがとうございます^^

去年書こう書こうと思って、眠らせていたネタでございます。

たくさんの方の役に立つ内容になる!はず笑

ということで今日は、ワードプレスプラグイン

WP Full Stripe

の初期設定、使い方をまとめていきます^^

まず最初に・・・

使い方散々調べて、その通りにやったのにできなかった・・・泣(つд`)

な方。

ワートプレステーマと、プラグインの互換性がないかも!

なので、サブドメインなどにワードプレスをインストールして、テーマを変えてみてください。
そうすると使えるかもしれません。

では、早速本編に入っていきましょう!

ワードプレスで商品販売ページを作るケースありますよね?

その中でも、決済システムを「Stripe」使用していて、定期購入(サブスク、継続課金、定期的に自動決済)使えるようにしたい!

な場合には、

WP Full Stripe

が便利です!

「毎月自動課金で月謝集めたいな〜」

等の場合に利用すると良さそう^^

もちろんサブスクではなく、1回のみの決済としても利用できます。

便利だけど、ちょっと設定が難しいので、使い方をまとめていきます。

前提条件

まず、使用する決済システムについて確認しましょう。

決済システムはStripe

決済システムStripeのWebサイトスクリーンショット
stripe.com

Stripe使ってないよ〜

な場合は「回れ右!」しましょう。

これからStripe使うよ〜

な場合も、Stripeのアカウントを作成し、アカウントを有効にしてから本記事を読んでいただければと思います^^

Stripeのアカウントは無料で作ることができます。

ただし、決済時に手数料がかかります。

WP Full Stripeは有料プラグイン

WP Full Stripeは有料プラグインです。

Full Stripeの料金プラン、Webサイトのスクリーンショット
WP Full Stripe 料金表

一番お手頃なStarterプランだと、年間で$49かかるんですね。

プランによって、適用できるWebサイトの数に違いがあったり、利用できる機能も違うようです。

本記事では、Starterプランでの継続課金についてまとめていきます。

WP Full Stripeの購入から、ワードプレスへのプラグイン追加については割愛します。

設定方法及び使用方法

ワードプレスの管理画面と、Stripeの管理画面両方を開いてから始めていきましょう。

WP Full Stripeには、テストモード、ライブモードの2つのモードがあります。

テストモードは言葉の通り、テスト、動作確認のためのモードです。

ライブモードは、本番モードになります。

 まずはテストで動作確認をして 、問題なければライブモードを設定していきましょう。

Keyの設定

まず最初に、Keyの設定をしていきます。

これはStripeの情報と、ワードプレスを繋ぐ役割があります。

Full Stripe設定画面。Keyの設定について

まず最初に、ワードプレス管理画面左のメニューから、

Full Stripe

Settings

を開いてください。(画像の1の部分)

Full Stripeの設定画面になります。

Stripeタブを開いて、4つのKeyを入力していきます。(画像の2の部分)

上2つがテストモードで必要なKey、下2つがライブモードで必要なKeyになります。

この入力すべき4つのKeyはどこにあるのか?というと、Stripeの管理画面になります。

Stripeの管理画面。テストのKey。

Stripeを開いたら、「テストデータを表示」(画像のAの部分)をオンにしてください。

次に「テストAPIキーの取得」を開くと、公開可能キー、シークレットキーを確認することができます。

これらをFull Stripeの設定画面に貼り付けます。

次に、「テストデータを表示」をオフにしてください。

Stripeの管理画面。本番のKey。

本番APIキーの取得」を開くと、本番モードの公開可能キー、シークレットキーを確認することができます。

これらをFull Stripeの設定画面に貼り付けます。

本番モードのシークレットキーは、一度しか表示できません。
表示したらすぐにコピペするようにしましょう。
うまくいかなければ、シークレットキーを再発行すればOKです。

Full Stripe設定画面。テストモード変更

4つのKeyを入力したら、「Test」をオン(画像の3の部分)にし、テストモードへ変更します。

次に「変更を保存」(画像の4の部分)をクリックして保存します。

Webhookの設定

今度は、Webhookの確認作業を行います。

これは、StripeとFull Stripeが連動しているかどうか、の確認ですね。

Stripe Webhook URL」(↑画像の5の部分)をコピーし、Stripeの管理画面を開きます。

テストデータを表示」がオンになっている場合は、オフにします。

Stripeの管理画面。Webhookについて。

開発者

Webhook

を開き、画面右上の「+エンドポイントを追加」をクリックします。

Stripeの管理画面。Webhookの設定画面。

次の画面にて、「エンドポイントURL」部分に、先ほどコピーしておいたURLを貼り付けます。

次に、「送信イベント」を選びます。(画像のBの部分)

これは何を選べばいいかというと、Full Stripeの公式ページに選ぶ項目が載っています。

公式サイトのWebhook送信イベント説明
https://paymentsplugin.com/kb/setting-up-webhooks-wp-full-stripe

10個ほどありますが、全て選択しましょう。

イベントを選択して下さい
をクリックすると、検索することができるので、コピペでひとつひとつ選んでいくと良いと思います。

最後に、「エンドポイントを追加」をクリックします。

本番モードでのWebhook貼り付けは完了したので、「テストデータを表示」をオンにして、テストモードでも上記と同様の作業を行います。

設定したWebhookをクリックして、詳細画面を開きます。

StripeのWebhook設定画面

次に「Webhookを送信」をクリックします。

StripeのWebhook設定画面

次に「イベントタイプ」を選択する画面になりますが、一つ選び「Webhookを送信」をクリックしてください。

「成功」もしくは「webhook sent successfully」と表示されれば完了です。

事前にイベントタイプを10個選択しているので、それぞれのイベントタイプを選び直して、Webhookの送信を繰り返します。

テストデータの場合も、本番データの場合も、確認します。

ここで、成功にならない場合は、エラー解消していかなければなりません。

私が経験したのは、

403エラー

でした。

このエラーは、サーバーが海外からのアクセスを許可していないことによるエラーだったので、海外からのアクセスを許可することでエラー解消しました。

海外からのアクセスを許可する場合は、サーバーの設定(htaccess)を変更する必要があります。
(あくまでサーバーの設定なので、StripeやFull Stripeの管理画面から設定するものではない。サーバー会社によって設定方法も違う。)

その他のエラーについては、公式サイトに載っているので、見てみてください。

Subscriptionの作成

StripeとFull Stripeの連携ができたので、決済の設定に入っていきます!

ワードプレス管理画面にて、Full Stripeの「Subscriptions」を開きます。

設定項目が分かれていますが、まずは「Subscription Plans」タブを開きましょう。

Full Stripe設定画面。Subscription Plan設定

ボタン「+Subscription Plans」をクリックします。

継続課金の設定画面に遷移するので、一つずつ項目を埋めていきます。

Full Stripe設定画面。Subscription Plan詳細設定

項目をひとつひとつ確認していきましょう。

ID
識別子になります。自分が分かりやすい文字列にすると良さそうです。
Display Name
商品名を記載します。実際の決済画面にも表示されるので、お客さんにもわかりやすい名前にすると良さそうです。
Payment Currency
通貨の種類です。日本国内だったら「Japanese Yen(JYP)」を選ぶことがほとんどだと思います。
Payment Amount
値段を設定します。10円であれば、10、と記載します。「Payment Currency」でアメリカドルを選んでいる場合は、100をかけた数字にします。($10であれば、1000、と入力)
Setup Fee
初期手数料です。継続課金以外に決済するものがあれば、ここで設定します。何もなければ、0、にします。
Payment Interval
課金の間隔を設定します。◯ヶ月毎の決済の場合は、Monthly、週毎の場合は、Weekly、年毎であれば、Yearlyにします。
Payment Interval Count
課金の間隔を設定します。毎月の課金にする場合は、「Payment Interval」を、Monthly、にし、「Payment Interval Count」を、1、にします。
Payment Cancellation Count
課金をストップするタイミングを設定できます。課金を6回でストップする場合は、6、と記入します。ストップするタイミングがない場合は、0、と記入します。
Trial Period Days
お試し期間を設定できます。1週間をお試し期間にする場合は、7、と記入します。ここは日数になります。

最後に、「Create Plan」をクリックし、保存します。(画像の7の部分)

フォームの作成

次に、決済フォームを作成していきます。

インラインフォームと、チェックアウトフォームの2種類があるようですが、ここではインラインフォームの設定についてまとめていきます。

(というより、チェックアウトフォームは使ったことがない、だけなのですが^^;)

Subscription Forms」を開きます。

Full Stripe設定画面。Subscription Forms設定

+Create Inline Form」をクリックします。(画像の8の部分)

Paymentのタブが開くと思いますが、もし別のタブになっている場合はPaymentを選び直してください。

Full Stripe設定画面。Subscription Formsの、Payment設定

ここで詳細設定していきますので、一つ一つの項目を見ていきましょう。

Form Name
フォームの識別子になります。半角英字で名前をつけます。
Include Coupon Input Field
クーポンを利用できるようにする場合は、Yes、を選択します。クーポンはStripeの管理画面から作成できるようです。
Allow Multiple Subscription
重複決済をできるようにするか否かの設定ができます。重複決済可とするなら、Yes、にします。
Billing Cycle Anchor Day
決済の起点となる日を設定できます。フォームに登録した日を起点とする場合は、When Customer Subscribed、を選択。月毎の決済の場合は、毎月○日、というように決まった日にちに課金することもできます。その場合は、On this day of month、を選び、日にちを選びます。
Plans
前章で作った、Subscription、が表示されるので、それを選びます。事前に複数Subscriptionを作成しておけば、複数選ぶこともできます。(商品が複数ある場合など)

他のタブも見ていきたいと思います。

Finance」のタブでは、税率の設定になります。

税込価格でSubscriptionを作成していればここは飛ばして良いと思います。

物品を販売する場合は、ここで発送先住所について聞くかどうかも設定できるようです。

次に、「Appearance」タブを開きます。

Full Stripe設定画面。Subscription Formsの、Appearance設定
Plan Selector Style
ドロップダウンで商品選択してもらうのか、ラジオボタンで選択してもらうのか、表示形式を設定できます。ひとつしかSubscriptionがない場合は、ここは気にせずいきましょう。
Subscribe Button Text
申し込みボタンの文言を設定できます。日本語で「申し込む」などにしておくと良さそうです。

Custom Field」タブでは、利用規約の同意チェックボックスをつけるかどうかや、その他の入力項目も作成できるようです。

最後に、「Action after payment」タブを見ていきます。

Full Stripe設定画面。Subscription Formsの、Action after payment設定
Send Email Receipt
決済完了について、お知らせのメールを送るかどうかを設定できます。お知らせは受け取りたい人がほとんどかと思うので、Yes、にすると良そうです。
Redirect On Success
決済完了後に、決済完了ページへリダイレクトさせるかどうか設定できます。リダイレクトさせる場合は、決済ページとは別で完了ページを作成する必要があります。決済完了時には「Success」という文言が表示されるので、リダイレクトさせなくても良さそうです。

最後に「Create Form」をクリックで保存します。(画像の9の部分)

決済ページの作成

決済フォームが完成したので、決済ページを作成していきます。

完成したフォームの左側、

</>

をクリックします。(画像の10の部分)

Full Stripe設定画面。Subscription Formsの、インラインコード

インラインコードが表示されるので、選択してコピーしておきましょう。

固定ページの作成画面を開きます。

固定ページの設定画面

本文内に、先ほどコピーしておいたインラインコードを貼り付けます。

公開、もしくはプレビューで、決済画面を確かめてみましょう。

決済画面

このように決済画面が表示されます。

ここで、

名前
メールアドレス
カード情報

を入力して実際の動きを確かめることができます。

ここではボタンが「申し込む」となっていますが、フォーム作成時に変更しておいたためです。

今はテストモードでの決済画面なので、実際のクレジット情報を記入して確認することはできません。

クレジット情報は、Stripeの公式サイトからコピペして使いましょう。

Stripeのテスト用クレジット情報掲載のページ
https://stripe.com/docs/testing

動作確認をして、問題がなければ、ライブモードに変更してから本番用の

Subscription
フォーム
決済ページ

を作成して完成です!

テストモードの情報が、ライブモードに引き継がれるわけではないので、しっかり本番用の作業をしないとダメですよ!

その他、メールの設定やcssも追記できますが、今回は割愛させていただきます。

決済フォームが英語となってしまうので、cssで擬似要素を足して、日本語表記にしてあげると、使い勝手が良くなるかもしれません。

参考サイト

日本語サイトじゃないから嫌だな〜

と思ってしまうかもしれませんが、公式サイトを見るのが一番情報が入りやすいです。

何か引っかかることがあれば、Full Stripeのサポートページを参考にしてください。

またお役立ち情報があればブログ書きます!

ではでは〜〜

  • このエントリーをはてなブックマークに追加
  • LINEで送る

LINEで無料レッスン配信中!


  • 売り手市場じゃなかったの?案件獲得に苦労するなんて・・・
  • なかなか単価が上がらない。どうすれば・・・
  • グラフィックデザインだけじゃ厳しい。じゃ、Webデザイン?

な方は今すぐご覧ください!!


今すぐチェック!

SNSでもご購読できます。

コメント

  1. 豊原 博幸 より:

    智子さん

    この度は、この記事に助けられました、
    ありがとうございました。

    WP Full Stripe の設定中に
    「定期決済だけど支払日を指定する」が
    存在する事を知ることができました。

    → Billing Cycle Anchor Day

    1. tomo-co より:

      コメントありがとうございます^^
      便利なプラグインもあるもんですよね!
      これから実装頑張ってください♪

  2. たく より:

    コメント失礼いたします。こちらのサイトのおかげでスムーズに構築できそうです!ありがとうございます。ですが一点だけ不明な部分が出て来ましてそこから動けない状態になっています。最後にテストモードからライブモードに切り替えてサイトを見てみると『内部エラー
    このフォームには最低1つのプランを選択してください!』と『Warning: Invalid argument supplied for foreach() in /home/c9758290/public_html/takumitokuruma.com/wp-content/plugins/wp-full-stripe/includes/wp-full-stripe-public-form-views.php on line 1624』こちらが出て止まっています、、コメント欄で質問するのもおこがましいですがアドバイスいただければと思います。よろしくお願いします。

  3. ゆう より:

    とっても助かります。
    お陰様で実装できました。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください