Custom theme payment integration

Themes
1

Hi, I am a vibe coder, and have built out a custom Subscribe page instead of using Ghost’s default. When the user hits subscribe (paid subscription), it correctly takes them to Stripe for their payment information. After the payment is successful from Stripe though, there are a few things it doesn’t do properly upon transitioning back to my ghost website:

  1. it does not automatically log in the user into my ghost site, instead it defaults to them receiving a log in link via email;
  2. it does not take them to my desired page per Ghost Admin settings;
  3. the user does not receive a welcome email per Ghost Admin settings.

I would greatly appreciate any help from the community! See below my code for the Subscribe page.

{{!< default}}

form\[data-members-form\].success .message-success { display: block; } form\[data-members-form\].error .message-error { display: block; } form\[data-members-form\].success .form-fields { display: none; } <div 
class="container pt-14 lg:pt-14 pb-16 text-center"

x-data="{

    cycle: 'monthly',

    discount: 0,

    hasTrial: false,

    init() {

        let maxDiscount = 0;

        document.querySelectorAll('\[data-monthly\]\[data-yearly\]').forEach(card => {

            const m = parseInt(card.dataset.monthly);

            const y = parseInt(card.dataset.yearly);

            if (m && y) {

                const d = Math.round((1 - (y / (m \* 12))) \* 100);

                if (d > maxDiscount) maxDiscount = d;

            }

        });

        this.discount = maxDiscount;

        this.hasTrial = document.querySelector('\[data-trial\]') !== null;

    }

}"

>

<header class="mb-16">

    <h1 class="text-4xl md:text-5xl lg:text-5xl tracking-tight mb-6">Subscribe.</h1>

    <p class="text-xl lg:text-2xl text-slate-700">Join our community.</p>

</header>



{{!-- Billing Toggle --}}

<div class="toggle-container inline-flex gap-1 p-1 mb-10 bg-slate-200">

    <button 

        class="toggle-btn flex-1 min-w-\[150px\] px-6 py-2.5 text-sm font-semibold cursor-pointer transition-all whitespace-nowrap border text-center"

        :class="cycle === 'monthly' ? 'bg-white text-slate-900 shadow-sm font-extrabold !border-slate-900' : 'bg-transparent text-slate-500 border-transparent'"

        @click="cycle = 'monthly'"

    >Monthly</button>

    <button 

        class="toggle-btn flex-1 min-w-\[150px\] px-6 py-2.5 text-sm font-semibold cursor-pointer transition-all whitespace-nowrap border text-center"

        :class="cycle === 'yearly' ? 'bg-white text-slate-900 shadow-sm font-extrabold !border-slate-900' : 'bg-transparent text-slate-500 border-transparent'"

        @click="cycle = 'yearly'"

    >Yearly<span 

            class="text-accent text-sm font-bold ml-1"

            x-show="discount > 0"

            x-text="'(SAVE ' + discount + '%)'"

        ></span></button>

</div>



