Inertia

Newbie: Laravel Subscriptions with Inertia, Can not read properties

Am following the laravel subscriptions course but trying to implement it with inertia, showing the plan detials is not working out with me.

I don't understand why it keeps returning an empty object, however when I dd on it, it returns all the information, been stuck on this for 2 days.

Here is my controller,

<?php

namespace App\Http\Controllers\Subscription;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Subscription\StripeSubscriptionDecorator;

class SubscriptionController extends Controller
{
    public function __invoke(Request $request)
    {
        // dd(new StripeSubscriptionDecorator($request->user()->subscription()->asStripeSubscription()));
        return inertia()->render('Subscription/Portal', [
            'plan' => $request->user()->subscribed()
            ? new StripeSubscriptionDecorator($request->user()->subscription()->asStripeSubscription())
            : null,
        ]);
    }

    public function portal(Request $request)
    {
        return $request->user()->redirectToBillingPortal(route('subscription.index'));
    }
}

and this is my decorator,

<?php

namespace App\Subscription;

use Stripe\Subscription;

class StripeSubscriptionDecorator
{
    public function __construct(protected Subscription $subscription) {}

    public function title()
    {
        return $this->planFromPriceId($this->subscription->plan->id)['name'];
    }

    public function currency()
    {
        return strtoupper($this->subscription->currency);
    }

    protected function planFromPriceId(string $priceId)
    {
        return once(function () use ($priceId) {
            return collect(config('subscriptions.plans'))
                ->first(fn ($plan) => $plan['price_id'] === $priceId);
        });
    }
}

And this my vue

<script setup>
import { Head } from '@inertiajs/vue3'
import User from '@/Layouts/User.vue'
import Account from '@/Layouts/Account.vue'
import SubscriptionDetails from '@/Components/Subscription/Details.vue'

defineOptions({ layout: [User, Account] })

defineProps({
    plan: Object
})
</script>

<template>
    <div>
        <h2 class="font-bold text-gray-900 font-mono">Subscription information</h2>

        <SubscriptionDetails />

        {{ plan.currency }}
    </div>

    <Head title="Subscription" />
</template>

Am getting the error in the console, that it's returning properties of null, I checked the database, as well as my stripe to make sure there's an active subscription, i also did request the user to make sure hes subscribed and it returned true.

ms_dan Member
ms_dan
0
2
140
alex Member
alex
Moderator

Hey @ms_dan

So sorry, missed this — are you still having trouble with it?

ms_dan Member
ms_dan

hey @alex

yeah i still do, i just ended up directing the user directly to stripe dashboard in the end.