Laravelでサブスクリプションの決済機能を実装してみた

環境

• Laravel Homestead 7.19.2
• Laravel 7.3
• node 8.12.0
• npm 6.10.2
• jquery 3.5.1
• stripe.js v3

環境の準備

プロジェクト作成

プロジェクト名は、subscription とします。

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

認証系

composer require laravel/ui

php artisan ui vue --auth

アセットのコンパイル

npm install

npm run watch

migration

一度、user, password_resetsのmigration
あとで、cashierを導入したあとにmigrationするのでここはやらなくてもOK)

php artisan migrate

laravel cashier のインストール

composer require laravel/cashier

php artisan migrate

Billable TraitをUser Modelに追加

use Laravel\Cashier\Billable;

class User extends Authenticatable
{
    use Billable;
}

Stripeに登録

登録したら、テスト用のAPIキーを取得し

• 公開可能キー
• シークレットキー

を確認する

.envに値を設定

STRIPE_KEY=公開可能キー
STRIPE_SECRET=シークレットキー

商品を追加

Stripeのダッシュボードから商品を追加

商品詳細ページからAPI_IDを確認（price_~~~で始まるやつ）

ダッシュボードの商品ページのメタデータ欄にて、データを追加登録する
「localName」というキー名で登録してますが、任意名でOKです。
後々に設定したキー名を利用しているのでこの名前でない場合には適宜変更してください。
値には、Laravel側で利用する名前を任意で設定します。（DBにこの値が登録される）

curl https://api.stripe.com/v1/plans/{API_ID} -u {.envに登録したシークレットキー}

で、商品詳細が返ってくればOK
（passwordとか聞かれても、そのままEnter）

サブスクリプションの生成

Stripeでサブスクリプションを生成するか「一度だけ」の課金を実行するためには、支払い方法を登録し、IDを取得する必要があります

どうやら支払い方法を登録するとこからスタートするようです。

支払い方法の保存

支払い情報を集めるフォームをレンダーするコントローラーから以下のメソッドを呼び出し、ビューに渡す

HomeController.php

    public function index()
    {
        $user = Auth::user();
        return view('home', [
            'intent' => $user->createSetupIntent()
        ]);
    }

支払い情報を集めるビュー(home.blade.php)

home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="card col-md-8">
            <form action="/subscribe" method="post" id="payment-form">
                @csrf

                {{-- 商品情報 --}}
                <div class="form-group">
                    <label>サブスクリプション商品:</label>
                    <select id="plan" name="plan" class="form-control">
                        <option value="Stripeの商品ページにあるAPI_ID">テストプレミアムプラン</option>
                    </select>
                </div>

                {{-- カード情報 --}}
                <div class="form-group">
                    <label for="card-holder-name">支払い情報:</label>
                    <div>
                        <input id="card-holder-name" class="form-control" type="text" placeholder="カード名義人">
                    </div>
                    <div id="card-element" class="w-100">
                    <!-- A Stripe Element will be inserted here. -->
                    </div>

                    <!-- Used to display form errors. -->
                    <div id="card-errors" role="alert"></div>
                </div>
                <input type="hidden" id="stripeToken" name="stripeToken">

                <div id="card-button" class="btn btn-primary mt-5" data-secret="{{ $intent->client_secret }}">Submit Payment</div>
            </form>
        </div>
    </div>
</div>
@endsection

{{-- jquery --}}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
{{-- stripe.js --}}
<script src="https://js.stripe.com/v3/"></script>
<script>
    $(function() {
        // Create a Stripe client.
        var stripe = Stripe('.envに追加した公開可能キー');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
            color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
        };

        // Create an instance of the card Element.
        var cardElement = elements.create('card', {style: style});

        // Add an instance of the card Element into the `card-element` <div>.
        cardElement.mount('#card-element');

        const cardHolderName = $("#card-holder-name");
        const cardButton     = $("#card-button");
        const clientSecret   = cardButton.data('secret');

        cardButton.on('click', async (e) => {
            cardButton.prop('disabled', true);
            const { setupIntent, error } = await stripe.confirmCardSetup(
                clientSecret, {
                    payment_method: {
                        card: cardElement,
                        billing_details: { name: cardHolderName.value }
                    }
                }
            );

            if (error) {
                // ユーザーに"error.message"を表示する…
                cardButton.prop('disabled', false);
            } else {
                // カードの検証に成功した…
                cardButton.prop('disabled', false);

                // 支払い方法識別子
                var form = $('#payment-form');
                var hiddenInput = $("#stripeToken");
                hiddenInput.attr('value', setupIntent.payment_method);

                form.submit();
            }
        });
    })
