Third Party Integrations Webinar Stripe | Velo by Wix

So welcome everybody. This is the first of our series on integrations with Corvid using third party business solutions that you may already have out there. So today we're going to be focusing on Stripe and utilizing Stripe payment systems. This could be come in handy if you maybe had an in person store and you already have a payment solution set up and you don't want to be using WIX Pay because Wix Pay you can utilize out of the box without any need for corporate. We do have APIs available for Wix payments, but we're going to be looking at the Stripe solution and learning how to do integrations with Corvid using Stripe to do the payments as well. So my name is Meredith Hassett. I am a front end developer by trade. I like doing integrations. I definitely prefer being able to see the work that I'm doing as I'm building the sites and prefer to let the back end stuff happen using integrations. Which is why I'm really excited about this series because I'm going to show you guys how to utilize Stripe today. Joshua is going to show you guys how to utilize Sendgrid on Thursday and then on Monday again we're going to take a look at Twilio. So there's going to be a lot of different integrations that we're going to show you. So this is really fun for me. I also love tweeting about random things. So if you guys have any questions that we don't answer during this session, please feel free to reach out to me. My Twitter handle is here and I am always happy to chat about that. And last but not least, I am a dev advocate for Corvid by Wix. So if you have any questions about Corvid, what you can do with Corvid, how you can play around with Corvid, please feel free to reach out to me at all on any of my social medias. Additionally we have Joshua in the chat. So Joshua, I'm going to give you a second to introduce yourself as well.

Hey everybody. Thank you Meredith for introducing me. I'm Joshua Alphonse. I'm a full stack developer from New York. Like we all chatted about inside of the instant message we have here. I'm also a music producer and last but not least, I'm a developer advocate for Corporate by Wix. So I'm over in the east coast doing a lot of events over there as well. So I'll also be doing the webinar that's coming up next after this on Sendgrid as Well, but I'm also will be available in the chat to answer any questions as the webinar goes by as Meredith steps you through the process of doing these third party integrations with Corvid. And I'm really excited to get going. Thanks for coming.

