This template uses Bubble's official Stripe plug-in to enable your users to upgrade to a paid subscription to your site ("pro" account).

If you want to use this feature, you must follow these steps to set it up.

1. Sign Up for Stripe / Setup API Keys
2. Update Pricing in Your Bubble App
3. Configure Subscription Plans
4. Optional: Setup Hyperlink to Stripe Customer Portal

Setup Step 1: Sign Up for Stripe / Setup API Keys

Sign up for an account at Stripe.com, then find your API keys in Stripe, and enter them into Bubble's settings (Plugins > Stripe).

Four keys:

• Live Secret Key
• Live Publishable Key
• Secret Key - development
• Publishable Key - development

Setup Step 2: Update Pricing in Your Bubble App

Update the pricing on the engage reusable popup (e.g. $69/mo for monthly, $49/mo for annual recurring) to reflect your actual pricing.

Setup Step 3: Configure Subscription Plans

In Stripe

Login to Stripe.com (Products section) and create subscription plans (a.k.a. Products) that users can sign up for.

By default, this template supports two plans: 

• Monthly Subscription
• Annual Subscription

Since both Stripe and Bubble have live/dev environments, you create identical subscription plans for each environment. First, click "Add product" in Stripe and create your first two products:

• Monthly (Live version)
• Annual (Live version)

Then, click the "Test mode" button in Stripe to toggle to the developments. Click "Add product" to add two corresponding products:

• Monthly (Dev version)
• Annual (Dev version)
  
  

In Bubble

Once you have created Plans in Stripe, then go into the engage reusable element and click the Bubble Workflow entitled "When Button Continue is clicked".  Next, paste in each of the four appropriate "Stripe plan names" into the four steps of the flow (a.k.a. "Subscribe the user to..."):

The "Only when" logic is shown below:

• Monthly (Dev version): engage's acct_type is monthly and Isn't live version is "yes"
• Annual (Dev version): engage's acct_type is annual_recurring and Isn't live version is "yes"
• Monthly (Live version):  engage's acct_type is monthly and Isn't live version is "no"
• Annual (Live version): engage's acct_type is annual_recurring and Isn't live version is "no"

Step 4 (Optional): Setup Hyperlink to Stripe Customer Portal

In Bubble

If you want to provide a way for existing paid subscribers ("pro" account type) to update their Stripe payment information, you can do so with the Stripe Customer Portal plugin which is already included with this template.

This plugin powers the link (e.g. "Update Card Information") on the user's My Account page as shown below.

 After clicking this link, the user is taken to a Stripe-hosted page where they can perform actions such as:

• Update payment method
• Add payment method
• View invoice history

To configure the Stripe Customer Portal plugin in Bubble, simply go to the Stripe Customer Portal Plugin and enter the following information:

• API Key:  This is the same as the Live Secret Key you entered above from Stripe, except you must start with the word "Bearer "
• Stripe Portal - return_url: This is where you want the user to return afterwards (eg the My Account page for your live app)
• API Key - dev.: This is the same as the Secret Key - Development you entered above from Stripe, except here you must start with the word "Bearer " 
• Stripe Portal - return_url - dev: This is where you want the user to return afterwards (eg the My Account page for your dev app)