Laravel8にSTRIPEでサブスクリプション機能を付ける10ステップ

Laravel上の決済機能
スポンサーリンク

LaravelはCachierパッケージをインストールして、Stripeと連携が可能です。

両者とも優れたシステムですが、連携の手順は意外とメンドウ。

10個のステップでひとつずつ、ステップを解説していきますね。

Laravelにサブスク申込機能を取り入れたい方は、参考にしてみてください。

スポンサーリンク

Laravel8にSTRIPEでサブスクリプション機能を付ける10ステップ

10ステップは下記のとおりです。

  1. Stripeのテストアカウント作成
  2. Stripeの商品作成
  3. Laravelのプロジェクト作成
  4. LaravelにCachierパッケージをインストール
  5. Laravelのマイグレーション実施
  6. Laravelの.envファイルにStripeのAPIを設定
  7. UserモデルファイルにBillable追加
  8. ルート設定
  9. コントローラーの作成
  10. フォームの作成

①Stripeのテストアカウント作成

まずはSTRIPEでテストアカウントを作ります。

必要なのはメールとURLぐらい。

なお、テストアカウントは後から本番用に移行できますが、その際には本番用アカウント作成が必要となります。

本番アカウント用のちょっと面倒な質問への対応は、こちらの記事で解説しているので困ったら参考にしてくださいね。

②Stripeの商品作成

Stripeのアカウント作成後、商品を作成します。

左側のメニューより【商品】を選択。

【商品を追加】ボタンを押して、サブスクプランを作成しておきます。

価格欄で【継続】を選択しましょう。

③Laravelのプロジェクト作成

次にLaravelのプロジェクトを準備します。

下記のコマンドで新たにプロジェクトを作成できます。

【newproject】にはお好きな名前をいれてください。

なお、初めてLaravelを使う場合には、事前にインストールが必要なものがいくつかあります。

詳しくは、Laravelのインストールと初期設定を解説した下記記事をご覧ください。

④LaravelにCachierパッケージをインストール

次にLaravelにCachierパッケージをインストールします。

2020年11月11日現在、バージョン12をインストールできます。

“memory size exhausted” エラーが出た場合には、php.iniでメモリの容量設定を変更してください。

詳しくはこちらの記事の「メモリ不足エラーになった場合」をご覧ください。

⑤Laravelのマイグレーション実施

Cachierインストール後、マイグレーションを行います。

これによって、データベースのユーザーテーブルに4個のカラムが自動で追加されます。

Cashierインストール後、ユーザーテーブルに4つのカラム追加

さらにsubscriptionsテーブルとsubscription_itemテーブルが作成されます。

subscriptionsテーブル

subscription_itemsテーブル

今後サブスクリプションを作成・更新すると、追加されたカラム・テーブルへ自動で値が入っていきます。

⑥Laravelの.envファイルにStripeのAPIを設定

次にStripeのキーをLaravelに埋め込みます。

公開可能キー・シークレットキー・商品APIキーの3つを埋め込んでいきましょう。

Stripe側でキーを取得

Stripeにログインすると、【ホーム】メニューに【テストAPIキーの取得】が表示されます。

【公開可能キー】【シークレットキー】をそれぞれコピーします。

さらに商品ページへ移動し、作成した商品の【API ID】をコピーしておきます。

Laravel側にキーを貼り付ける

Laravelの.envファイルを開き、この3個のキーを貼り付けます。

さらにapp/configのservices.phpファイルに、上記の情報を設定しておきます。

.envファイルとconfigへのキーの設定については、こちらの記事で解説しています。

「なぜこんなふうに設定するんだろう?」と思ったら、目を通してみてください。

キーを変更してもうまく反映されなかったりした場合の対策はこちら。

⑦UserモデルファイルにBillable追加

app\Models の User.phpファイルを開き、use Laravel\Cashier\Billable; と use Billable; を追加します。

これによって、サブスク作成を実行するメソッドが使えるようになります。

⑧ルート設定

次に、Laravelプロジェクト内の routes/web.phpファイルに、ルート設定を記述します。

特にStripeだから特別、ということはなく、通常どおりでOK。

フォームを表示するルート設定と、フォームを投稿後のルート設定のふたつを準備しておきます。

ひとことメモ

Laravel8ではコントローラーのパスが通っていないので、コントローラー名の前にパスを入れねばなりません。

あらかじめ app/ProvidersのRouteServiceProvider.php の29行目を有効にしておいてください。

⑨コントローラーの作成

次にコントローラーを作成します。

下記コマンドを実行してください。

app/Http/Controllers に StripeController.phpが作成されます。

ファイルを開き、上のほうに下記を入れておきます。


次にフォーム表示用と、フォーム投稿後用のコントローラーを作ります。

フォーム表示用コントローラー

フォーム表示用のコントローラーは下記のとおり。

ここで 'intent' => $user->createSetupIntent() の箇所は、Setup Intentを作成するために入れています。

こうしておくことで、ビュー側で支払い方法(payment method)に関する情報を集められます。

サブスク作成時には、この支払方法情報が必要になります。

フォーム投稿後用コントローラー

フォーム投稿後用のコントローラーは下記のとおり。

最後の【ルート設定】には、処理後に表示させたいページのルートを入れておいてください。

特になれけば、 return back(); としておくと良いでしょう。

上記では、createOrGetStripeCustomer()newSubscription()といったメソッドを使っています。

Cashierを入れたことで、こういったメソッドが使えるようになりました。

公式マニュアルには、その他にも色々なメソッドが紹介されているので、興味があればチェックしてみてくださいね。

⑩フォームの作成

最後にフォームの作成にとりかかります。

CSSファイルの作成

