The ultimate guide to Stripe subscriptions and paywalls - Bubble.io tutorial

Подписаться 2,6 тыс.

Просмотров 3,7 тыс.

50% 1

Be the first to hear about our latest tutorials, plugin releases, updates and more: www.cranfordtech.com/newsletter
In this video, I show how to integrate Stripe with your Bubble app and allow users to manage their subscription payments. We go through:
- Creating subscription plans in Stripe
- Subscribing users to plans
- Offering different plan options using the Stripe Pricing Table
- Canceling subscriptions
- Saving down subscription details to your Bubble database
Links
🖌️ Stripe Customer Portal plugin
bubble.io/plugin/stripe-custo...
🔗 Stripe Customer Portal plugin demo app
customer-portal-demo.bubbleap...
ℹ️ Stripe Webhooks tutorial (section on deploying to live is from 18:47 on)
• Stripe Webhooks - Bubb...
📧 Plugin Support
www.cranfordtech.com/contact
🎨 Check out our other Templates and Plugins
bubble.io/contributor/1639725...
💼 Need a custom app? Contact us for agency work
www.cranfordtech.com/agency
Timeline
00:00 Introduction
01:15 Creating subscription plans in Stripe
02:34 Installing the Bubble Stripe plugin
04:19 Subscribing a user to a plan
07:32 Saving down details of a subscription to your Bubble database
12:25 Paywalling sections of your app
15:06 Offering users the choice of monthly and annual plans
16:55 Offering different subscription tiers using the Stripe Pricing Table
23:31 Saving down data to the Bubble database with webhooks
25:25 Securing your webhooks with an API token
27:10 Initialising a webhook
29:05 Adding the client-reference-id to the Stripe Pricing Table
33:10 Installing the Stripe Customer Portal plugin
33:59 Updating the remaining fields in the database
37:05 Canceling subscriptions
47:24 Final note on deploying webhooks to production

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@logomoko78 5 месяцев назад

Hi! Thank you very much for this thorough explanation. This video is very helpful indeed. I wish I could afford your PDF plugin.

@Mamorscy-GardenDesign 24 дня назад

Hello, thanks for the tutorial. How can I activate chosen features only for plan A, and other when user got plan B? I don't see the field to recognize the plan. How can I download the subscription plan name to my DB?

@The321shutdown 3 месяца назад

