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

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

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

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

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

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

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

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

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

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

Stripe | 収益向上のための金融インフラ

Stripe は、あらゆる規模や業種のビジネスにおける決済の受け入れ、柔軟な請求モデルの構築、および資金移動の管理を支援する、金融サービスプラットフォームです。

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

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

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

STRIPE本番アカウント作成時の改正割販法に関連する質問への回答法

STRIPEで本番用アカウントを作成するときに、【改正割販法に関連する質問】という面倒な質問に答えねばなりません。どのように答えれば安全にアカウントを作れるか、解説します。STRIPE本番アカウント作成時の改正割販法に関連する質問への回答...

②Stripeの商品作成

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

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

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

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

③Laravelのプロジェクト作成

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

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

composer create-project --prefer-dist laravel/laravel newproject

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

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

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

Laravel 12 対応：インストールと環境構築：XAMPP & Node 使用・Windows 編【Laravel 入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。はまると、もっとか...

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

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

composer require laravel/cashier

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

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

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

Laravel8にStripeで決済機能をつけてみる【お試し編】

LaravelのアプリにStripeで決済機能を付ける方法を解説します。今回は、30分程度で試せる超基本の部分を紹介します。「Stripeってどんなだろ。」「Laravelとの連携をちょっと試してみたい。」という方の参考になればうれしいです...

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

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

php artisan migrate

これによって、データベースのユーザーテーブルに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ファイルに、上記の情報を設定しておきます。

    'stripe' => [
        'pb_key'=>env('STRIPE_KEY'),
        'st_key'=>env('STRIPE_SECRET'),
        'basic_plan_id'=>env('STRIPE_BASIC_ID'),
    ],

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

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

APIキーを.envにいれてconfig関数で呼び出す理由と方法【Laravel入門講座】

Laravelでは、APIキーや接続情報などを .env ファイルに保存します。.envファイルの情報をコントローラーやビューで使うときは、configヘルパ関数を使います。テスト環境では不要ながら、本番環境では、このステップが必要です。3...

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

Stripe Invlid API Key provided: LaravelでSTRIPEキーが読み込めない時の３つの対策

STRIPEのAPIキーが、Laravelで読み込めない時に、このエラーがでます。トラブルの原因と状況によって、対策が異なります。３つの対策を紹介するので、状況にあった方法をお試しください。Stripe Invlid API Key pro...

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

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

use Laravel\Cashier\Billable;

class User extends Authenticatable
{
    use Billable;
}

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

⑧ルート設定

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

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

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

Route::get('/subscription', 'StripeController@subscription')->name('stripe.subscription');
Route::post('/subscription/afterpay', 'StripeController@afterpay')->name('stripe.afterpay');

ひとことメモ

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

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

⑨コントローラーの作成

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

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

php artisan make:controller StripeController

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

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

namespace App\Http\Controllers;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Laravel\Cashier\Cashier;
use Stripe\Stripe;
use Stripe\Charge;
use App\Models\User;

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

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

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

    public function subscription(Request $request){
      $user=Auth::user();
        return view('post.subscription',  [
          'intent' => $user->createSetupIntent()
      ]);
    }

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

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

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

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

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

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

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

    public function afterpay(Request $request){
        // ログインユーザーを$userとする
        $user=Auth::user();

        // またStripe顧客でなければ、新規顧客にする
        $stripeCustomer = $user->createOrGetStripeCustomer();

        // フォーム送信の情報から$paymentMethodを作成する
        $paymentMethod=$request->input('stripePaymentMethod');

        // プランはconfigに設定したbasic_plan_idとする
        $plan=config('services.stripe.basic_plan_id');
        
        // 上記のプランと支払方法で、サブスクを新規作成する
        $user->newSubscription('default', $plan)
        ->create($paymentMethod);

        // 処理後に'ルート設定'にページ移行
        return redirect()->route('ルート設定');
    }

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

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

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

8.x Laravel Cashier (Stripe) Laravel

⑩フォームの作成

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

CSSファイルの作成

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

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

【stripe.css】

