 Are we ready to go? Perfect. Hello everyone. Yeah, I guess I don't have any slides, so I'm just going to use this here. Hello. My name is Thor. I gave myself a Chinese name. I think it's Leishen. Is that correct? Which I think is Thunder God. Basically Thor, God of Thunder. I also like how kind of the last symbol sort of looks like a hammer. So that works out well. I work here at Stripe. Very excited to be hosting the inaugural Jamstack meetup. And I want to talk about e-commerce. Static. So it's ecstatic. I like puns. Yeah, ecstatic commerce. So one thing that's really cool, and kind of when I first dug into Gatsby, it's roughly a year ago, sort of Christmas time last year. I was living in Amsterdam and the weather was pretty bad. So I was like, okay, let's have a new blog. So I got this fantastic domain, which is Thor.News. Yeah, I fail to get Thor.Death. I have Thor.Web.Death, which is also my Twitter handle. But yeah, Thor.News, it's secure, thanks to Netlify. Woo, didn't have to do anything. But yes, so and then I got playing around with, you know, Static site. So I kind of heard, it's great for blog posts because you're basically creating content once and then it's mainly being read. So the content doesn't actually change that much. And so for something where you have a static page, kind of a blog is perfect. You pretty much just put it on the edge of the internet and you serve it really quickly to users. Now, if you take something like payments, payments is something where there's a lot of dynamics involved. Like, you know, if you want to accept Apple Pay, Google Pay, or just in general validating, you know, as you know as front-end developers, we can't really trust anything that happens on the front-end. That's just the world we live in. Like any content that is coming from the front-end, we just can't trust it. And so you actually need a backend component to verify that, you know, what you want to be charging for this item, for example, if you're shipping physical goods is actually what, you know, needs to be charged and no one has tempered with it. So what was really cool and kind of timing-wise, we built a new version of Stripe Checkout. And actually there is a version which we call the client-only checkout where you can actually use a static page and redirect off to a Stripe Hosted Checkout page for the actual payment, which means the backend that is actually doing the validating of the payment amount is Stripe itself. So that means for that to work, you actually need to put the SKUs and the product information. So SKUs stands for stock keeping unit. You need to put that information into Stripe, and then you can actually have the SKU IDs in your static page and just say, hey, the customer wants to buy this item, let's go ahead and redirect to checkout with my SKU ID. And so some great folks have built a bunch of plugins that actually allow you to very easily import Stripe Checkout as well as information from your Stripe account into your Gatsby page. And so I basically just built on top of that. And if you want to read this tutorial, I mainly wrote it to get free Gatsby swag. So we're going to look at the Gatsby swag there. But there are a couple examples that we can look at. And they are available on GitHub as well. So we have this Gatsby e-commerce starter. Some cool feature that Sean didn't mention, we can actually have this deploy to Netlify button where you can also specify where was it? I think there was like in Netlify the Tomo file. So we can actually say we need a Stripe public key to identify our Stripe account. And so we can put that in the Tomo file. And when someone says deploy to Netlify, we can actually grab those environment variables and store them in Netlify. And so at build time, they will be available. So let's quickly look at this demo here. So it's very much kind of the Gatsby starter. And in its easiest form, I have a buy button. And when I click the buy button, I get redirected to the Stripe checkout page, and I can buy this book. That's great. So that is very much kind of the easiest use case. For example, you want to collect donations or just like sell a PDF file. That's something very easy to get started with. Now, in the advanced example, what we're actually doing here is we're using a plug-in that's called, I think, source. Let me see. Okay. Let me, yeah, yeah, yeah. There's a lot of content in there. So the Gatsby source Stripe plug-in, and what this does is at build time, it actually queries the Stripe API to get all the products that you have available in your Stripe account and actually puts them into the page static it. So here we can have all of our different products. And another cool feature with Netlify is what they call the build hooks. So in Stripe, you can have web hooks that are generated as a record events when the product information changes, for example. So you can point that record event at the Netlify build hook, and anytime someone changes product information in the Stripe dashboard, your page will be rebuilt, and the information will be pulled from the site, and all your products will show up here. Okay, cool. But so that's still sort of very basic. So if we look at kind of some projects that were built to sort of give you a bit more dynamic functionality, so Netlify actually has an open source project, which is called GoCommerce. So it's a headless e-commerce backend written in Go for Jamstack sites, and the way it works is you generate your product metadata and put that into your static sites, and then there is a JavaScript library that facilitates the communication between the front end and the back end, and I believe the back end then scrapes the metadata to actually get the information of the price and the amount. I'm actually not sure if that's because, I mean, if that data is on the front end, we can't really trust that. So I need to dig into that if that's actually secure. But it is one option. Some other cool thing that CERA has built, CERA works at Netlify with Sean, is an e-commerce store with Netlify functions. So if you need more dynamic functionality, you can use Netlify functions to do the validation there, and then, for example, redirect to checkout, or you could actually create the payment right in the Netlify function if you wanted to. But if you want to take this even further, and that's where you get to the Gatsby swag store, and the Gatsby swag store is really cool, like my favorite feature of the swag store is you can log in with your GitHub account. And I think this here is using Auth0. So you log in with your GitHub account, and if you have contributed to the Gatsby project, it will check for that. So based on your GitHub account name, if the internet is working. And I will see, yay! I've made two contributions to Gatsby, and so I can now actually claim free swag. So I think I'm not going to click this because if I click this, I think it's going to show me a discount code, and I don't want you all to see this. But I think it's a true way that we have discount codes for the swag store. Should we keep that till the end? No, we can give this now. Okay, so do you want to grab the mic? Okay, I can do this. So we have to rehearse this. But let me log out. So just to show you, you don't need to be logged in. What do we want to buy? I like this hat. Oh, the Jamsec jammies are actually fantastic. I did a live episode with Jason Langstof, who now actually also works at Netlify. There seems to be a theme there. But he used to work for Gatsby, and we did a live stream about integrating Stripe into a Gatsby site, and he loves the Jamsec jammies. So let's see that. Oh, we need a size. Ah, right. What do we get? A large one. Cool. Now, while we're figuring out the discount code, we can actually check, maybe let's go to the GitHub repository first one second. So the code for this is open source. Am I not saying right? Wait. No, I think I need to. Gotcha. Okay. So this project is open source and GitHub. This dog is just too adorable. They don't sell it on the Swagster, unfortunately. So here, it is a Gatsby site, but it uses the Shopify JavaScript by SDK. So the whole backend is actually Shopify. So all of the kind of logistics in terms of like checking if items are in stock, if discount codes are valid, and kind of all the things that you need to do. Are happening on the backend within Shopify. And so what we can actually do here is we look into this. Let's go to the network tab. And we add this to the cart. We can see that here. There is a request. Can you see that? Is that large enough? So we can see that there's a request fired off to the Shopify GraphQL API. We can see that the information that is being sent is a checkout ID and the line items. So what you can notice here is that similar to kind of the approach with Stripe where you have the skew ID here, it's called the variant ID as well as the quantity and the checkout ID. And what is actually happening here is that the home cart is Managed on the Shopify site. So there's actually no piece of JavaScript written to manage the cart itself that happens on the Shopify site. Okay, do you have it? So as we have given us the discount code for the swag store valid from today until January 6th. And the discount code is jam 2019. Let's try it. Jam 2019. So jam apply. So as you can see here now, this is actually the Shopify page. So this is the Shopify checkout page here. And yes, we got a discount 10x 40 cents. That's great. Cool. I'm not going to buy them now. Sorry. I still have my my free swag, but something I wanted to actually dig into the Shopify JavaScript by SDK a little bit. It's actually a pretty, pretty neat project. Let me see if I can speak bigger, bigger here. So yeah, we initialize the client basically have your Shopify domain and an access token. That's kind of similar to the, the, the, the publishable key of the Stripe, the Stripe API. And so here you can kind of fetch your products information. So the JavaScript by SDK will actually then translate this into our GraphQL requests. And here you can see, so we're creating a checkout. So in order to get the checkout ID, we call our checkout create on the client. And then in order to update a checkout, we can see here, we'll provide the checkout ID and we, where is it? Oh yeah. So we can update now what I want is any line items. So let's actually have a look in the code base here. So here we're having the line items. What we can see is this is going to do an API request. So the GraphQL request we've seen earlier. And then basically we're just grabbing the checkout object and updating the state of our react application, which then updates the cart, like the amount in the cart and things like that. So one thing that I thought was interesting. So if we take the checkout doors, if we look here, kind of the items in cart. So let's see how items in cart, how that is calculated. So I think we have here. So basically from kind of the state object, we're taking the checkout object, we're looking at the line items. And then we're just reducing those and looking at the total kind of the quantity basically adding up the quantity of all the items. Now, what I thought was interesting, and I actually only recently learned that in Chrome, what you can do is if you do command option F, you can actually search across the whole source code of the page and you get kind of all the instances within this page where this is happening. So if we look at that here, okay, that's commented out. Wait. Okay. I was hoping to find the actual. Is this happening here? No, that's the commented out piece. I think it's here. Okay. So here where we actually run this. So we add the line item. And then we look at the checkout. So let's actually look at the checkout object that comes back. So if we maybe add this to the card again, we need a size. So now all we can see is we have the checkout object here and we have the line items. I can't. Can I not click into it? Gotcha. Okay. And so the line items, we have an array. Am I looking at the wrong thing? Yes. Thank you. Do we only have one item in the card? Okay. All right. So not entirely sure why. Okay. Let's try this again. So if we edit, have it here. I guess we can look at the scope variable. So in the checkout, get our line items. Okay. So it's the actual variance. So we have two, do we have two separate products in there? And then if we look at the quantity, does it have a quantity? Where is it? The low ID. The low ID. Yes, very good. I'm blind today. Okay. So this is quantity one. And then this is quantity two adds up to three. Okay. Yeah, that works out. What's interesting though is if you look at the API request and we probably need to actually finish the API request, what we see what comes back in the line items, we actually get a list of edges. So it seems like the JavaScript bias decay is actually transforming the result there and sort of abstracting away the GraphQL interface, which is interesting. But yeah, so the point here is that we're not actually pulling in the content at build time in this scenario. But this is actually facilitating using JavaScript and the Shopify API. So JavaScript APIs to handle the dynamic case where I want to check if we still have items in store and updates my whole checkout object state. So yeah, that's the cool thing. The Jamstack, you can actually do a good amount of things with it. I guess the philosophy is really similar to where kind of with mobile apps, the front end of your mobile apps is basically steadily on your phone and start there. And then you use APIs to handle dynamic actions and sort of the same approach here. And it works actually quite well for e-commerce. So that's all from me. Thanks so much for listening. And remember, the coupon code is jam 2019. And you can buy some lovely Jamstack jammies. Thanks a lot.