Spark Sign Up Form | Set to monthly or yearly or a specific plan

The selected plan is managed via vuejs in laravel\spark\resoures\assets\js\mixins\register.js.

You have to overwrite the method selectAppropriateDefaultPlan() with your own implementation to change it.

So, go here: \resources\assets\js\spark-components\auth\register-stripe.js and make your own implementation (or braintree if you use that)

I do select the free plan as default for example, so my register-stripe.js looks like this:

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base],

    methods: {

        /**
         * Select the appropriate default plan for registration.
         * Partially overwriting laravel\spark\resoures\assets\js\mixins\register.js to set free plan as default plan
         */
        selectAppropriateDefaultPlan() {
            this.selectFreePlan();
        }
    }            
});

Sorry to be bumping up a month old thread but given there's a lot of inbound links to this one with regards to setting plans, I thought it'd be best to ask here in hope that an answer would help others too.

What I'd like to do is on my registration form make it so we sign people up for a trial on a specific (non-free) plan. I'm assuming it's going to be a pretty simple thing to do and would go inside the selectAppropriateDefaultPlan() method, however I'm pretty new to Vue and cant for the life of me figure out how it'd be done, and what we use as a reference to that plan.

Any ideas on how I'd go about doing this? (Also not sure if it makes a difference, but I'm using teams)

Thanks!

I know this is a very old question. But for anyone else that may stumble on this... I couldn't for the life of me figure out how to get subscribe-registration set up until I figured out you have to remove the noCardUpFront method from the SparkServiceProvider.

So - in its booted() method remove ->noCardUpFront() - this then prompts the user for their credit card details & billing address details up front, along with plan selection.

Secondly, in my case I had two plans - so for me to default select the second plan, I did the following, as a continuation of @EventFellows' solution.

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base],
    methods: {
        selectAppropriateDefaultPlan() {
            this.selectedPlan = this.plans[1];
        }
    }
});

Thought I would add to this even though it's an old question as I could have done with this - I've added the option to set the plan via url like ?plan=basic which looks at the plan id attribute which means you can link to it from landing pages / emails etc. I made it check for the url attribute and if it's not there just set it to the free plan by default

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base],

    methods: {

        selectAppropriateDefaultPlan() {

            //if plan attribute is set, select the corresponding plan
            let self = this;
            if(self.query.plan) {
                self.plans.forEach(function(item, index) {
                    if(self.query.plan === item.id) {
                        self.selectedPlan = self.plans[index];
                    }
                })
            } else {
                this.selectFreePlan(); //Set it to free plan by default
            }
        }
    }
});