</script>

<style>
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
</style>

• カードの入力フォームはStripe Elementsが勝手に作ってくれます。
• w-100 を設定しているのは、既存のapp.cssと競合し、上手くフォームが表示されないため。
• HomeController@indexにて設定した$intentのclient_secretをdata-secretに設定し、
  cardButton.data('secret');にて取得後、カードの検証に利用する

テスト用カード

https://stripe.com/docs/testing
上記リンク先にて用意されているので、こちらを利用して検証を行える。

サブスクリプションの開始

web.phpに以下を追加

web.php

Route::post('/subscribe', 'SubscriptionController@subscribe');

• HomeController.php のindex()を修正
• home.blade.php　の商品情報を修正
• User.php　にproducts()追加
• Price Modelを追加
• SubscribeRequest.phpを追加

上記を以下のように改修

HomeController.php

    public function index()
    {
        $user = Auth::user();

        return view('home', [
            'intent'       => $user->createSetupIntent(),
            // 現在のユーザーに紐づいているサブスクリプション
            'userProducts' => $user->products(),
            // dashboardで作成されているサブスクリプション全件
            'products'     => Price::getAll(),
        ]);
    }

home.blade.php

    {{-- 商品情報 --}}
    <div class="form-group">
        <label>サブスクリプション商品:</label>
        <select id="plan" name="plan" class="form-control">
            @foreach ($products as $product)
                <option value="{{ $product->id }}">{{ $product->productName }}</option>
            @endforeach
        </select>
    </div>

Stripeのダッシュボードにあるメタデータを利用するために、
prod_xxxxxxxxxxxxxxxxxxxxx
が必要になるので、stripe_idから紐づくProductオブジェクトを取得

User.php

    /**
     * ユーザーに紐づいているサブスクリプションを返す
     */
    public function products() {
        $products = [];
        foreach ($this->subscriptions()->get() as $subscription) {
            $priceId = $subscription->stripe_plan;

            // price id から plan を取得
            $plan = Plan::retrieve($priceId);
            // prod id から product を取得
            $product =Product::retrieve($plan->product);

            // dashboardで設定したメタデータを取得
            $localName           = $product->metadata->localName;
            $product->cancelled  = $this->subscription($localName)->cancelled();

            $products[] = $product;
        }

        return $products;
    }

Stripe\Price.phpを継承したモデルを追加
ダッシュボードで設定した商品名を利用するために、Productオブジェクトからnameを取得

Price.php

<?php

namespace App\Http\Models;

use Stripe\Product;
use Stripe\Price as StripePrice;

class Price extends StripePrice
{
    /**
     * price に紐づくproduct name を付加して全件返す
     */
    public static function getAll()
    {
        $retPrices = [];
        foreach (StripePrice::all() as $price) {
            $product = Product::retrieve($price->product);

            // price に紐づく product name を付加
            $price->productName = $product->name;

            $retPrices[] = $price;
        }

        return $retPrices;
    }
}

サブスクリプションを開始する商品のAPI_IDとカードの検証が成功して返ってきた支払い方法識別子を引数に渡し、createを実行

ダッシュボードで設定したメタデータのlocalNameを利用して登録するようにする

SubscriptionController.php

    public function subscribe(SubscribeRequest $request)
    {
        $user          = $request->user();
        $priceId       = $request->get('plan');
        $paymentMethod = $request->get('stripeToken');

        // price id から plan を取得
        $plan = Plan::retrieve($priceId);
        // prod id から product を取得
        $product   = Product::retrieve($plan->product);
        $localName = $product->metadata->localName;

        // サブスクリプション開始
        $user->newSubscription($localName, $priceId)->create($paymentMethod);

        return redirect('/home');
    }

定期課金中、または、キャンセルした商品の場合には、重複して登録できないようにValidationを追加

SubscribeRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Laravel\Cashier\Subscription;

class SubscribeRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
        ];
    }

    public function withValidator($validator)
    {
        $validator->after(function ($validator) {
            $user         = $this->user();
            $priceId      = $this->get('plan');
            $subscription = Subscription::whereStripePlan($priceId);

            $isSubscribed = $subscription->count()
                ? $user->subscribed($subscription->first()->name)
                : false;
            $isCancelled = $subscription->count()
                ? $user->subscription($subscription->first()->name)->cancelled()
                : false;

            if ($isSubscribed) {
                if ($isCancelled) {
                    $validator->errors()->add('is_cancelled', "選択された商品は、キャンセル中です。再開ボタンを利用してください");
                } else {
                    $validator->errors()->add('is_subscribed', '選択された商品は、定期課金中です');
                }
            }
        });
    }
}

ボタンをクリックしてみて、Stripeのダッシュボードでサイドメニューの「支払い」に反映されていれば成功

サブスクリプションのキャンセルと再開

• web.phpにルート追加
• home.blade.phpにform追加
• SubscriptionController.phpにキャンセルと再開のメソッド追加

web.php

Route::post('/cancel', 'SubscriptionController@cancel');
Route::post('/resume', 'SubscriptionController@resume');

クリックされたボタンによってaction属性を切り替えています。

home.blade.php

@extends('layouts.app')
～～～
            {{-- error ディレクティブ --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        {{ $error }}
                    @endforeach
                </div>
            @endif

            {{-- 現在の課金状況 --}}
            <div class="mb-6">
                <form method="post" id="subscribed-plan">
                    @csrf
                    @foreach ($userProducts as $product)
                        @if ($product->cancelled)
                            <div class="mb-3">
                                <div class="mb-0 alert alert-secondary radius">現在 {{ $product->name }}はキャンセル中です。</div>
                                <div id="resume-button" class="resume btn btn-success" onclick="resume('{{ $product->id }}')">再開</div>
                            </div>
                        @else
                            <div class="mb-3">
                                <div class="mb-0 alert alert-success radius">現在 {{ $product->name }}を定期課金中です。</div>
                                <div id="cancel-button" class="cancel btn btn-danger" onclick="cancel('{{ $product->id }}')">キャンセル</div>
                            </div>
                        @endif
                    @endforeach
                    <input type="hidden" id="prodId" name="prodId">
                </form>
            </div>
～～～

<script>
    function cancel(prodId) {
        const form         = $('#subscribed-plan');
        const cancelButton = $(".cancel");
        const resumeButton = $(".resume");
        const hiddenProdId = $("#prodId");

        // 商品IDを設定
        hiddenProdId.attr('value', prodId);

        cancelButton.prop('disabled', true);
        resumeButton.prop('disabled', true);

        form.attr('action', '/cancel');
        form.submit();
    }

    function resume(prodId) {
        const form         = $('#subscribed-plan');
        const cancelButton = $(".cancel");
        const resumeButton = $(".resume");
        const hiddenProdId = $("#prodId");

        // 商品IDを設定
        hiddenProdId.attr('value', prodId);

        cancelButton.prop('disabled', true);
        resumeButton.prop('disabled', true);

        form.attr('action', '/resume');
        form.submit();
    }
</script>

SubscriptionController.php

    public function cancel(Request $request)
    {
        $user    = $request->user();
        $prodId  = $request->get('prodId');
        $product = Product::retrieve($prodId);

        // サブスクリプションキャンセル
        $user->subscription($product->metadata->localName)->cancel();

        return redirect('/home');
    }

    public function resume(Request $request)
    {
        $user    = $request->user();
        $prodId  = $request->get('prodId');
        $product = Product::retrieve($prodId);

        // // サブスクリプション再開
        $user->subscription($product->metadata->localName)->resume();

        return redirect('/home');
    }

最終的に完成したフォーム

STRIPE_SECRETに関して

今回のコードを書いている際にシークレットキーが設定されてない旨のエラーが発生しました。

下記のコードを追加すれば解決しますが、最適な設定場所に迷ったので、とりあえず、各Controller.php@__construct()に記述して今回は対応しました。

Stripe::setApiKey(env('STRIPE_SECRET'));

まとめ

今回は、サブスクリプションの作成、登録、キャンセル、再開の処理に関して実装しました。
まだまだ冗長な個所も多く、間に合わせな処理も多く見られますが、基本的な処理は実装できたかと思います。

まだ、リファレンスを見るとカードの事前登録だったり、インボイスの作成も可能なようなので、今後実装ができたら記事を更新しようかと思います。

参考資料

• https://readouble.com/laravel/7.x/ja/billing.html
• https://stripe.com/docs/api
• https://stripe.com/docs