Adding Stripe Subscriptions

You can easily monetize your app by adding Stripe subscription plans to your app using the Stripe Subscription Component

By adding Stripe subscription plans to your app, you can seamlessly charge your users on a recurring basis based on your custom-defined subscription plan settings.

How to Configure Stripe Subscriptions

Configuring Stripe subscriptions requires several steps. We purposely require several steps to setup your Stripe subscription plans in order to grant you greater control of nearly all aspects of your user subscription workflow. 

Configuring Stripe subscription plans includes the following steps:

  1. Setup Subscription Plans in Stripe (Required)
  2. Update API Keys in Tadabase (Required)
  3. Add User Roles (Recommended)
  4. Add Stripe Subscription Component

Let's walk through each of these steps below to configure your Stripe subscription plans.

Setup Subscription Plans in Stripe 

Beginning in your Stripe account, click Products > +Add Product button to add a new product. 

Then, add all the pricing plans that will be associated with the product.

As you can see in our example below, we've added four plans, each with different billing amounts and pricing intervals. 

Update API Keys in Tadabase

The next step is to integrate your Stripe subscription plans into your Tadabase app. Still within your Stripe account, copy the Publishable Key and the Secret Key. 

Then, in your Tadabase app, paste these keys into your Tadabase app settings by going to Settings > Subscription. Under Subscription Settings, set Subscription Service to Enabled and then paste your API Key and API Secret which you copied from your Stripe account. 

As you can see in the image below, once you've pasted your API Key and Secret and click Save, all the plans you set up in your Stripe account will be dynamically pulled into your Tadabase app and will appear within the Subscription Plans tab

Note: You will be required to refresh the page for updates and changes to be reflected in the Tadabase Builder. 

 

Add User Roles

You can then choose to create a user role for each subscription plan in order to restrict access to pages in your app based on which users are subscribed to certain subscription plans.

While creating a user role for each subscription plan is optional, it is recommended as doing so will enable you to secure pages in your app based on each user's subscription plan and plan status. 

When subscription plans are assigned to user roles, the following behind-the-scenes workflow occurs every time a user attempts to access a secured page:

User-Roles-and-Subscriptions@2x.png

As you can see in the diagram above, you can automatically grant and deny access to secured pages in your app based on each user's subscription plan status.

Tadabase recommends adding one user role per subscription plan.

To create a user role for each subscription plan, go to the Data Builder > Users data table > Roles tab. Under Add New Role, give the new role a name and optional description. Then set Associate Role with a Subscription Plan to Enable and assign this new role to an existing Stripe subscription plan by choosing the plan from the dropdown list of existing Stripe plans. 

For instance, in the example below we have created a new user role called "Pro Yearly" and assigned it to the "Pro Yearly" Stripe subscription plan.

 

Add Subscription Component

Once you have utilized the above steps to configure your Stripe subscription plans, the next step is to create the visual interface with which your users can interact with these Stripe subscription plans on your Tadabase app.

In the Page Builder of your Tadabase app, add the Stripe Subscription Component to a page(s) of your choice to provide your users with the ability to browse your subscription plans, choose a plan, and subscribe to the plan using their credit card information.

To add the Stripe Subscription Component to your app, simply add it to a page within the Page Builder. 

Once you've added the component to a page, double click on the component to open it and add the details of your subscription plans and tabs as you would like them to appear to your users. For instance, in the example below, we added the following subscription plan details within two tabs:

On the live app, this sample subscription component will appear as such:

When users click to subscribe to a plan, a pop up window will appear for users to enter their credit card details and subscribe to that plan.

 

When testing, you can use the following credit card numbers to test: 4242 4242 4242 4242 and any future date for an expiration date. For the CVC code, any 3 digit number will work. Please see this Stripe Article on testing authorizations. 

 

Customizing Subscription Behavior

Within the Stripe Subscription Component, you can configure the settings, rules, and display text of each subscription plan. 

To customize the details of a subscription plan, click on its edit pencil icon within the subscription component. 

A new Edit Plan Details window will popup for you to customize that subscription plan's details.

Let's discuss the different tabs and settings available to customize for each plan within each plan's Edit Plan Details window.

Options 

The first tab, the Options tab, includes the following settings.

Enable Plan

You can enable or disable the ability to subscribe to this plan. Setting the Enable Plan setting to "No" will remove the subscribe button for this plan and setting is to "Yes" will display the Subscribe button. 

 

Multiple Subscriptions

You can allow or disallow the ability for users to re-subscribe to the same plan.

If a user is already subscribed to a particular plan, you can remove the ability to re-subscribe to the same plan by selecting the "Disallow" option. Under Multiple Subscriptions Message, you can enter the error message you wish to display when users attempt to subscribe to a plan that they are already subscribed to. 

