Improving Subscription UX in Laravel Spark

A better version of this tutorial is now live at my blog.

I’ve been trying out Spark recently. Whilst, in general, the UX is streamlined, the process around creating a subscription can be messy and confusing.

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 my app to resolve this:

  • No plan is selected by default
  • The billing form is hidden until the plan is selected.

In the file spark/resources/assets/js/settings/subscription/subscribe-stripe.js, comment out these lines in the ready() method.

this.selectPlan(
this.paidPlansForActiveInterval[0]
);

This is the code that automatically selects the first available plan.

Then, you’ll need to hide the payments form. I did this by adding a custom class to the form, and hiding it in the ready() method of the file.

$("#billingInfoPanel").hide();

Finally, to show the payments form when a plan is selected, at the following to the selectPlan function:

$("#billingInfoPanel").show();

No plan will be selected by default, and the payments field will be hidden until a plan is selected.

This is the end result. The payment fields are shown when a plan is selected. You may notice that some other stuff has changed as well, I don’t have a screenshot of this tutorial applied to base spark.