Awesome. Thanks Joshua. So about this series that we're kicking off right now. So today we're going to be focusing on payments with Stripe. I see there are some questions about using other payment systems. You can do this with other payment systems if they have a REST API or NPM module available. We'll be focusing solely on the Stripe NPM module today. So you can take what you're learning here and try to apply it to those other payment methods as well because it should be pretty standard once you learn how to work with the NPM modules inside of Corvid. On Thursday, Joshua will be talking about building an email marketing using the SendGrid npm module as well. And then on Monday we're coming back and looking at text message or I'm coming back I should say and looking at text message communications using Twilio. So you can incorporate all of these. So this is gonna be three different example of using NPM modules that'll hopefully empower you to see how easy it is to incorporate them to your site and show you how to like kind of standardize that process and use it for anything beyond these three that we're showing you in this series. Also, if we do get enough interest, we could totally come back with this series with some of the other pay methods that you guys are mentioning here in the chat. So please feel free to reach out to us and request that and we can pending bulk requests, we can definitely incorporate those sessions for you guys as well. So today we're going to be doing the payments with Stripe as part of this series. If you come back for the other ones, it is going to build off of off of this one. Since it is the first one, you don't need to be part of this one. So if you are telling any of your friends this is awesome to come back to the next ones, they will miss this payments part and we are going to be building off it a little bit in the following ones. But you can still work through the exercise that we'll be doing in the next two sessions anyway even without having attended this one. So today we're going to be building out a Kickstarter style site where we have a product that we want to contribute to and we want to raise some funds for. So what we're going to be focusing on for this Kickstarter site today is going to be accepting payments for that. You can use WIX pay out of the box, but in this case maybe I already have my Stripe payment system set up and, and I'm already banking through Stripe. I have my product set up or my coupons, customer information, et cetera, already stored over there. And we want to be able to send those payments from your wix site to your Stripe backend or Stripe payment systems. So this is. We're going to be focusing on the Stripe portion of this today. But as you see, we're going to be collecting other information as well. So we can actually do the text message and email communications for further ones. So we do need to collect that information as well. Well, to do this we actually need to enable Corvid. So if you have used wix before and you haven't used Corvid, you may have noticed that there is a top menu bar and in that menu bar you see dev mode. Dev mode, when you turn it on is going to enable Corvid for us. And this is how we start getting access to the great tool set that Corvid provides for us as developers. Once Corvid is enabled, you get a lot of things out of the box. So what is Corvid? Corvid is an entirely JavaScript based web development platform on top of Wix. So this means if you already know how to do JavaScript development, you're already doing some node, react, angular development. You can bring all of those skill sets that you already have and bring them over to Corvid and really seamlessly start developing your site and making it more robust using the knowledge that you already have. You get access to most of your ui, you get access to your entire backend of your system and you're able to incorporate NPM modules, databases, public and back end code as well. You have a built in IDE with Corvid. So this enables you to actually do your coding really nicely because you're able to do a lot better code maintenance where you're actually coding for the page, on the page. So you'll see it's kind of like a split screen environment if you haven't looked at it before. We're definitely going to look at it a little bit more as we're working through our example today and you're able to write the code for the page that you're writing the code for in the same place. It makes it really easy to work with it and have a seamless experience for development and make sure your code is really nicely maintainable and easy for someone else to pick up. If you've worked with wix data before, you get access to that. Even more streamlined here in the Corvid environment, because you access to all of your databases that you've already created. So if you have any Steam collections, when you enable Corvid, you're able to work with them more seamlessly. You, you are able to bind them to your UIs and then also using the Wix APIs, you can start doing more complex queries, adding custom or dynamic filtering to your pages as well. So it really opens up the whole world of possibilities with WIX Data. We aren't going to deep dive into WIX Data and the databases here, but we have done sessions before on wix Data, so feel free to search those out and we can definitely include those in the resources list as well. It is a Node JS server that is supporting you in all of this development. So if you've done some node development before, you get access to all of your favorite tools in the Corvid environment, including NPM modules. So this makes it a really nice experience when you're migrating from maybe doing other, sorry, other Node JS development and then coming into the Corvid environment, you can bring all of the skills that you already have and again don't have to learn anything new. And it is in a totally zero setup environment. When you sign into wix and create start creating a site, you have your all of your hosting already done for you. You're able to get access to a production application really rapidly. There is no additional setup or release pipeline that you have to put into place. We handle all of that release management for you. So you're able to go from testing to production ready in mere minutes. You're able to do this using a lot of different tools that Corbit opens up for you. So as I mentioned, you have that IDE and it is in the cloud, so all of your code is in the cloud. So anyone who wants to get access to the development that you've done, so if you have a team of developers, they are able to log in and access that as long as they're contributors on the site. And however, the caveat here being that only one person can work on dev at a time, but you do have all of your code storage in the cloud. It is that Node JS server. So again, it is a very familiar environment. If you're already doing Node JS development and you get access to all of your NP favorite NPM packages too. So you're able to use all of those tools and all of those external systems that maybe you're already working with and incorporate them into your corevid site. So this is what we're going to dig into a lot over this next series where we're going to be looking at the stripe Twilio and SendGrid npm modules. Additionally, you can also start exposing HTTP functions for your site. So if you need to incorporate an API where you have to expose some of your site functionality or site data to an external source. Oh, sorry. Then you can use the HTTP functions to open up some APIs that other people can incorporate into their site. So this is really nice if you need to expose any REST services from your site for anyone else to be consuming, whether it is another site needing your data or you just want to expose some cool functionality that you've built. We also have a bunch of front end APIs. So as I mentioned, you don't access to the full front end of your site because with wix you get a lot of powerful things out of the box like accessibility, responsiveness, browser compatibility across all the browsers. And we don't want you to start messing around too much with the render layer of your UI components because you might accidentally break something. And you also create a much larger set of test cases that you create that you must run if you do start messing around with the render engine. So the front end APIs provide a black box access to the UI components that you were used to working with with wix, and this enables you to manipulate certain parameters and properties and events on top of the UI components that you already have on your site. So we'll dig into that a little bit more as well because this is one of the fundamental components of the core bid that is opened up to you. You also get access to those external database collections. So again you can use WIX data and you have a really nice seamless experience with that as well as some APIs to work with that. Or you can set up connections to any external databases that you have. So if you already have your data hosted in Firebase or aws, you can go ahead and set up those connections as well. There you get access to more advanced marketing tools and integrations. So if you are trying to consume a REST API from elsewhere, you can use WIX Fetch to actually incorporate your data into your site or and use that data coming from a third party service. Last but not least is Dynamic Pages. Dynamic Pages is one of the really powerful things that WIX data enables. We aren't going to be talking about it too much again because this isn't a WIX data focused webinar. So if you are interested in learning more about that, I definitely would encourage you to seek that out. But what dynamic pages does is allow you to create one page for an entire collection of databases. So this is really handy if you have a store, you can create a database where I'm trying to talk slower. And this is so you can create a database where you have all of your products that are available, and using the dynamic pages, you can bind that data to those pages and for every item or for every row in your database, it will automatically create a dynamic page for that as well. So that is really handy for not having to recreate pages over and over and over again, which some of you may have experienced if you haven't worked with WIX data before. So as part of this tool set, I mentioned some front end APIs and you can use the $W to select and return elements from your page. So this is really handy for getting and setting values of input fields or text field fields. You can also update data on the page using these getters and setters. Additionally, you can attach any event to pretty much any UI element you have on our page. So previously you may have noticed it's only for buttons or anchor links or things of that sort. But now if you need to incorporate on click events or on mouse in events to any element on your page, you're able to do so using corvid$w acts as kind of like that document getelementbyid. So you do $w and then the ID of the element, and that enables you to select that specific UI element on your page and either reach the properties or attach events and event listeners to them as well. So one really handy use for this is getting in setting values, which we're going to see today because we're going to be collecting credit card information. So we can use $W to get the credit card number that the user is entering and take that along and send it to our back end when we're actually going to be integrating with Stripe. Conversely, because we're doing a Kickstarter site, when someone enters a pledge amount, we can grab that value from that input field, pass it along to the next page, and then set that value using the user entered data as well. So, so we're able to both get and set values using the Wix$w elements API. We also have a robust set of other APIs that you can use. So $w is going to be included no matter what on all of your UI pages and can only be used on your UI pages. We have a whole bunch of other APIs, but because we're doing web development, we don't want to bring all of those with us because the more that we import into our page, the slower our page is going to be and and so we don't want to bring everything with us. So you can import from the long list of APIs that are available, such as Wix Window, to get that functionality for your site. So to import any sort of API from wix, you just use the standard import notation. So in this case we're just importing WIX Window from the WIX Window API. And then what this can enable us to do is open a Lightbox so now we can actually control how the windows are going to respond on our page. So in this case, when we're doing a payment, maybe we don't want the thank you Lightbox to pop up if the payment wasn't successful. So we can use WIX Window openlightbox in conjunction with some IF statements to make sure that the page only opens if the payment was successful. So we can start incorporating API responses with the Wix APIs to create a really dynamic and robust response. If you want to see More of the APIs available, this is a link to our API reference document so you can go ahead and see this. It is constantly growing. We as WIX and Corvid are trying to become a more open platform, so we are continuing to try to expose more and more APIs and make them available for you. I mean, since I've joined, we've exposed a Timeline API, a real time API and a Stores API. So there's lots of opportunities continuing to grow and continuing to be more open. So always keep an eye on the reference guide if you want or curious if there's going to be more APIs available. Additionally, since we're working with Stripe today, I wanted to link to the Stripe documentation as well. So if you want to dive into this a little bit deeper on what we're doing with Stripe, I'm going to try to talk through what values I'm setting and why I'm setting them this way. But there are so many ways to do the Stripe payments that I'm only going to cover one path of success for creating a Stripe payment. But there are so many ways that you can actually build this Stripe integration. So you might need to explore the documentation a little Bit more depending on how you're utilizing the payment system. With that, I'm going to go ahead and dive into our editor. I will pause here and see if there's any burning questions while I'm loading the editor. So those of you who are familiar with the WIX editor, you are familiar with this space. If you are also already kind of familiar with Corvid, then you also know where dev mode is and you've turned it on before. So when we go into our WIX editor, this is kind of the standard classic editor. If I go to dev mode and turn dev mode on, dev mode is going to open up a bunch of different windows for me here now too. So I'm able to see my site structure here on the left side of my page and then I'm also able to see my IDE here on the bottom of my page. So this is my code for my page. I'm also able to do site wide UI code here too. So you also have an editor or an IDE for your site code as well. So the page that we're mostly interested in is going to be our fill in your details page. Because on this page, after a user has selected that they want to back this project, we're going to go ahead and collect their details from them. And the ones that are most relevant for us today are going to be their card information. So their credit card, their expiration, month and year, and then their CV code as well. So we're going to be able to retrieve the user entered values using that $W that we just talked about. And so we already have some pre stubbed code here where we're going to go ahead and collect those values from those input fields. So you're seeing us grab those values and once we collect all of those values, we then are going to pass them in as parameters to our submit payments function. And our submit payments function is actually going to be coming from the back end because we're working with credit card information and we're talking to stripe. We don't want that information to be publicly available in any way, shape or form. So we want to go ahead and do that all on the back end. So we can't, we don't expose ourselves for any sort of malicious intents here. So when we're here in the back end, we can actually go and start working on that code. Apologies for that. So the first thing we need to do is make sure the stripe module is installed. I already have it installed here. But if you don't already have IT installed. What you want to do is you want to install a new package. This will bring up the NPM package manager. So instead of having to do this in your cli, you can do this here in our GUI and we can search for that package. I can see that it's already installed here, so I don't have anything else to do. But you are able to manage it whether you need to get the latest version or uninstall them as well. So if I go over here, I'm able to uninstall this as well. Back in our code, the first thing that we need to do is we need to go ahead and import Stripe from that Stripe NPM module. So this is going to be case sensitive. So you always want to make sure that it is matching the case that you see for the NPM module. And once you do that, you're able to actually start working with Stripe. But one of the things that we need for Stripe, because we are working with payments and we are working with personal information, is we need to be using our API key. So in this case I also am going to import my Wix Secrets manager so I'm able to retrieve that information. This does allow you to do pre fills here and because I can't spell to save my life and I always take these wrong, I'm going to use the pre fills to make sure that I am correctly importing the right API. So with this I'm able to actually go ahead and grab my API key. Our Secrets manager is going to be asynchronous, so when I go ahead and grab it from the background, I need to await for that to happen. I prefer the Async await method. If you want to do promises, you can also do that as well. I'm going to do that and then so I need my Stripe API key. Once I get my Stripe API key, I can actually initialize a Stripe client and this is going to help me work with the Stripe NPM module. Oops. So now I can actually start working with Stripe and actually start calling the different endpoints that are available from the Stripe API. There's two main endpoints that we're going to be working with here as well and they are going to be the payment methods API as well as the payment intent. Because we aren't going to be collecting a customer. Since we're doing a one time payment, we have to create a payment or payment method, retrieve the ID, and then use that ID to do an auto confirmed payment intent. The Stripe flow can be a little Bit confusing. So I'm just going to be following this US and Canada Stripe payment method because anything outside of that does require a two step authentication. And we only have 30 minutes with you guys here, so that's a little bit longer of a session. But just to show you guys how easy it is to use this version of that Stripe payment, we're going to just go ahead and follow along with that. So we need to use our Stripe client to go ahead and go with our payment method and we're going to go ahead and create a payment method here. And that payment method requires a type, which in this case is card because we're using taking in a credit card information from online and and then we have to pass in the card values, but we need to actually construct it in the method or in the manner that Stripe wants to receive it. So I'm going to go ahead and create a credit card object, JSON object that we can use to pass in. So when we create a credit card object it's going to require a couple different fields. So we need our credit card number, we need our credit card CV code, which is that three digit code on the back of your card, we need your exposure expiration month and we need your expiration year. Fortunately for us, we've actually passed all of these as values back to our function. So I can go ahead and grab those past values and populate them from the values that we had on the front end. So we're gonna go ahead and grab card number. We want our CV here, oops, our X expiration month and then our expiration year. And so this is our card object that Stripe requires. You can also, if you need to do authentication of like zip code, you can also do that here as well. But for this we do not need to. So I'm going to go ahead and just pass the credit card object as is like that. This is going to return an ID that we do need. So we are going to have to collect the result of this. So I'm going to go ahead and let the payment method equal the Stripe client result. Again, this is asynchronous, so I'm going to use the async await. But because I'm doing async await, I'm also going to wrap it in a try catch. Oops. And then I'm also going to predefine my code so I can see it a little bit better. And we're going to catch the error because if this does not come back as a success, we can't actually Proceed forward because we don't have any payment information. So we do want to handle that error. For here I'm just going to put some placeholder text and just return an error so we don't continue on with the payment process. Once we have that payment method, we can actually use the payment method ID in our next step where we need to make sure that the payment ID is set. And so if that is true, then we can go ahead and start working with the Stripe client. And in this case we want to work with the payment intent where a payment intent is an invocation of a peg. With Stripe, we're going to go ahead and do an auto confirm on this one just for simplicity's sake and also speed because we're already running out of time. So there's a couple different things that Stripe requires for their payments. The first one is that payment method, which is going to be that payment method object ID that we just created. So in this case we want payment method ID again. And so that's going to give it the information about what the payment is that we're trying to create. Because we aren't creating customers with Stripe in this, it's just those one time payments. After that we also need to pass in the amount. But Stripe takes amounts in the smallest value of the currency. So since we're going to be doing US Dollars, it's going to be in cents. But when I entered it on my page I actually used dollars. So what I need to do is I need to convert the pledge amount to cents. So I'm going to convert pledge to incense. I'm going to parse int because it absolutely must be an integer for Stripe to accept it. I'm going to use Radix 10 because we like base 10 and I'm going to times it by 100 because that's how many cents there are in a dollar. So now I can use that value as my pledge in cents. I need to set the currency as well here which is going to be USD and then I need to set that confirm flag which is going to do my auto confirm if everything checks out. Because I'm also doing auto confirm. I want to make sure that I handle any errors that come through on the payment side. So I want to say error on requires requires action. I'm going to also set that to true. So this way if it isn't a U.S. or Canadian credit card number, your payment won't try to go through. It'll automatically recognize. Then it'll automatically recognize that that payment wasn't successful and it will require some error handling again on your side to make sure that you retry that payment method or switch to the two step verification method. This is also asynchronous so we're going to have to wait for that. And then last but not least, we're going to wrap this in a try catch as well, just because we want to make sure we do any error handling except autocompletes being funny today. And just again break out if we run into any errors because we don't want to continue on with payments if we are not successful. Awesome. So as long as I did everything correctly here and spelled everything correctly when I go ahead and publish my site, I will now have a production version of my site. I can go ahead over to that site, go ahead and create my pledge, continue pass in my details. I'm going to pass in my fake credit card number here. And I should have a successful payment. So now the next steps on this are going to be taking that payment information on success and passing it along via email and sms, giving you updated information about new projects that are available to back or giving you updates on your order. And we'll be talking about those in more detail on our following webinar so on Thursday and Monday. So definitely come back if you want to learn more about doing those email and SMS integrations here. This was just meant to be a really quick introduction on how to use Stripe on top of Corvid and show you how simple it is. If you want me to confirm that that payment went through, I'm going to go ahead and bring it up over here so we can check on our Stripe dashboard and we see that payment was a success and we are ready to start sending SMS and email notifications about this. Just to wrap up here real fast, I just want to give you some information about our socials as well. So Joshua and I are both on LinkedIn and Twitter so you can reach us on either of those social medias. You can also find us on Reddit and Stack Overflow as well. So feel free to reach out there if you have any questions or want to see some cool projects that we're working on, especially on Reddit. They've got some really cool stuff in the works over there and we'd love to see you guys all back here on Thursday and Monday to learn about SendGrid and Twilio with Corbitt as well.