.MyCardElement {
	height: 40px;
	padding: 10px 12px;
	width: 100%;
	color: #32325d;
	background-color: white;
	border: 1px solid transparent;
	border-radius: 4px;
  
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
  }
  
  .MyCardElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
  }
  
  .MyCardElement--invalid {
	border-color: #fa755a;
  }
  
  .MyCardElement--webkit-autofill {
	background-color: #fefde5 !important;
  }

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

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

支払いを受け付ける

支払いフォームを作成するか、構築済みの決済画面を使用して、オンライン決済の受け付けを開始します。

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

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

【app.blade.php】

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/stripe.css') }}" rel="stylesheet">

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

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

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

【subscription.blade.php】

{{-- ヘッダー部分の設定 --}}
@extends('layouts.app')
@section('content')

<div class="container py-3">
  <h3 class="mb-3">ご登録フォーム</h3>

{{-- フォーム部分 --}}
<form action="{{route('stripe.afterpay')}}" method="post" id="payment-form">
  @csrf
  
    <label for="exampleInputEmail1">お名前</label>
    <input type="test" class="form-control col-sm-5" id="card-holder-name" required>

    <label for="exampleInputPassword1">カード番号</label>
    <div class="form-group MyCardElement col-sm-5" id="card-element"></div>
 
    <div id="card-errors" role="alert" style='color:red'></div>

    <button class="btn btn-primary" id="card-button" data-secret="{{ $intent->client_secret }}">送信する</button>

</form>
</div>

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

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

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

Laravel @extends @include コンポーネントの違いを知りたい人のために解説

Laravelは @include, @extends, componentsと、テンプレートのための機能がそろっています。どう使い分けるかは次のとおり。ファイルを丸ごといれるなら@include 一つのテンプレートをつかうなら@excl...

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

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

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

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

詳しくはこちら。

Could not determine which URL to request : Stripe PaymentMethod instanceエラー対策

LaravelにStripeを連携でこのエラーがでたら、最初にこれだけ行ってみてください。app.blade.phpファイル内の app.js ファイルへのリンクを上部に移動させる。これでエラーが修正できます。Could not deter...

stripe.jsの挿入

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

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

<script src="https://js.stripe.com/v3/"></script>

ヘッダ部分にいれるとエラーになったりもするので、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を入れていきます。

<script>

	// HTMLの読み込み完了後に実行するようにする
	window.onload = my_init;
	function my_init() {

		// Configに設定したStripeのAPIキーを読み込む  
		const stripe = Stripe("{{ config('services.stripe.pb_key') }}");
		const elements = stripe.elements();

		var style = {
			base: {
			color: "#32325d",
			fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
			fontSmoothing: "antialiased",
			fontSize: "16px",
			"::placeholder": {
			color: "#aab7c4"
			}
		},
		invalid: {
			color: "#fa755a",
			iconColor: "#fa755a"
		}
		};
		
		const cardElement = elements.create('card', {style: style, hidePostalCode: true});
		cardElement.mount('#card-element');

		const cardHolderName = document.getElementById('card-holder-name');
		const cardButton = document.getElementById('card-button');
		const clientSecret = cardButton.dataset.secret;

		cardButton.addEventListener('click', async (e) => {
			// formのsubmitボタンのデフォルト動作を無効にする
			e.preventDefault();
			const { setupIntent, error } = await stripe.confirmCardSetup(
				clientSecret, {
					payment_method: {
					card: cardElement,
					billing_details: { name: cardHolderName.value }
					}
				}
			);
			
			if (error) {
			// エラー処理
			console.log('error');
			
			} else {
			// 問題なければ、stripePaymentHandlerへ
			stripePaymentHandler(setupIntent);
			}
		});
	}
	
	function stripePaymentHandler(setupIntent) {
	var form = document.getElementById('payment-form');
	var hiddenInput = document.createElement('input');
	hiddenInput.setAttribute('type', 'hidden');
	hiddenInput.setAttribute('name', 'stripePaymentMethod');
	hiddenInput.setAttribute('value', setupIntent.payment_method);
	form.appendChild(hiddenInput);
	// フォームを送信
	form.submit();
	}
</script>
@endsection

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

これで出来上がりです。