CSSは、Stripeに準備されているものを使います。

public/cssフォルダ内の stripe.cssファイルに保存しておきます。

【stripe.css】

なおStripeはきれいなテンプレートを色々と準備してくれています。

他のテンプレート例は、Stripeのサイトをご覧ください。

作成したstripe.cssのリンクは、Laravelにデフォルトで準備されているテンプレートlayouts/app.blade.phpファイルの<head></head>の間にセットしておきます。

app.blade.phpファイルの上部に app.cssのリンクが設置されているかと思いますが、その下辺りでOKです。

【app.blade.php】

blade.phpファイルのHTML部分の作成

次にresources/viewsにpostフォルダを作り、subscription.blade.phpファイルを作成します。

フォーム部分、つまりHTML部分はこんな感じです。

【subscription.blade.php】

layouts/app.blade.phpをテンプレートとして使うために、@extends(layouts.app)を入れています。

こうすることで、上記のようなヘッダーをページに表示できます。

@extendsと@sectionの使い方は、こちらで解説しています。

もうひとつ、ここで重要なポイントがあります。

resources/layouts の app.jsファイルを開きます。

{{ asset('js/app.js') }}  ファイルへのリンクをtitleの下あたりに変えておきます。

こうしないと、stripeのjavascriptと競合してしまうためです。

詳しくはこちら。

stripe.jsの挿入

HTMLの後にJavascript部分を入れていきます。

まずは、こちらのstripe.jsをいれます。

ヘッダ部分にいれるとエラーになったりもするので、HTMLの記述が終わったところにいれておきます。

このコードを入れておくことで、Stripeがあやしげな行動を検知できるようにもなります。

Stripe側では、詐欺を防ぐため、決済ページだけでなく、できれば全てのページに本コードをいれておくよう推奨しています。

To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page.

*参照元:Stripe公式マニュアル

Javascript部分の作成

最後に subscription.blade.phpファイルにJavascriptを入れていきます。

かなり長くなりましたが^^;

これで出来上がりです。

テストをする

最後にテストをしてみましょう。

ユーザーとしてログインした後、作成した決済ページを開きます。

下記のルールで、テスト用のカード番号・数字を入れます。

  • カード番号:4242 4242 4242 4242
  • 日付:将来の日付を適当に入れる
  • CVC: 3桁の数字を適当に入れる

送信後、無事にデータが送信されているかチェックします。

Stripeにログインし、左側のメニューから【支払い】をクリック。

送信した商品の支払いが行われているかチェックしてください。

支払い処理が成功していれば、【顧客】にも、ユーザーが登録されているはずです。

さいごに

おつかれさまでした!

LaravelとStripeの連携、結構メンドウですよね。

じゅんこ
じゅんこ

正直、もっと簡単に連携できると思っていました。

ただ連携させられれば、できることは色々とあります。

関連記事で解説しているので、LaravelとStripe連携にご興味があれば、ご一読ください。

じゅんこ
じゅんこ

すてきな決済システムを作っていきましょうー

★2021年5月8日内容修正

修正前のコードでは、うまくいくときと、いかない場合がありました。

コード実行のタイミングが、その時々で変わってしまっていたためです。

そこでsubscription.blade.phpファイルの中に、javaScript初期化処理をページ読み込み完了後に行うようにしました。

(本件についてコメントいただき、ありがとうございました!)

 

Laravel上の決済機能

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

  1. 柳田昂也 より:

    はじめまして! いつも記事を参考にさせて頂いております、ありがとうございます!

    「Laravel8にSTRIPEでサブスクリプション機能を付ける10ステップ」の記事拝見させていただきました。
    そこで記事の通り、実装してみたところ
    “resource_missing
    This customer has no attached payment source or default payment method.”というエラーが出てつまずいています。
    開発環境(localhost:8000など)の影響でstripeとうまく連携できていないこともあるのかなと考えました。

    こちらは「php artisan serve」 で立ち上げて開発してますでしょうか…?

    恐縮ですがご回答いただたら嬉しいです!

    • Junko Junko より:

      柳田さん、コメントありがとうございます^^

      記事通りに試して頂いたのにエラーになってしまったとのこと、残念です。

      こちら試してみましたが php artisan serveでサーバーを立ち上げた環境でも動作しました。

      いただいたエラーメッセージで検索してみましたが、人によって解決方法が様々で、イマイチ原因が分かりません。

      エラーメッセージをそのまま読むと、payment methodがちゃんと設定されていない感じですよね。

      .envやconfigの設定が間違えていないか、subscriptionメソッドの設定が正しく入っているか、ビューファイルから情報がちゃんと受け渡されているか。

      このあたりが原因の可能性があります。

      以前、paymentMethodのエラーについて書いた記事があります。
      本ブログの記事に沿ってコードを入れて頂いているので該当しないと思いますが、念の為、記事のリンク貼りますね。
      ↓↓
      https://biz.addisteria.com/laravel-stripe-paymentmethod/

      • 柳田昂也 より:

        ご回答ありがとうございます!!また、詳しいアドバイスまで恐れ入ります…!

        貼っていただいた参考記事のように、今自分が開発している環境(laravel や cashier、その他)のバージョンの関係があるのかもしれません。

        お忙しいところありがとうございました。
        再度、config設定やバージョンを見直して原因調査していきます!

        • Junko Junko より:

          柳田さん、

          その後 新しい環境で試したところ、わたしのほうでもエラーを再現しました!
          記事内のコードを書き直したので、よろしければ、再度お試しください。
          コメント、ありがとうございました。

          • 柳田昂也 より:

            わざわざありがとうございます!!大変助かります!
            私の方でも実装してみたいと思います!

タイトルとURLをコピーしました