Tadabase checks behind the scenes if the user already has a record in the User Subscriptions data table with this plan. If this plan is present, even if it is not "Active", it will still be considered a duplicate. 

To view all subscription records, go to the Data Builder > Users data table > User Subscriptions tab

user-subscriptions-tab.png

 

Subscription Button Text

This is where you can customize the display text of the subscription button that will appear under certain circumstances, such as during a user's trial period on the plan or when a user is not logged in to your app. 

With Trial

If in your Stripe account you configured a subscription plan to have a trial period, when users are in their trial periods their credit cards are saved in Stripe but not yet charged. Therefore, when subscription plans are in their trial periods, the subscription button text will, by default, display as "Authorize and Subscribe" rather than "Pay and Subscribe". 

If you wish, you can customize the trial period subscription button text to the text of your choice. 

Without Trial

By default, when a subscription plan is beyond its trial period or if it does not have a trial period, the subscription button text will display as "Pay and Subscribe". You can customize this text as you choose. 

Login

Subscriptions are logged and tracked in your app by the subscribing users. Therefore, users must be logged in to your app in order to subscribe to plans. If a user is not logged in to your app, the subscription button text will, by default, display as "Login to Continue" in order to prompt the user to first login to your app so that the user can then subscribe once logged in. You can customize this button text as you choose.

 

Record Rules

Tadabase manages each new subscription for you automatically by auto-creating a new record for each new subscription within the Data Builder > Users data table > User Subscriptions tab. Every time a user subscribes to one of your subscription plans, a new record including the Plan Name, Stripe Customer ID, etc. will be automatically added to this table. 

user-subscriptions-tab.png

Although Tadabase automatically creates a new record including the key values of each new subscription within this User Subscriptions table, you have the option to add Record Rules to create or update the records of subscribing users within the Users data table.

To add a Record Rule to a subscription plan, open the Stripe Subscription Component, click on a plan's pencil icon to edit it ,go to the Record Rules tab within the plan's Edit Plan Details window, and add the Record Rule of your choice. For instance, you can create a Record Rule to update the subscribing user's record and set the Last Invoice ID to the Stripe Value of the Last Invoice ID. 

 

Redirect Rules

In the Redirect Rules tab of a plan's Edit Plan Details window, you can create Redirect Rules to redirect users to a specific page in your app once they have successfully subscribed to the plan.

For instance, you can redirect users to the Annual Success page upon successful subscription to this plan. 

 

Emails

In the Emails tab of a plan's Edit Plan Details window, you can create automated emails that will be auto-sent upon successful subscription to this plan.

Each email can include custom conditions, custom messages including field value placeholders, a custom or field value from name, and custom or field value email addresses. You can create multiple automated emails per subscription plan. 

 

Restricting App Access by Subscription

(This section is currently under construction. Please check back soon.)

Once you've configured Stripe and enabled users to subscribe, you can choose to customize restrictions for nearly all aspects of your app based on each user's subscription plan and plan status. 

There are several ways in which you can use subscriptions to restrict access to your app:

  1. Using User Roles
  2. Using Associated Roles
  3. Using Page Rules with Subscription Record Rules
  4. Using Page Rules with the Stripe Pipe

 

Managing User Subscriptions

You have the ability to manage all your users' subscriptions and your subscribing users have the ability to manage their individual subscriptions on your app as well.  

Admin Management

You can manage all your user subscriptions by going to the Data Builder > Users data table > User Subscriptions tab. There you will find an independent data table called User Subscriptions which stores all records of user subscriptions to your app.

user-subscriptions-tab.png

Tadabase manages all user subscriptions for you automatically by auto-storing all subscription records including key subscription values such as the Plan Name, Stripe Customer ID, etc. every time a new subscription is made.

User Management 

(This section is currently under construction. Please check back soon.)

Subscribing users can manage their individual subscription plans on your app via the following two ways: 

  1. Using the My Subscriptions Component (Basic)
  2. Using custom created tables together with forms, action links, or pipes (Advanced)

Let's explore each of these two ways in which subscribing users can manage their own subscriptions on your app.

Using the My Subscriptions Component

One of the System Components that Tadabase offers is the My Subscriptions Component. Adding the My Subscription Component to a page will allow your users to manage their individual subscriptions with the ability to view their subscription plan details, view their subscription invoices, and cancel their subscriptions. 

Using Custom Subscription Components

This table can be added as a data component to any page and also filtered to only show subscriptions that belong to the logged-in-user. 

Once this table is added, you can create Pipes and Action links to manage the subscription.