明けましておめでとうございます！
新年一発目のブログ、見にきていただきありがとうございます^^
去年書こう書こうと思って、眠らせていたネタでございます。
たくさんの方の役に立つ内容になる！はず笑
ということで今日は、ワードプレスプラグイン
WP Full Stripe
の初期設定、使い方をまとめていきます^^
まず最初に・・・
使い方散々調べて、その通りにやったのにできなかった・・・泣(つд`)
な方。
ワートプレステーマと、プラグインの互換性がないかも！
なので、サブドメインなどにワードプレスをインストールして、テーマを変えてみてください。
そうすると使えるかもしれません。
では、早速本編に入っていきましょう！
ワードプレスで商品販売ページを作るケースありますよね？
その中でも、決済システムを「Stripe」使用していて、定期購入（サブスク、継続課金、定期的に自動決済）使えるようにしたい！
な場合には、
WP Full Stripe
が便利です！
「毎月自動課金で月謝集めたいな〜」
等の場合に利用すると良さそう^^
もちろんサブスクではなく、１回のみの決済としても利用できます。
便利だけど、ちょっと設定が難しいので、使い方をまとめていきます。
Contents
前提条件
まず、使用する決済システムについて確認しましょう。
決済システムはStripe
Stripe使ってないよ〜
な場合は「回れ右！」しましょう。
これからStripe使うよ〜
な場合も、Stripeのアカウントを作成し、アカウントを有効にしてから本記事を読んでいただければと思います^^
Stripeのアカウントは無料で作ることができます。
ただし、決済時に手数料がかかります。
WP Full Stripeは有料プラグイン
WP Full Stripeは有料プラグインです。
一番お手頃なStarterプランだと、年間で$49かかるんですね。
プランによって、適用できるWebサイトの数に違いがあったり、利用できる機能も違うようです。
本記事では、Starterプランでの継続課金についてまとめていきます。
WP Full Stripeの購入から、ワードプレスへのプラグイン追加については割愛します。
設定方法及び使用方法
ワードプレスの管理画面と、Stripeの管理画面両方を開いてから始めていきましょう。
WP Full Stripeには、テストモード、ライブモードの２つのモードがあります。
テストモードは言葉の通り、テスト、動作確認のためのモードです。
ライブモードは、本番モードになります。
まずはテストで動作確認をして 、問題なければライブモードを設定していきましょう。Keyの設定
まず最初に、Keyの設定をしていきます。
これはStripeの情報と、ワードプレスを繋ぐ役割があります。
まず最初に、ワードプレス管理画面左のメニューから、
Full Stripe
↓
Settings
を開いてください。（画像の１の部分）
Full Stripeの設定画面になります。
Stripeタブを開いて、４つのKeyを入力していきます。（画像の２の部分）
上２つがテストモードで必要なKey、下２つがライブモードで必要なKeyになります。
この入力すべき４つのKeyはどこにあるのか？というと、Stripeの管理画面になります。
Stripeを開いたら、「テストデータを表示」（画像のAの部分）をオンにしてください。
次に「テストAPIキーの取得」を開くと、公開可能キー、シークレットキーを確認することができます。
これらをFull Stripeの設定画面に貼り付けます。
次に、「テストデータを表示」をオフにしてください。
「本番APIキーの取得」を開くと、本番モードの公開可能キー、シークレットキーを確認することができます。
これらをFull Stripeの設定画面に貼り付けます。
本番モードのシークレットキーは、一度しか表示できません。
表示したらすぐにコピペするようにしましょう。
うまくいかなければ、シークレットキーを再発行すればOKです。
４つのKeyを入力したら、「Test」をオン（画像の３の部分）にし、テストモードへ変更します。
次に「変更を保存」（画像の４の部分）をクリックして保存します。
Webhookの設定
今度は、Webhookの確認作業を行います。
これは、StripeとFull Stripeが連動しているかどうか、の確認ですね。
「Stripe Webhook URL」（↑画像の５の部分）をコピーし、Stripeの管理画面を開きます。
「テストデータを表示」がオンになっている場合は、オフにします。
開発者
↓
Webhook
を開き、画面右上の「＋エンドポイントを追加」をクリックします。
次の画面にて、「エンドポイントURL」部分に、先ほどコピーしておいたURLを貼り付けます。
次に、「送信イベント」を選びます。（画像のBの部分）
これは何を選べばいいかというと、Full Stripeの公式ページに選ぶ項目が載っています。
10個ほどありますが、全て選択しましょう。
「イベントを選択して下さい」
をクリックすると、検索することができるので、コピペでひとつひとつ選んでいくと良いと思います。
最後に、「エンドポイントを追加」をクリックします。
本番モードでのWebhook貼り付けは完了したので、「テストデータを表示」をオンにして、テストモードでも上記と同様の作業を行います。
設定したWebhookをクリックして、詳細画面を開きます。
次に「Webhookを送信」をクリックします。
次に「イベントタイプ」を選択する画面になりますが、一つ選び「Webhookを送信」をクリックしてください。
「成功」もしくは「webhook sent successfully」と表示されれば完了です。
事前にイベントタイプを10個選択しているので、それぞれのイベントタイプを選び直して、Webhookの送信を繰り返します。
テストデータの場合も、本番データの場合も、確認します。
ここで、成功にならない場合は、エラー解消していかなければなりません。
私が経験したのは、
４０３エラー
でした。
このエラーは、サーバーが海外からのアクセスを許可していないことによるエラーだったので、海外からのアクセスを許可することでエラー解消しました。
海外からのアクセスを許可する場合は、サーバーの設定（htaccess）を変更する必要があります。
（あくまでサーバーの設定なので、StripeやFull Stripeの管理画面から設定するものではない。サーバー会社によって設定方法も違う。）
その他のエラーについては、公式サイトに載っているので、見てみてください。
Subscriptionの作成
StripeとFull Stripeの連携ができたので、決済の設定に入っていきます！
ワードプレス管理画面にて、Full Stripeの「Subscriptions」を開きます。
設定項目が分かれていますが、まずは「Subscription Plans」タブを開きましょう。
ボタン「＋Subscription Plans」をクリックします。
継続課金の設定画面に遷移するので、一つずつ項目を埋めていきます。
項目をひとつひとつ確認していきましょう。
最後に、「Create Plan」をクリックし、保存します。（画像の７の部分）
フォームの作成
次に、決済フォームを作成していきます。
インラインフォームと、チェックアウトフォームの２種類があるようですが、ここではインラインフォームの設定についてまとめていきます。
（というより、チェックアウトフォームは使ったことがない、だけなのですが^^;）
「Subscription Forms」を開きます。
「＋Create Inline Form」をクリックします。（画像の８の部分）
Paymentのタブが開くと思いますが、もし別のタブになっている場合はPaymentを選び直してください。
ここで詳細設定していきますので、一つ一つの項目を見ていきましょう。
他のタブも見ていきたいと思います。
「Finance」のタブでは、税率の設定になります。
税込価格でSubscriptionを作成していればここは飛ばして良いと思います。
物品を販売する場合は、ここで発送先住所について聞くかどうかも設定できるようです。
次に、「Appearance」タブを開きます。
「Custom Field」タブでは、利用規約の同意チェックボックスをつけるかどうかや、その他の入力項目も作成できるようです。
最後に、「Action after payment」タブを見ていきます。
最後に「Create Form」をクリックで保存します。（画像の９の部分）
決済ページの作成
決済フォームが完成したので、決済ページを作成していきます。
完成したフォームの左側、
</>
をクリックします。（画像の１０の部分）
インラインコードが表示されるので、選択してコピーしておきましょう。
固定ページの作成画面を開きます。
本文内に、先ほどコピーしておいたインラインコードを貼り付けます。
公開、もしくはプレビューで、決済画面を確かめてみましょう。
このように決済画面が表示されます。
ここで、
名前
メールアドレス
カード情報
を入力して実際の動きを確かめることができます。
ここではボタンが「申し込む」となっていますが、フォーム作成時に変更しておいたためです。
今はテストモードでの決済画面なので、実際のクレジット情報を記入して確認することはできません。
クレジット情報は、Stripeの公式サイトからコピペして使いましょう。
動作確認をして、問題がなければ、ライブモードに変更してから本番用の
を作成して完成です！
テストモードの情報が、ライブモードに引き継がれるわけではないので、しっかり本番用の作業をしないとダメですよ！
その他、メールの設定やcssも追記できますが、今回は割愛させていただきます。
決済フォームが英語となってしまうので、cssで擬似要素を足して、日本語表記にしてあげると、使い勝手が良くなるかもしれません。
参考サイト
日本語サイトじゃないから嫌だな〜
と思ってしまうかもしれませんが、公式サイトを見るのが一番情報が入りやすいです。
何か引っかかることがあれば、Full Stripeのサポートページを参考にしてください。
またお役立ち情報があればブログ書きます！
ではでは〜〜
智子さん
この度は、この記事に助けられました、
ありがとうございました。
WP Full Stripe の設定中に
「定期決済だけど支払日を指定する」が
存在する事を知ることができました。
→ Billing Cycle Anchor Day
コメントありがとうございます^^
便利なプラグインもあるもんですよね！
これから実装頑張ってください♪
コメント失礼いたします。こちらのサイトのおかげでスムーズに構築できそうです！ありがとうございます。ですが一点だけ不明な部分が出て来ましてそこから動けない状態になっています。最後にテストモードからライブモードに切り替えてサイトを見てみると『内部エラー
このフォームには最低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』こちらが出て止まっています、、コメント欄で質問するのもおこがましいですがアドバイスいただければと思います。よろしくお願いします。
とっても助かります。
お陰様で実装できました。