Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support
Tutorials
/
đź’µ Building a Subscription App in Boundless
Categories
Tools USEd

đź’µ Building a Subscription App in Boundless

Link to Demo

Part 1: Setting up a single subscription price option

Note: your app must be on the Pro or better plan to enable subscriptions

Preparation:

Subscriptions are handled by Stripe, so you must have a stripe account & have saved your api keys in your Boundless app in Settings -> Integrations.

If you haven’t already configured a Product with a Pricing Plan in Stripe, do that first.
In your Stripe Dashboard, go to Billing -> Products and click the + New button in the top right. A new Product only requires a name.
After creating a new Product, you will be on the details page for that Product. Click + Add pricing plan (midway down on the right). Leave the defaults in place, and fill in the Nickname, the Price per unit and the Billing Interval. Optionally add a Trial Period. These are the options Boundless supports at this time.

Make sure you copy your stripe Publishable Key & Secret Key into your Boundless app on the Settings -> Integrations page.

Building:

  • Click on Pages and select your signup page from the Page Dropdown.
  • Click on the Sign Up button in the form.
  • In the sidebar, you will see the Actions & Data tab is already chosen for you by default.
  • Click + Add Action or Workflow and select Start Subscription from the list.
  • If you did not click the Enable Subscriptions button on the Settings -> Integrations page for your app, then the first time you add the “Start Subscription” action, you will see a modal explaining that Boundless will add a Subscriptions table for you to keep track of users’ subscriptions.
  • Configure the “Start Subscription” action by pasting in the Plan ID from Stripe (it should look like “plan_Ffn4bEE2Szk58a”).
  • Customize the Description field by telling your customers how much & how frequently they will be charged (eg, “Subscribe for $19/month”)
  • Add some text to your form explaining that you must subscribe to sign up.
  • Save your page.
  • On every page that requires a subscription, edit Page Settings Access Restrictions to Require a Logged In User and additionally that the Current Users.Subscription.Status Equals "active".

Note: if you have enabled a Trial Period for your Pricing Plan in Stripe, the Status of those subscriptions will initially be “trialing”. To deal with this scenario I recommend adding a Formula field to the Subscriptions table, call it “Is Active” and make the formula string something like OR(Current Subscriptions.Status = "active", Current Subscriptions.Status = "trialing") and adjust your Page Settings Access Restrictions appropriately.

Part 2: Adding a discounted annual billing option

Step 1: Add a new pricing plan to your product in Stripe

  • In your Stripe dashboard, go to Billing -> Products and click on the product for your app.
  • Click + Add pricing plan and configure the price (for example, I set mine to be ten times the monthly rate, giving users 2 free months for paying for the year up-front).
  • Be sure to adjust the Billing Interval appropriately

Step 2: Add a Pricing Plans table to your app

  • Add 2 Fields
  • A Single-line plain text field called “Pricing Plan ID”
  • A Single-line plain text field called “Description”
  • Add new records for every pricing plan for your site (for example, one for monthly and one for yearly)
  • The “Description” should be something like “$19/month” or “$190/year”

Step 3: Add a new Associated Record field to Users

  • Call it “Chosen Pricing Plan” and make it Associate Records from Pricing Plans. Be sure not to check the checkbox “Link to multiple records”
  • Click on the Pricing Plans table and click the gear icon next to the Users field that was generated when we created the “Chosen Pricing Plan” field and choose “Edit Field”; check the “Link to multiple records” checkbox and save

Step 4: Add a select field to your signup form so users can choose a pricing plan

  • Click on Pages and select the “Sign Up • /signup” page from the Pages dropdown
  • Drag a Select field from the Page Elements section in the top of the sidebar into your signup form
  • Choose the “Chosen Pricing Plan” field you created in Step 3 for the “Associated Data Field”
  • Check the “Required” box
  • For the “Display And Search By” field, pick “Description”‍

Step 5: Use the User’s Chosen Pricing Plan in the “Start Subscription” action

  • Click on the “Sign Up” button to edit the “Start Subscription” action
  • Change the Price Plan ID field from plan text to a Boundle using the select to the right of the field and set it to “Current Users.Chosen Pricing Plan.Pricing Plan ID”
  • Change the Description by setting it to “Subscribe for = Current Users.Chosen Pricing Plan.Description”

Now save your page & publish your site and you’re all done! 

Part 3: Adding a new Tier, for example "Premium"

Step 1: Add a new Product with Pricing Plan(s) in Stripe

  • In your Stripe dashboard, go to Billing -> Products and click + New (in the top right)
  • Choose “Recurring Products” and give it a name (eg, “Premium”)
  • Click Add Pricing Plan to save this product and start creating a Pricing Plan for it
  • Give the Plan a name (for internal use), a Price per Unit and a Billing Interval (optionally add 2 pricing plans, one for monthly & one for yearly)

Step 2: Add records to the Pricing Plans table & update the old ones

  • Add new records for every pricing plan for your site (for example, one for monthly and one for yearly)
  • The “Description” should be something like “Premium: $49/month” or “Premium: $490/year”
  • Update the existing rows’ “Description” attribute to include the product tier Eg: “Basic: $19/month” or “Basic: $190/year”

Step 3: Add marketing copy to the Signup Page

  • Tastes will vary here, but I added content with a Header 1 with “Membership Options” and then two side-by-side content nodes with Header 2 with “Basic” and “Premium” and then some bullet points below about perks of each one. I also made all the text in the “Premium” side a bit bolder.

Don’t forget to save your page & publish your site 

Part 4: Multiple tiers—Iteration

Rationale:
Having a dropdown with Basic & Premium x Monthly & Yearly felt clunky to me. I saw a site today that had a Pricing page which linked to different signup pages, one for each service tier. I thought that was a good way to do it so I wanted to refactor the Western Adventures signup page to be similar.

Step 1: Rename the Signup page to “Signup: Basic” (or similar), and change the path to /signup-basic

  • Adjust copy & design as appropriate

Step 2: Make a new Standard page “Signup: Premium” and make the path /signup-premium

  • Drop the signup form you copied into the premium page
  • Adjust copy & design as appropriate

Step 3: Add a data field to Pricing Plans to filter by, I called it “Product”

  • Update your Pricing Plans records appropriately (that is, set Product = “Basic” for basic plans and Product = “Premium” for premium plans)

Step 4: Go to the Basic & Premium Sign Up Pages and filter the Chosen Pricing Plan appropriately (eg, only show “Basic” plans on the Basic page, show “Premium” plans on the Premium page)

Step 5: Add a “Pricing” page and update links appropriately

  • On the pricing page itself, add marketing copy and links to the basic & premium signup pages
  • Change the “Sign Up” link in the page header to “Pricing”
  • Change other links that used to point to “Sign Up” to “Pricing”

And as always, save your pages frequently and Publish to make your new signup flow live!

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions