Improving Spark's Subscription UX

Posted on 22 May 2016

Requirements

You’ll need a license for Laravel Spark, and you’ll need to have got it working.

The Problem

Here is the screen a user is sent to when they are not on a plan. The first plan “Basic” is automatically selected, but the “Selected” label can give the appearance that this is the plan that the user is on, when they are in fact on the Free plan, as indicated by the much smaller (and less noticable) text above.

My Solution

I have made two changes to fix this:

It’s generally a bad idea to edit the code in the src/ folder, as this will be overwritten by updates. Instead, Spark provides a method to overwrite default code.

Stop Spark Selecting a Plan

In the file spark/resources/assets/js/spark-components/settings/subscription/subscribe-PROVIDER.js, add a ready() method. Replace PROVIDER with your payment provider, either stripe or braintree.

Vue.component('spark-subscribe-PROVIDER', {
    mixins: [base],

    ready: function() {
      this.selectedPlan = null;
      this.form.plan = "";
    }
});

Hide the payment form by default

In the file resources/views/vendor/spark/settings/subscription/subscribe-PROVIDER.blade.php, add a v-show statement.

<div class="panel panel-default" v-show="selectedPlan">
  <div class="panel-heading">Billing Information</div>
  ...
</div>

That’s it! Now, when a user goes to the page (and is not subscribed already), the first plan will not be selected by default.

FAQs

Why doesn’t this break the ‘Edit Subscription’ page?

The js file is specifically for the ‘Create Subscription’ page, and will only be run if the user is not subscribed. If they are already subscribed, the plan they are on will be selected by default.

How can I do this on the register page?

There’s an answer on the laracasts forums.