Amazing video, thank you so much! I was wondering, what happens if a user failed to complete an order by for example getting distracted and closing the window with the stripe payment portal. Wouldn't the bubble database show that they were an active subscriber (as the subscribe button workflow is triggering this first) and the stripe database show that they weren't (as they didn't complete the order)?

@Michael-kp4bd 2 месяца назад

Populating the status fields *correctly* is covered at ~ 34:00. This requires the full setup shown starting at 16:54 ... Note that at 16:54 he mentions that it so far in his demo, he had only been using the Stripe plugin's fields (With that subscribe button workflow) to subscribe users. This WOULD cause the issue you mentioned. However, after this point in the video, he shows the way you SHOULD do it to avoid this situation. So disregard that initial "subscribe" button demo and workflow. Everything after 16:54 is necessary to set this up right, so make sure to follow all steps from there in this video. Instead of the 'subscribe' button workflow, do as he does: -Force unsubscribed users to see the Stripe Pricing page (not that 'subscribe' button) -Set up webhook to receive the actual payment/confirmation data that Stripe sends when a user actually pays. -Set up that API workflow that runs when the webhook is hit, and make bubble to populate those fields via the webhook -Dont forget the rest of the stripe portals to allow users to cancel/manage/upgrade etc. This video is pretty comprehensive!

@davyS4v 4 месяца назад

for a web platform that takes a percentage from the seller, how do you manage the payment from the buyer? that is, the buyer pays on the site. that money needs to be split 50% for the seller and 50% for my platform. How do you handle this payment?

@CranfordTech 4 месяца назад

Hi there, what you're describing is a marketplace payment. Most people building marketplace apps on Bubble will use Stripe Connect to process marketplace payments. This tutorial I recorded on Stripe Connect may be of interest 🙂 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ba20wCQpHn8.html

@user-xe5kd5yr5u 4 месяца назад

Thanks for creating this tutorial! Can you share the video link of deploying to live mode? I cannot find it in the description.

@CranfordTech 4 месяца назад

No problem. The relevant section is from 18:47 in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6F5qV9O1Akg.html

@kingpinoftherails926 3 месяца назад

Thanks for the tutorial, it helps me a lot. From the names you use for the test users, I can see that you watch a Formula 1 😉🏎

@CranfordTech 3 месяца назад

Haha nice spot! Hoping Carlos Sainz can put up a bit of a fight this year

@kingpinoftherails926 3 месяца назад

@@CranfordTech Let's hope so. It's better without an appendix. What's your prediction: Audi or Red Bull?

@user-kt6eb5zc7x 6 месяцев назад

thank you for helpful and easy explain strip for bubble but i ask what is the difference between lemonsqueezy and stripe ?

@CranfordTech 6 месяцев назад

I'm not too familiar with Lemonsqueezy, but I believe the big difference is that they act as a merchant of record who will collect and remit taxes on your behalf. Stripe do not do this (although you can calculate taxes with Stripe Tax). Lemonsqueezy is more expensive than Stripe.

@Robdotfer07 5 месяцев назад

Thanks a million for this tutorial. Could you tell me how to get plan name to appear. I've tried everything. Or do I have to use the plan id? The thing is i want to display to the user what plan they are currently on.

@CranfordTech 5 месяцев назад

Thanks Roberto! I think the best approach is to link a plan_id to a plan name that you create yourself. Then you could display the plan name by saying 'if current users plan_id is Y, plan name is Starter" Hope that helps 🙂

@Robdotfer07 4 месяца назад

Thanks again. I'll try that

@CranfordTech 4 месяца назад

@@Robdotfer07 no problem!

@2481328 5 месяцев назад

What’s the link to the other video to deploy the live app and how do you redirect the stripe table script payment page back to the app?

@CranfordTech 5 месяцев назад

Hi there, this is the link to the video that describes deploying to live (the relevant section is from 18:47 on): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6F5qV9O1Akg.html Good question on redirecting users back to the app (I should have been more clear on this). When you're creating your Pricing Table, there is an option for each price under payment settings to either 'Show Confirmation Page' or 'Don't Show Confirmation Page' (see 18:26 in the video). If you want to redirect customers to your app, select the 'Don't Show Confirmation Page' option and input the URL of the page in your app you want to send them to.

@maanibeatz 5 месяцев назад

I've set our Stripe subscription to cancel at the end of the billing period, but the status stays 'active' until then. Will our webhooks automatically send the cancellation info when Stripe updates at period's end, or do I need to set up something for this?

@CranfordTech 5 месяцев назад

Hi there, yes the webhook should automatically update the relevant field in your database to 'not active' at the end of the billing period. However, I would recommend testing the webhook out by immediately canceling a subscription directly from your Stripe dashboard.

@eugenenoguera 5 месяцев назад

Hey, thanks so much for the guidance! Just bought the plugin. Question: What's the best process for adding a one-off joining fee to subscriptions? i.e. User joins £10/mo subscription, pays £5 joining fee… £15 total, then £10 month recurring. Would really appreciate some help on this if you have a solution! Thanks :)

@CranfordTech 4 месяца назад

Hi there, thanks for the kind words! You'll need to find a way of adding multiple items to the same Stripe Checkout Session: 1x one-off charge 1x subscription Unfortunately, this is not currently possible with the native Bubble Stripe plugin (to my knowledge). You'll have to use the API Connector or potentially some other 3rd party plugin.

@lewisd30088 5 месяцев назад

Thank you.. Do you know if it’s possible to allow for a free trial where the user doesn’t have to enter their card details upfront, and just gets prompted to later when the trial period ends ?

@CranfordTech 5 месяцев назад

Yes this is definitely possible. I would suggest something like: - Add a date field to the user data type and give it a value equal to the date they first use your app - Once 7 days are up, trigger a backend workflow that changes their status from "free trial" to "not active" - Automatically show the user the subscription screen when their status is "not active" May require some adjustments to fit your use case, but in principle that's how you would do it

@lewisd30088 5 месяцев назад

@@CranfordTech Thanks for getting back, this video and the one a year ago has been invaluable. Ah ok, I was wondering about that approach.. so essentially they're not 'subscribed' to any plan in Stripe during that trial period it's just handled in Bubble until the period is up? Re. triggering a backend workflow after 7 days... do you know if this possible to do without running an API workflow once a day that checks every user's subscription status against their 'sign up date' (which would be relatively resource intensive)? I can't think of another way to handle that check at the moment, maybe I'm missing something

@RoniBliss 3 месяца назад

@@lewisd30088 I would love to know this also

@semjacobs3885 4 месяца назад

Amazing tutorial! Is an one time payment only also possible? And how do you show a fake discount? And last question, does stripe accept IDEAL payments or only credit card?

@CranfordTech 4 месяца назад

Thank you! 1. You can also process one-time payments with the Bubble Stripe plugin (you can use the 'Charge the current user' action that comes with the plugin. 2. I'm not quite sure what you mean by 'fake discount'? Could you provide more detail? 🙂 3. Yes, you can enable iDEAL payments in your Stripe dashboard. The below link may be useful: docs.stripe.com/payments/ideal

@semjacobs3885 4 месяца назад

Thanks for your fast reply! What I mean with “fake discount” is that it’s showing $4,99 with a stripe so that’s the “old price” and than the new price $2,99, so the customers think you gave them a discount.

@CranfordTech 4 месяца назад

@@semjacobs3885 Yep, you can apply discounts/coupons with Stripe! docs.stripe.com/payments/checkout/discounts I'm not completely sure how this works with the Bubble plugin though - may require some investigating.

@BacYawd Месяц назад

is it by default for the "current user subscription status" is "active" is that the default value from bubble or stripe? also when the button on bubbles end is clicked does the workflow fully go through after the user has made the purchase?

@CranfordTech 28 дней назад

Hi there! The subscription status is a value retrieved from Stripe. It changes to 'active' after the user has successfully subscribed to a plan. I'm not quite sure what you mean by your second question, but it is safe to make changes to the user AFTER the 'Subscribe the user to a plan' action and use data from the subscription action itself.

@Danosz 4 месяца назад

For me the stripe plan name doesn’t come up after subscribe user to a plan is clicked I have tried copying it but that also doesn’t work

@CranfordTech 4 месяца назад

Hi there, are you on Checkout v3 for the Bubble Stripe plugin?

@hugow1992 4 месяца назад

What is the small thing to change in the webhook if we go live with the site?

@CranfordTech 4 месяца назад

Hi there, if you watch this video from 18:47 it will explain everything 🙂 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6F5qV9O1Akg.html

@ther1565 2 месяца назад

46:51 what if subscriber will cancel a plan but still have some days of month that he paid for and he would like to keep using app for this time? Every turotial i found shows immediate cancellation, but there is no good tutorials how to end subscription keeping access to app till the subscription end time

@CranfordTech 2 месяца назад

Hi there, the key here is to adjust the subscription settings in your Stripe dashboard so that the plan is canceled at the end of the current billing period. That way the 'active' status in your Bubble database won't change to 'canceled' until the end of the current billing period.

@ther1565 Месяц назад

@@CranfordTech Thank you! I`ll try that!

@H99x2 3 месяца назад

When you cancel the subscription and the end of current billing cycle has passed, the account still says active in bubble data. how to fix this? cheers mate

@CranfordTech 3 месяца назад

Hi there, it sounds like your webhooks aren't functioning correctly. Can you go to the webhooks section of your Stripe dashboard and check the logs (by clicking on the relevant webhook URL) and see if you are getting success messages?

@thebubbledev 5 месяцев назад

If I create a subscription, will the user be automatically billed after 30days or do they need to approve again? Will an invoice be sent to them which they need to pay or will the amount be automatically removed from their saved card?

@CranfordTech 5 месяцев назад

Hi there, the user will be billed for the first month of the subscription immediately (assuming no free trial) and will then be billed for the second month after 30 days. The relevant amount will automatically be deducted using the card details they provided 🙂

@thebubbledev 5 месяцев назад

@@CranfordTech thanks what happens if the payment fails? Say insufficent balance//how can I as a the app owner take relevant action?

@thebubbledev 4 месяца назад

Thank you@@CranfordTech . How can I create a plan dynamically? I want the user to be able to enter the amount they want to subscribe to and not have it created before. How do I go about it...I know I can create a subscription dynamically from bubble, but how do I create the plan without entering the dashboard? Thanks

@thebubbledev 4 месяца назад

How can I create a plan dynamically? I want the user to be able to enter the amount they want to subscribe to and not have it created before. How do I go about it...I know I can create a subscription dynamically from bubble, but how do I create the plan without entering the dashboard? Thanks

@CranfordTech 4 месяца назад

Hi there, I'm afraid this isn't currently possible with the Bubble Stripe plugin (to my knowledge). You'll need to use the API Connector or find a 3rd party plugin that has this functionality.

@thebubbledev 4 месяца назад

Thanks@@CranfordTech do you have any resources on using the stripe API?

@CranfordTech 4 месяца назад

This video might be a useful intro: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9Q-DGR408N8.html Apart from that, I recommend reading the relevant sections of the Stripe API documentation - it's pretty good

@user-qw3rr5ze5q 3 месяца назад

self service portal not working

@CranfordTech 3 месяца назад

Hi there, sorry to hear you've been having problems with the Customer Portal plugin! I've tested things out on my end and everything is working correctly, which makes me think it's likely an issue with your Stripe setup. Can you go to the Developers section of your Stripe dashboard and take a look at the logs? If you go to the 'Failed' section and click on the most recent error, you should be able to see an error message that explains what was causing the issue. If you can't figure it out from that, feel free to shoot me an email (alex@cranfordtech.com) and I'll try to help you out.

@Jacobattokaren 3 месяца назад

Hi, thanks for this video. In your video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6F5qV9O1Akg.html from around 10 months ago (at 11:28), you had checked ‘This workflow can be run without authentication’ and ‘Ignore privacy rules when running the workflow’. However, in this video, you said to leave those options unchecked. Is there a reason for that?

@CranfordTech 3 месяца назад

Good spot! I would recommend following the steps in this video. I didn't touch on authentication/privacy rules in the other video as it wasn't intended to be a full guide, but adding authentication to your webhooks is quite important from a security point of view

@Jacobattokaren 3 месяца назад

@@CranfordTech Thanks again!

@CranfordTech 3 месяца назад

@@Jacobattokaren No problem 🙂

@RoniBliss 3 месяца назад

I am yet to see an ultimate guide that includes users going on a free trial...

@CranfordTech 3 месяца назад

Hi there, the following video is a bit out of date (I recorded it 2 years ago), but it shows how to let users have a free trial at the start of their subscription: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GE2fYHFWahw.html

@RoniBliss 3 месяца назад

@@CranfordTech Amaaaazing! Thank you so much!

@CranfordTech 3 месяца назад

@@RoniBliss no problem! 🙂