<div class="flex flex-wrap justify-center items-stretch gap-8">

    

    {{!-- Free Tier (from Ghost) --}}

    {{#get "tiers" filter="type:free" include="benefits"}}

        {{#foreach tiers}}

            <div class="tier-card bg-white border-2 border-slate-900 p-10 flex flex-col justify-between text-left w-full max-w-sm">

                <div>

                        <div class="lg:min-h-\[220px\]">

                        {{!-- Badge placeholder for alignment --}}

                        <div class="-mt-3 h-6 mb-2 lg:mb-5"></div>

                        <div class="flex items-start justify-between gap-2 mb-2">

                            <div class="text-xl font-extrabold uppercase text-accent tracking-wide">{{name}}</div>

                        </div>

                        <div class="text-5xl font-bold text-slate-900 mb-2 font-heading">

                            $0 <span x-show="cycle === 'monthly'" x-cloak class="text-base font-medium text-slate-500">/ month</span><span x-show="cycle === 'yearly'" x-cloak class="text-base font-medium text-slate-500">/ year</span>

                        </div>

                        {{!-- Discount placeholder for alignment --}}

                        <div class="h-6 md:h-5 mb-4"></div>

                        {{#if description}}

                            <p class="text-base text-slate-500">{{description}}</p>

                        {{/if}}

                    </div>

                    {{#if benefits}}

                        <ul class="space-y-3 mt-6">

                            {{#foreach benefits}}

                                <li class="flex items-start gap-2.5">

                                    <svg class="w-5 h-5 text-emerald-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>

                                    {{this}}

                                </li>

                            {{/foreach}}

                        </ul>

                    {{/if}}

                </div>

                <form data-members-form="signup" class="mt-auto pt-14">

                    <div class="form-fields">

                        <input 

                            data-members-email 

                            type="email" 

                            required="true" 

                            placeholder="email@company.com" 

                            class="w-full p-4 mb-2.5 border border-slate-900 bg-slate-50 font-sans"

                        />

                        <button type="submit" class="block w-full p-4 bg-white text-slate-900 text-center font-bold uppercase border-2 border-slate-900 cursor-pointer hover:bg-slate-900 hover:text-white transition-colors">

                            Join Basic

                        </button>

                    </div>

                    <div class="message-success hidden mt-2.5 text-emerald-500">Thank you, check your inbox to confirm!</div>

                    <div class="message-error hidden mt-2.5 text-red-500">Please enter a valid email.</div>

                </form>

            </div>

        {{/foreach}}

    {{/get}}



    {{!-- Paid Tiers (from Ghost) --}}

    {{#get "tiers" include="monthly_price,yearly_price,benefits,trial_days,currency" limit="15" filter="type:paid"}}

        {{#foreach tiers}}

            <div 

                class="tier-card bg-white border-2 border-slate-900 p-10 flex flex-col justify-between text-left shadow-lg hover:shadow-2xl hover:-translate-y-1 transition-all duration-200 w-full max-w-sm"

                data-monthly="{{monthly_price}}" 

                data-yearly="{{yearly_price}}"

                {{#if trial_days}}data-trial="{{trial_days}}"{{/if}}

            >

                <div>

                        <div class="lg:min-h-\[220px\]">

                        {{!-- Most Popular Badge Row --}}

                        <div class="-mt-3 min-h-6 lg:h-6 mb-2 lg:mb-5">

                            {{#if @first}}

                                <span class="bg-accent text-white text-xs font-bold px-3 py-1 uppercase inline-block mb-6 lg:mb-0">

                                    Most Popular

                                </span>

                            {{/if}}

                        </div>

                        <div class="flex items-start justify-between gap-2 mb-2">

                            <div class="text-xl font-extrabold uppercase text-accent tracking-wide">{{name}}</div>

                            {{#if trial_days}}

                                <span class="shrink-0 bg-emerald-100 text-emerald-700 text-xs font-bold px-2 py-1">

                                    {{trial_days}} days free

                                </span>

                            {{/if}}

                        </div>

                        

                        <div class="text-5xl font-bold text-slate-900 mb-2 font-heading">

                            <span x-show="cycle === 'monthly'" x-cloak>{{price monthly_price currency=currency}} <span class="text-base font-medium text-slate-500"><span class="uppercase">{{currency}}</span> / month</span></span>

                            <span x-show="cycle === 'yearly'" x-cloak>{{price yearly_price currency=currency}} <span class="text-base font-medium text-slate-500"><span class="uppercase">{{currency}}</span> / year</span></span>

                        </div>

                        <div class="h-6 md:h-5 mb-4">

                            <span x-show="cycle === 'yearly'" x-cloak class="text-sm text-accent font-medium"

                                x-data="{ tierDiscount: Math.round((1 - ({{yearly_price}} / ({{monthly_price}} \* 12))) \* 100) }"

                                x-text="tierDiscount + '% discount'"></span>

                        </div>

                        {{#if description}}

                            <p class="text-base text-slate-500">{{description}}</p>

                        {{/if}}

                    </div>



                    {{#if benefits}}

                        <ul class="space-y-3 mt-6">

                            {{#foreach benefits}}

                                <li class="flex items-start gap-2.5">

                                    <svg class="w-5 h-5 text-emerald-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>

                                    {{this}}

                                </li>

                            {{/foreach}}

                        </ul>

                    {{/if}}

                </div>

                

                <div class="mt-auto pt-14">

                    <a

                        href="javascript:void(0)"

                        :data-portal="'signup/{{id}}/' + cycle"

                        class="block w-full p-4 bg-slate-900 text-white text-center font-bold uppercase no-underline border-2 border-slate-900 hover:border-accent cursor-pointer hover:bg-accent transition-colors"

                    >

                        {{#if trial_days}}

                            Start {{trial_days}}-day free trial

                        {{else}}

                            {{#match name "Team Plan"}}

                                Get Team Access

                            {{else}}

                                Select {{name}}

                            {{/match}}

                        {{/if}}

                    </a>

                </div>

            </div>

        {{/foreach}}

    {{/get}}



</div>



{{!-- Free trial disclaimer --}}

<p class="mt-10 text-sm text-slate-500 max-w-xl mx-auto" x-show="hasTrial" x-cloak>

    Your card will not be charged until your free trial ends. Cancel anytime before then to avoid payment.

</p>



<p class="mt-10 text-sm text-slate-400">

    Secure payment via Stripe. Cancel anytime.

</p>



<p class="mt-8 text-sm text-slate-500">

    Already have an account? <a href="/signin/" class="text-slate-500 font-semibold underline hover:text-slate-900 transition-colors">Sign in</a>

</p>