Bubble.io Tutorial - Stripe Introduction (Charge current user)

In this video you will learn how to integrate the Stripe API into Bubble with the official and free plugin from Bubble. We develop a step-by-step system to buy a used Tesla Model 3.

Left:

• Stripe
• Stripe documentation
• Stripe Testing Cards
• Bubble Stripe Plugin Documentation

Video transcript:

Hello, my name is Chris Strobl and today I'm going to show you an introduction to Stripe in connection with Bubble Stripe is kind of the standard internet payment platform and it's completely built, so it's an API. That means an application programming interface and a super developer documentation that allows you to do almost anything.

If you go to Stripe dot com slash stocks, you can see which different API keys are available and which products and how you can control all these products in turn. For example, to accept online payments, for subscription models, but also, for example, to make complex business models like platforms with Strip Connect. We are now going to go into Bubble and make the example of a car save marketplace, where we can buy used cars. The size of the page is 960, width and height are 3000 and this is a responsive page. Again, I use frames for the design, there is also a video for this, his free Chrome Extension, which helps you to make it easier and faster in Bubble Responsive Design.

Copy the header package once. And if the Nocode Germany cars. And debates call biologist his off. Next, we need a repeating group, so to speak. And we adapt this a little bit so that it also fits for a car model. We delete the icon and. Go to pay here, that's the name of the button, adjust this! Here. And we are now, so to speak, a repeating group that is to display the individual car. The first thing we do is make a database entry and name it Car. Chalk and author has sort of once the make, its text, then model. Also a text, then a price. That's a number. And then a. Image. That's an image. And we can still do the year of manufacture. That's also a number. We go to App data URL cars and create this manually. The first year of construction 2000 20. Zapier so to speak. Stock photos from Unsplash. Make BMW, model M4 price. We're doing 85000 now. And chalk. Oh yes, 2021. price 55000. and 20 euros and chalk. Well sort of. Let's go to the Elementary list Repeating Group and change here now from Text to User. Do Search for Auto don't need any restriction.

And now again we fit here at Current cell's car. And again, the car. The Image. Let's do dynamics peer groups cars image and take Image API Keys and recycle to Icon which is dropping at people Spice. Again, 80 80. Here we do the year of manufacture. The make of the car. Here we do peering clubs, cars. Model. And finally pair cubs cars price format the whole thing but with a decimal of two. And a comma. And after that we do Euros.

We will now go to Preview to take a look at the whole thing, so to speak. And as you can see, we have two models and the pay button, which in turn does the exciting thing with Stripe. The last thing I would like to do in the design tab is Lock and Sein.

That means that whenever we use Stripe at Bubble, we will need a Current user and for that we need to be logged in. And that's why I use in the Bubble Elements. This is the Blogging Pop up and we add this and then we make the button Login its Start/edit workflow and Element actions Show and we show this Zainab Login Pop up and in addition we make the following Workflow Conditional If Current users is logged out, then the text Login is his and if Current users is lured, then the text Lockout is. Of course, we also have to represent this in the Workflow tab, i.e. this button is only active when Current users logs out and we copy the workflow once. So if Current users locks him here, so to speak. Then is not Show, but then Account lures the users and.

Next we go into plugins and plugin. And we add the official plugin of Bubble, which is free, which is Stripe install. And you can see now that we kind of need all this different information. In order to do that, we need to register with Stripe. I'm going to be on stripe dotcom. In. Don't have an account its. Next, we need to activate the account at Stripe.

I'm doing this here once to show that, so to speak. I have now done a quick run-through and we have now activated the account once and now have two modes, so to speak: live mode, in order to actually receive money in our payment, but also the development mode, namely the test mode up here. To do this, we now go to the various API keys and see the different keys under API Keys. I click on Copy here, then we go into the Bubble Plugin and take the Published one conveniently.

And for Development mode live the same, because I don't want to do live Peyman. Then we take the secret key, copy it. Do the same Development mode live Secret Keys and we still need the client that connect to Settings discover more products enable. Now Google.

And this quasi to make Marketplace. Continuo. Once that's enabled, we can now go into Settings Connected Settings. Look at your client ID here for the test mod. Finally, we need an image. And the name for the strip checkout. Nocode. Ottos. I like to use the Stripe Checkout version 3, which is read only. We're going to go into the design tab now to bring the logic in here. First up. Type of content is auto and current cell's auto and also here at the group of the button Type of content is auto drive groups auto.

And we call the button button pay when button pay we make the following conditional If Current users lures does then the item is click Bubble is enabled and if Current users lures him then the item is click. Bubble is not enabled because Strip always requires us that Current users lures him is start/edit workflow.

We go to Payment Search User. The price is Peer Groups Auto, the currency is Euro. The name is Peer Groups Auto. Make. And a space for a large car model. The Description is Peer Groups Cars Year of manufacture. Static Image we don't have, but we mean your Image Peer groups auto save image and. With IMAX. Understatements crypt is virtually what on the credit card payment, then appears to me No Code Germany Autos.

We have other options here, such as the text Road to Checkout. Then we can specify different static choices and dynamic data exits in Strip. We can look at all this in the documentation. Or we can make a detailed video. And at the end we get a success message from Stripe. We can show it or we can't show it. Maybe a mention before we go into the preview. You always see the reference here. We have excellent documentation here in the bubble on the Stripe plugin. I have also linked to it here. One of the most comprehensive plugins that Bubble has built and also one of the plugins that is updated the most, because Strip and Payment is extremely important for your product, for all our products.

Let's go to Preview and have a look at the whole thing.... We see the two cars of the coat of arms pay is not quickbook. For that we have to log in once. His. We now see the lockout works and also the button we pay him once the Model 3.

And we now see our checkout that we can buy a Model 3 for 55,000 euros. We are still in development mode. This also shows here that the test account is there. To strip in the documentation under Strip dot com slash Stocks we find quasi Cat Testing, namely Test for Integration. And we see here very different cards that we can test. For example, this Visa card that works. We copy this one. And now pay 55000 in test mode. The transaction went through.

We are being redirected back. Here's this pop up. And of course now we can adjust our workflow depending on when someone has paid. But what's exciting is when we go back into Stripe dot com dashboard, we go into payment and we now see that we have actually received a payment. Namely for the Model 3 that we had in our database earlier. No Code Germany Autos. We see the iPhone Stripe platform and we also see other options here now though, which we can all get via API later on, like the reCAPTCHA. Tesla Model 3 some Triggered. We have seen that in Bubble we can connect one of the most successful and powerful API keys on the internet relatively quickly to receive money for your software.

Of course, it is almost impossible to present Stripe in all its complexity in just one tutorial. But this introduction shows you how to get started with the plugin. If you then want to extend this plugin because the functions are not there, you can still use the API, namely via the API Connector. I have attached a video above on how to use the API Connector.

If you liked this video, please click on the like button or subscribe to our channel. If you have any questions, please write in the comments. I wish you continued success with Bubble and see you soon.