April 8, 2020
Build an Ecommerce Site Using Stripe and Gatsby — Learn With Jason

Build an Ecommerce Site Using Stripe and Gatsby — Learn With Jason

– Hey, what’s up, everybody? So it is nine a.m. Pacific and I am getting ready to go here but I’m still missing Thor from Stripe so I just wanted to get on and make sure everybody knew
that I was in fact live, that the stream is gonna happen. Aha! There he is! Hey, how are you? – [Thor] Good! Yourself? – I’m doing well. Let me switch over. – See, I think my VC setup
might not be the best. – This looks okay. So let me get shared here. Okay, that should be good. Let’s see. – [Thor] Huh. Can’t really hear you very well. – [Jason] Can you hear me better now? – [Thor] No, I think the
problem is that my speaker is not connected. I might dial in with the laptop as well. – Okay.
– How is my audio quality? – [Jason] Your audio quality
is good so let’s see. We are I think ready to
roll as soon as you are. While you’re getting that going, what I’m gonna do is just
pull up some pages here so that we can start looking at the things that we wanna cover today. Let’s take this and go for there. All right, so where do I
find the Stripe Checkout Beta if I’m looking for it? – [Thor]
Stripe.com/docs/payments/Checkout. – [Jason] Okay, you broke
up a little bit here. Can you say that one more time? Stripe.com/? – [Thor] Docs/payments/Checkout. Actually, let me grab
my hats just to be sure. – [Jason] Okay. – [Thor] One sec. – [Jason] All right. So the goal of what
we’re trying to do today is we are going to use
Stripe Checkout here. Well, we’ll have Thor talk
about it a little bit more. It’s gonna let us set up an
eCommerce site with Gatsby so we’re gonna get a real fast, real easy eCommerce site going so that we don’t have to stress about all the challenging parts
of setting up eCommerce or the challenging parts of hosting it. We can just set something up in Stripe, we can set something up in the Gatsby, and we’re off to the races. So Thor, do you wanna
talk a little bit about what Checkout is because
I think a lot of people are familiar with Stripe, right? I know that I’m not 100%
familiar with what Checkout is in comparison to, say, no
that’s not what I’m looking for. In comparison to Stripe Connect or Stripe, the other Stripe family of products so what makes Checkout different? – [Thor] Yes. One second. Can you hear me okay? – I can! We’ve even got double video here which is, no, this is great. Okay. (laughs) – Yeah, sorry about that. I’m currently in our Dublin office so the rooms are very booked. The quality of the VCs degrades if you don’t get the good room. – Ah, gotcha. Well yeah. So yeah, where we’re at right now is we’re looking at the
Stripe overview for Checkout. When you get a chance, if you can just talk us through what makes Checkout
different than anything else that Stripe has to offer? – Yes, so if you are familiar with Stripe, before maybe having done an integration, so Checkout, historically,
was this pop-up iFrame overlay that would give you a payment
form, a complete checkout form to allow you to collect billing details, shipping details potentially,
as well as the card details in a beautifully-designed
iFrame from Stripe. What we would do is we would
take those card details, send them off to Stripe, create a token, and you could then use
that token on your server to charge those card details. – Okay. – What we’re looking at today
with the new Checkout Beta is a fully hosted checkout form so where previously it
will be an iFrame overlay, this is now fully hosted by Stripe and this enables us this flow where we don’t actually
need a server-side component to make the payment. And we can do that by
creating, for example, the product in SKUs within
the Stripe dashboard and then from the client side, we can simply reference the SKU IDs that we want to collect payment for and then we redirect to checkout where then the details are collected and the payment is automatically made. – Okay. Let’s give this a shot. There’s a preview button here so we’re gonna go in
and just give this a try and so we can do here. I’m gonna use that sample card and then it’s any valid anything, right? So let’s just give this a shot. – Correct. – And so this is all hosted
on Checkout.Stripe.com and then it would bounce
us back to the docs and so we have now
bounced back to the docs and we have successfully
completed a purchase. That’s pretty slick. In order to do that, if I understand this correctly,
just to repeat it back, I have my Stripe account
and I go in to Checkout and I create a SKU for a product, and a SKU, I don’t actually
know what it stands for. It’s just S-K-U. It’s a unique ID for a product and so we assign a price
to it and then on my site, I use the Stripe Checkout link
that says purchase this SKU which then sends you to
the Checkout.Stripe.com and you pay for it and then it
bounces you back to my site, so basically this opens the door for exactly what we wanna do today which is a statically
generated Gatsby site that we’ll be able to do
full-featured eCommerce by moving to Stripe Checkout. That’s pretty awesome. And somebody in the comments
just swooped in with the save. SKU stands for stock keeping unit. Thank you to both the people
who pointed that out. (laughs) Okay, so how do we wanna start this, Thor? And I haven’t done anything
so should I create an account? – Yes, let’s create an account. The SKU is a product variant. For example, if you take a T-shirt, the T-shirt can have multiple sizes and so your product would be your T-shirt and then you have a SKU that
would be this T-shirt in size M and then another SKU is this
T shirt in size L for example. – Awesome. So I’ve pulled the screen away so that I can actually
set up a password here. So give me just a second
while I get this created. All right. Oh good! This is my favorite new thing in CAPTCHA is trying to identify cars. I saw a really good joke
about this the other day. Actually, it probably was a long time ago where they were saying that
this is how you actually drive self-driving cars like Google’s, please identify all the stop signs and please hurry. (laughs) – Yeah, I mean, we’re basically training the Google algorithms
at this point, right? We should get some commission here. (both laughing) – Okay. I wanna use the API, right? – Oh yeah, that’s a screen
I’ve actually never seen. But yes, let’s use the API. – Okay. All right, and so I’ve
got my publishable key and my secret key. All right, so if I wanna go
to Checkout, where do I start? What do I wanna do here? – [Thor] Yes, so I think
there is, because it’s a beta, if you go back to the Checkout docs, I think there’s a link to basically activate the new Checkout. Sorry, I haven’t done this in a while. – Okay, let’s get over here.
– Let’s see. – And get started quickly, get updates. – Yeah, we want the
Client-only Quickstart. Sorry, yeah. – Enable Checkout in the dashboard. So we’re gonna jump over here, Business settings, Checkout settings. – Yeah, I think you can click
the link in the docs or yeah. Maybe it’s better that you show us. – So we’ve gone to Business settings, Checkout, we’re gonna enable that. Okay. And so now I’m going to configure my SKUs. And let’s see here. So yeah, for the sake of
this, we’re going to… Where did I go for this? Product section of the dashboard. Ah, so now that I’ve enabled–
– Correct. – Now that I’ve enabled
Checkout, I can see products, or maybe I could see that all the time and I just didn’t notice it. So I’m gonna create a new product and let’s sell freelance pants today. And I think those go in the
store for $26 so let’s do that, and I will grab an image of those. Let’s see down here,
we’ve got freelance pants so let me save the image. Oh cool, we got WebP. I wonder if Stripe is gonna support that. – Ooh. – Let’s find out. – It’s a first feature request. – Yeah. (laughs) Let’s see. So I can take this image
that we just downloaded and now that’s not gonna
be a supported format, so let’s go into the console
and let’s get the right format. So this is one of the cool
things about gatsby-image is that it’s basically giving
us all the different varieties and so I can edit this,
grab this one here. So we generated a bunch
of different images so that we would be able
to show the right image at the right resolution to
not waste any bandwidth. And so this is the big version that is an enormous
version of freelance pants. We’re going to use this one because I don’t know what
size they actually need. So let’s do freelance pants, save that, and we’ll go back over here
and let’s grab that image. Less than 512. Okay, third time’s a charm. We’ll get a smaller image. So let’s grab the one that’s, let’s see. How about 1,365? Eh, let’s go 910 just to be
sure that it’s smaller than 512. – So Gatsby definitely has
better image support today (both laughing) than Stripe Checkout
but we’re getting there. – All right, so we’ll replace that one. We will try again, get
the smaller image I hope. 84k, that should be fine. And pants! – Let’s see. – Did that work or? – I hope so. Hmm. – Let’s try that one more time. – That’s good. That’s a general ticket right there. – Oh, here we go. It did a thing. Okay, so maybe because we hit
an error, it broke the thing. All right, so now we’ve got it. So then I’ll go away, got this very helpful overlay from Zoom. There we go. Once we’ve configured our product, we can integrate on our website. So we’re gonna add
Checkout to the website. Let’s look at writing it
ourselves just to understand. – Correct.
– Okay. Do you wanna talk me through
what’s happening here? – Yes, exactly. With that SKU ID, we can now, using Stripe.js on the client side, so Stripe.js our web SDK,
so that is the first step. We need to load Stripe.js
from a Stripe host domain and then in the second step, we initialize Stripe.js
with our publishable key to say, okay, we want to use Stripe and this is our Stripe account so our publishable key
identifies us with Stripe and here we have to
specify the beta as well so we will be able to use this Redirect to Checkout
message shown below. – Got it. – Once we have Stripe.js
initialized with the Checkout Beta, we can then call Redirect to Checkout and we specify the items
that can be an array and we specify the SKU ID and the quantity as well as our success
URL and cancel URLs. – Okay, so this looks
really straightforward if I’m understanding correctly. So this is just what I’m
gonna make my form handler. If I click the Buy Now button, I’m gonna cancel the default event and just send this instead. – Correct. – Okay. Let’s rock and roll, let’s make it happen. So I’ve got a site that
I started creating here. Let’s see, do I have Gatsby
installed locally right now? Let’s do gatsby_new and
we will do just a new site so we’ll use the default
starter, drop it in here, and upon doing this, if I get my wish, everything should work exactly
right on the first try. The curse of the live demo is that we have definitely had some issues with this first install just
because people were watching. Oh, but it looks like
we’re doing okay now. Let’s see if we can get it started. – And so in the meantime, there’s a comment in the chat. I smell a Gatsby plugin
Stripe Checkout in our future. Yes, so funnily enough, there is already a bunch of Gatsby-Stripe plugins that we’ll actually be using. We can do some shout-outs. I actually noted down. There’s some great folks
who worked on these. I just need to find my notes. – Let’s see. Let’s make this a little
bit easier to see, so I’ll make that nice and small, we’ll make this a little bit bigger and now we should be in pretty good shape to start doing things. So Thor, I will let you direct me here. What should I do next? – Let’s do an easy example first where we’re just selling
that one pair of pants, okay? – Yes. – So we don’t need a card. All we need is, let’s say a button, and let’s create a button
that says Buy Pants. – Okay, and I’m doing this
just wherever I want, right? – Exactly, yeah. I think for now, we can
do it on the home page. – Okay. We’ll just take all of this here and what we’re going to
do is make it a button because buttons should be buttons because semantics are important and we’re gonna start here. So we’ve got just a button and currently this button does no things. What do we need to do next? We need to get that Stripe
third-party script in there? Do we use a plugin for that
or are we doing it by hand? – Yeah, I’d say you use a plugin
and I’m mainly saying that because I’m actually not sure what’s the best way to do
that by hand but maybe. So there is a plugin called
gatsby-plugin-stripe. – Stripe or Stripe Checkout? – Just gatsby-plugin-stripe
and so that gets us Stripe.js. – Plugin that adds Stripe.js,
excellent, so let’s do that. All right, so we’re
gonna add plugin Stripe and to configure that, we
just need to export it. Good deal. So we’ve got plugins here, I’m just gonna add this right at the top, gatsby-plugin-stripe. Okay. – And now what they should do
is load Stripe.js on our page. We could quickly check
if that’s happening, come to the exact tools.
– Yeah. Let’s definitely verify. So we’re compiled, page
is still loading okay, and we want to take a look at… How do I get this to go away? – So if we go to the console
and just see if we have– – js.Stripe.com.
– Oh yeah. We got Stripe there. – Perfect! – We can go to the console and
quickly look at what Stripe, so we will have with a capital S, a Stripe object on the
window and we can see– – It’s got some stuff. – Yeah, we’ve got a
function there too, exactly. And so in our next step, we will have to initialize
our Stripe.js object with our publishable key. – Okay, and our publishable key was in, is that on home? – The developer section. – Developers. Let’s make this bigger again. – It should be API keys on the left. – API keys. Let me move this out of the
way so I can take this one, got my publishable key,
and I can take that. Where do I wanna do this? – So actually if you go back to the docs, one cool thing we do in the docs if you’re locked into your account, you might have to reload that just because you’ve looked in now. – Write it yourself. Okay. Oh, it did my– – So it should now–
– Well, that’s cool. – Have your key in there so
you can copy and paste that and we want to initialize that when the component mounts. – Got it. Let’s see. Oh man, I’m so tempted
to use hooks right now. I’m not gonna do it. I’m gonna restrain myself. Let’s do, let’s see. Constants IndexPage. Oh man, do I remember how
to write class components? This is gonna get interesting. – We could also pull out the button into its own Checkout component maybe. – Yeah, yeah, yeah, yeah. Okay, so button extends. Oh, man. Let’s see. React.component and then
we want componentDidMount. Let’s see. We should probably… We need this to be global. Yeah, we do need that to be global. All right, let’s see what I can remember. We’ve got this big thing– – I think it needs to be a class, right? – Oh my god, yeah. (laughs) Okay, this is gonna go
well for us as you can see. All right, I’ve got a componentDidMount and then we can do
render and on the render, we’re going to return
this button and onClick. Oh, let’s see. We want this to be a form, don’t we? Form onSubmit and that’s
going to be an event and that event should event.preventDefault and then we wanna do this.stripe. What was it? – Redirect to Checkout. – Redirect to Checkout and we’re going to go get our SKU from the dashboard which was under products, freelance pants, and let’s grab this SKU. – If you click on Use with Checkout, I think it gives you the code snippets. There’s a button there. – Oh cool! All right, so let’s just grab this and I’m going to just take this part because I ultimately– – That’s the ways, yeah. – So that’s what we want, and let’s see. Maybe we can just try
this and see what happens. So this is gonna break on us but let’s just swap it out for localhost and make that not secure
because we didn’t set that up. Okay. And then what happens? We’ve got form onSubmit. So that takes us down to here, right? And then we need one more. Okay, and then we’ve got
our button and our button, we can just copy-paste from down here and we’ll make this a type submit and here we can do our button. So this all feels like
it’s not gonna work. – Oh sorry, I was looking
at the chat there. There’s a question in there. What’s the difference
between setting this .stripe in the constructor versus
in componentDidMount? – That is a good question. Thor, do you wanna take it
or do you want me to take it? – So I think in the constructor,
we might have an issue with accessing the window object, right? – Right. – So it’s not why we’re doing
it in componentDidMount? – Yes. So with gatsby, you need to have access to the window component to do things and when you have something that relies on the window
component like this Stripe class, that won’t be available
during server-side rendering which is how we do the build step so you would need to
either have some checks, like if the window is undefined, then do nothing, and there’s logic, but components don’t mount
during server-side rendering. They’re just built. So we can skip the whole logical rigmarole of figuring out whether
or not window is available by dropping the logic
into componentDidMount because this will only ever
happen in a browser context so that’s why we do it here
instead of in the constructor. Okay, so I’ve built this. – Nice. – I have my doubts that this is gonna work because I just copy pasted a bunch of code but let’s give it a shot
and see what happens. Let’s see, did I already break it? We’ve got some problems. Wait, Stripe is not defined? I guess that doesn’t
matter because it’s global. Did things happen? Let’s see. onSubmit, let’s log something to see if I even set this up properly. Let’s also just delete the
stuff that we don’t need. And we can pull this off window and that should delete all of our. Okay, no more errors. We get the hello but in
order to use Checkout, you must set an account
or business name at aha! I am not done setting
up my Stripe account. – Mm! That’s good to know. – That’s a helpful error so let’s do this. Buy things from me and my sweet web store. All right, so let’s save that
and let’s come back out here. Try this again. Now what happens? I click, I get sent through, I am purchasing freelance pants. Oh my goodness, let’s see what happens. and then it’s just 4242. Okay. Let’s see.
– That’s a good location, man! – All right, and so it bounces
us back to our success page which is what we wanted. Of course, that page doesn’t
exist yet so let’s create it or I’ll just rename this one for now. So let’s rename this one to success and you bought a thing, and then we’ll leave that
back to the homepage. So we bought a thing and so we can go back and what happens if we break it? Is there a way to force an error? Do you have a bad card number? – Yeah, so there’s a bunch
of test cards in the docs. – Let’s create this real quick. – Oh yeah, but it won’t actually. So there’s only a success
URL or a cancel URL. The error is actually evaluated
on the checkout page itself so you won’t need an error page. – Okay, so I need a cancel page. Let’s do canceled, nothing happened. That seems like what we
want so let’s go back here and let’s just give this a shot. So if I start here and I buy some pants and then I decide, just
kidding, I don’t want pants, I cancel with that and
so that did what I wanted but I named my page incorrectly
so I need to go back here. Oops! And that would take me
to the nothing happened. Try that one more time. It does indeed work. That’s pretty awesome. That just did what we wanted it to do and there were doubts in the chat that we’d be able to redirect a local host but it all worked so wonderfully. I’m not gonna lie, I’m surprised that that went as quickly as it did especially with me having to remember how to write class components. (laughs) – Yeah! It’s great, it’s 30 minutes in and we’ve already made
some, well, fake money. (both laughing) – We have now made 26 fake dollars. I think the next thing
that you wanted to do was programmatically
generate these, right? – Yes. So the next step if we’re selling, let’s say more than than one item, so I think we’ll actually need to create a couple more products or we could create a couple more SKUs depending on what we want to do. – For the sake of not
watching me do data entry, we’ll just do one more
item so I’ll create this. And let’s save this image. I’m a little ashamed to admit that I’m not in fact
wearing my JAMstack Jammies under the desk right now. I did promise myself that I would never not wear these JAMstack
Jammies after I got ’em. Okay, so we are in here. Let’s create another product. No, I don’t wanna do it as a SKU, I wanna do it as a new product. And I can do that here, new. Call it JAMstack Jammies,
these are also $26, or five contributions if you want to commit to the Gatsby repo. – Oh, nice! – Yeah! Yeah, we just rolled that out
over the last couple of weeks, I think it was. We got to the point where you can get a lot of things from our store, anything that’s valued at $10, you get for any contribution and then we have some higher value stuff like coffee mugs and these
pajama pants and stuff that anybody who has five
contributions or more, we will give you one of those items, the $26 items, which is– – [Thor] That’s awesome. When I saw that, just log
in with your GitHub account and it’s getting your
swag for your contribution so that’s so cool. – It’s been one of the
most fun parts of this job is being able to hook people up with swag. I mean, the community in gatsby
is really, really amazing and I don’t get a good chance to say thank you to a lot of people so this is a way to
actively say thank you, like we wouldn’t get very
far without the community and this is the least we can do, right? – [Thor] I feel like that’s a good point to call out Nathan Beck and Proc McElroy who have written the
plugin we’re gonna use next which is the gatsby-source-stripe plugin. – Okay, so let me share
this one in the chat and then the next one that we’re gonna get was Stripe Checkout. Is that what you said? – [Thor] Oh no, sorry. The first one was the gatsby-plugin-stripe and then the second one we
need is the source plugin. – Gatsby–
– gatsby-source-stripe plugin. – gatsby-source-stripe, got it. So this is going to pull in.
– Yes. So this allows us to pull in data from the Stripe API at realtime and so instead of hard-coding our product IDs and our SKU IDs, we can now use this plugin at realtime, basically retrieve all
our products and SKUs and then dynamically, well, at that point, dynamically create them. – Yeah, cool. Okay, so I need to grab that secret key which I’m going to do off screen and I’m gonna also take this off screen so that I can set–
– What’s actually a good point here is we
can create a restricted key so instead of using the secret key, we can create a restricted
key in the Stripe dashboard. – All right, well, let’s do that. I go to an API keys and then
I can create a restricted key. I just wanna be able to read. – [Thor] Correct, read products. Does it list SKU separately? – It does not appear to.
– I’m not sure. – Connect resources.
– Oh! Oh yeah. It does, down that’s our SKUs.
– Oh, all the resources. Okay. So I’m gonna get SKUs and products and we’re gonna set those to
read and that’s all we get. – Yeah, let’s do that.
– So let’s grab that key. Oh, key name is required. Let’s do Gatsby Store. And I’ve got my restricted key so then I can take this back over here. Let’s start looking at this
and pull this over here. Let’s get gatsby-config open and we’re going to just drop
it right in next to this one. So we’ll do resolve, get
the gatsby-source-stripe and then we’re gonna do options and we’re going to do objects. Wait, do I need all this? I just need product and SKU, right? – [Thor] Yeah, yeah. We might actually only need the SKUs because the SKUs have the product ID and we can use GraphQL too, then group the SKUs by
product ID for example. – [Jason] Okay. Two questions just came up in the chat. One of them I think is I wanna answer both but one I wanna answer right now because I’m about to paste a public key into my gatsby-config. This restricted read key, it’s
safe to post this in public because all it can do is read, right? – [Thor] Read-write? Yeah, no, yes, yes. – [Jason] Correct? (laughs) – [Thor] Yes, so that is why we’ve created the restricted key here.
– Okay. – [Thor] So yes, very correct. We should never share
the secret key anywhere. – I want to be–
– In the source, restricted keys best practice would be to have it in an env variable. – [Jason] Okay, well
let’s just do that then. – [Thor] Should we do that? – [Jason] Yeah, let’s just do it. So let’s do STRIPE_SECRET_KEY and then what I’m going to do is we’re gonna create a .env.development and I can do STRIPE_SECRET_KEY and I’m gonna drop this in here and the way that this
works is we we pull in .env for both build and production and we don’t actually publish these so I’m only gonna set it up for this but let’s also do downloadFiles. downloadFiles is true, so let’s do that. – [Thor] Do we need to
add the .env.development to our gitignore or is
that included by default? – [Jason] It’s included by default. Let me just verify that. Let’s get status. Yeah, nothing. Okay, so it is not ignoring it so I need to in the .gitignore. – [Thor] That’s yeah,
also the important piece that you should never
commit your secret key. We can do .*, yeah. Nice. – [Jason] And now it’s gone. So we will be able to avoid that. Now that we’ve got this,
let’s see if I did it right. Let’s see. Intermediate value, intermediate error. gatsby-config 16. Oh, I just did dumb things. Let’s try that one more time. Okay, so we still had a problem. Our problem was no STRIPE_SECRET_KEY found which means I did something wrong so let’s just do Gatsby env variables. – [Thor] I think we have to
require them the config runs. – [Jason] So on the server-side Node.js, we can use .env, so it’s
already a dependency of Gatsby. See, you can require it like this. Okay, let’s just do this then. I’m gonna drop that, I’m going to go into my gatsby-config, I’m going to run this, and I don’t need to do
the process.env anymore, I can just use default so
we can run it like that and now we should have our
API key in the environment. Let’s see, it didn’t like something else. Hmm, okay. So new error. It doesn’t like property ID. – [Thor] No, is it within the… Let’s have a look at the
contract of the source plugin. – [Jason] Okay, so looking at this again, gatsby-source-stripe. – [Thor] No, I think that
the plugin has changed so the name has to be not plural but, what’s the word I’m looking for? Singular. – [Jason] For object? Oh got it, got it, got it. Yep. Let’s try that one more time. It still doesn’t like. – [Thor] It still? So in my project, I
have only the S capital. I’m not sure if that
should make a difference. – [Jason] It probably does. It does indeed. So that’s just me not
reading the instructions so let me fix that. Try again. – Fingers crossed.
– While I’m running this build because it’s definitely
gonna work this time, the other question that came in is, so obviously, this isn’t a good path if you have a client with
hundreds of thousands of products. I don’t know. So I think that the general
feedback that I give when people ask when is
Gatsby not the right idea is that Gatsby will work
for tons and tons of pages. Where it starts to fall down is if you have multiple
updates per second, if you are constantly putting things up and tearing them down and doing rebuilds, then at a certain point, you’re gonna spend so much
on rebuilding the site that it would just make
sense to have a server but that’s a problem that
we’re attempting to solve that we’re hoping will
be solved in the future but in the meantime, basically, if you’re doing fewer than one or two rebuilds a minute, you’re probably fine to keep using Gatsby. It all is gonna depend on
the actual site though. If you’ve got 100,000 pages and it takes 25 minutes to build, then obviously that’s
probably not a good move if you are building more
than every 25 minutes but if you’ve got that
same number of pages but it only takes eight minutes to build, then it’s probably not a big deal because that’s about
how long it would take to clear the edge cache
if you were using Varnish or putting everything
on CloudFront on AWS, takes about 10 minutes
to clear that cache. So it really comes up
to what your use case is and what the specific restrictions are. I hope that answers your question. And with that being said,
we have the site building and let’s jump into GraphQL
and look at what we did. We’ll make this a little bit
bigger so it’s easier to read. And we can clear all this
’cause this is old stuff. Let’s take a look at
what’s available to us. We want all Stripe products, right? Or do we want all? Let’s try both. All Stripe product, and let’s get the edges
and the nodes and names. So that’s cool. And then what else do we need in here? Maybe attributes? Attributes or name. It’s not super helpful. Let’s look at allStripeSku
and do the same, edges, node, and what do we have in here? So I’m hitting option
space to get this drop-down which is one of my favorite
little shortcuts in here. You can see everything that’s available. And so is the ID. – [Thor] Yeah. we need the ID because we’ll have to specify that in the Redirect to Checkout call. – [Jason] Yes. So the problem, so it looks
like you were correct. In fact, we do not need the product at all because it doesn’t look like
that’s going to help us. How do these cross link? Is there a cross reference? Product. And then in the product, I added the name. – [Thor] Yeah, so the product
itself has a list of SKUs – Ah, I understand.
– But then on the SKU, also it has a product ID. – [Jason] Yeah, so the product. We don’t need this product ID, right? Not today? – [Thor] No, not today
unless we wanted to, for example group by the product ID which we could do in GraphQL
which is pretty cool. But since we only have
one SKU per product, let’s leave that be but what
we need is we need the ID, we need the currency, the price, and then from the
attributes, we need the name. – [Jason] And so I don’t need
anything from the product? – [Thor] Not today. – [Jason] Cool. In that case, for the sake
of keeping things simple, let’s drop the product
entirely for our use case. We’re just gonna use the SKU and we can see here
we’ve got the actual SKU which is what we need to send to Stripe. We’ve got currency and I
believe if we, let’s see, where is my index page? We set the SKU, we set the quantity. Do I need to set the currency? – [Thor] No, but I think
we want to display it. I think this time, maybe we
create a little product card to where we can show one card per product and then have the buy button on each card. – [Jason] Yeah, I think that makes sense. Then, do we get file Stripe? Hmm. Do we get–
– So the image here is a URL. I think the source plugin
should have capability to pull the file. I actually haven’t looked into that myself so we might have to go back to that. – [Jason] Okay, so let’s. – [Thor] To read me off the source plugin. – Yeah, it said it downloaded. Let’s look at downloading files. File node is created
for each downloaded file and the references are placed
on the localFiles field of their Stripe nodes. So let’s go here and
let’s look for localFile. Hmm. So I wonder what I did wrong. Is there an example? allStripeSku, edges, node, localFiles. Do I need to have… But we already have that because we’ve already got
transformer-sharp, plugin-sharp. Maybe it needs to happen
later in the chain so let’s make sure that
these are available before it starts loading and
let’s try that one more time to see if we get any errors. Okay. Oh, downloading remote
files, that’s a good sign. So let’s get back out here, let’s reload, and let’s see if we got
a local file this time. No, still no. – [Thor] Okay. Maybe there’s something
because we’re using the Beta, so yeah, I’ll have to
look into that later. – [Jason] Yeah, let’s check on the product just in case it’s there but it looks like I didn’t get anything. Okay, we can worry about that another day. That’s not a big deal. In the meantime, we do have this and it looks like we can
(chuckles) definitely not do that. (laughs) It’s just download
so you can’t use it to display which is a bummer but that’s all right. We’ll live without it for now. Okay, so let’s take this and
let’s build something with it. Did you have a particular style of things you wanted to do here or you just want me to throw together a product listing page? – [Thor] Yeah, so I think we can have one. Yeah, we can have the second page and then we’ll need a component. I think we need two more components, one to query and one that is the actual, a card that is displayed. – [Jason] Okay. So we can do import from react. So in the interest of trying to keep this
all collected together, or let’s see, we probably wanna have that Stripe stuff available here so we’re gonna do a class component. We’re gonna do class Buy,
we’ll call it Button again, extends React.Component and we’re gonna do componentDidMount
again if I can spell it and in this, we’re gonna
pull out stripe again, and this part, I’m just going
to leave that alone for now, close that ’cause we don’t need it, close that ’cause we don’t need it, and let’s get this out. We’re going to grab out
this whole funk method ’cause no need to reinvent that wheel. So that gives us our Stripe Beta Checkout and what I think we can do here is we can just return our render and let’s actually call this Product, because what we can render
is we can pull out the ID, currency, price, and name out of the props and then we can do, let’s see. Kinda dirty here but
we’ll just make it work. We’re gonna do an h2 and
that h2 is gonna use the name and then we can do… How do we wanna do this? For now, since we know the currency, I’m not gonna write logic to
show the proper dollar signs so I’m just gonna do it. – [Thor] We can have a format
pricing price function. – [Jason] (laughs) Yeah. Okay, so I’ve done this before. How do you do it? I need to move the decimal place. Do you remember this one
off the top of your head? ‘Cause I sure don’t. – [Thor] Yeah, I think I like to use the international number format. I think West Boss taught me that. It’s really, really cool. Are you familiar with– – [Jason] International number format? – [Thor] Yeah. Should be on MDN. – Oh, this is–
– There it is, – [Jason] This is
significantly better than I… Wonderful! Okay. So what we do need to do though
is figure out how to get, ’cause it sends back cents and
we need to display dollars. Let’s see, price is gonna be 2,600, then if we do international number format and we’re gonna do NUS and let’s see, we can do style is
currency and the currency. I wonder if will it work with lowercase ’cause Stripe is definitely
giving us lowercase, and let’s format the price. Okay, so that doesn’t
quite give us what we want. We need to instead. – [Thor] Yeah, we’ll
need to divide it by– – We need, yeah.
– 100. And now we can do to fix
it to two decimal points. – [Jason] Yeah, so we do
price divided by 100 to fixed. Okay, so then we can use
international number format and take our price float. Oh! (laughs) Okay, so maybe
what we can do instead is take our price float and
we’ll take that to fixed. – [Thor] We need a currency
display and it’s a symbol. I think that’s another one to actually get it a nice
dollar sign in there. After currency in your options objects, you can say currency display. – [Jason] Currency display. – [Thor] And then yeah. – [Jason] Why does this one work with yen? – [Thor] Hmm, that’s a good question. – [Jason] What am I doing wrong? So I did style. Oh, I’m just doing all
sorts of things wrong here. Style currency–
– Oh, yes. – Okay.
– Huh, that’s it. All right.
– That’s what we want. Okay, so I need to do two things. I need to take this bit
and we’re gonna put that. Let’s see, const formattedPrice
and that’s gonna be here and then I also need the
price float which was this one and that means that we should be able to just doformattedPrice. Thank you, Thor.
– Nice. – [Jason] And thank you, West Boss. – [Thor] And thank you
Dr. Payne in the comments. – [Jason] Oh, jeez! All right.
– In the chat. – Yup.
– Oh, that’s okay. – [Jason] That’s what I get
for not paying attention. And so because we did learn that the currency can be lowercased, I’m just going to short-circuit that and just drop it in like that and then the ID is what
we’re going to need for our button and for this. Actually, let’s do this. We’re gonna make this our
form and we will do onSubmit, and this time, let’s
make it a handleSubmit which means that we’re
gonna have to do pass the ID and button type submit Buy Now. All right. So then, we’re going to do handleSubmit and that’s going to take in our SKU and we can then take this handler here and I’m gonna have to
fix this a little bit because what it’s actually going to do is return an event handler so it’s gonna return an event handler, that’s going to event.preventDefault and then we can do all the
same things that we did before. And if I am correct, then we
can drop in the SKU like so and you can only buy
one of these at a time because we’re not gonna
write quantity handling today and we’re just gonna leave that. Let’s actually just do this ’cause we don’t actually have
this error handling in place. We will handle errors like so and I believe we’re
gonna have to bind this. That means we need a constructor and in the constructor,
we need to handleSubmit. Am I right on this? I think that you have to do that. – [Thor] Hmm. – [Jason] Maybe I’m wrong. Let’s try without it and
see if that actually works. So yeah, so there’s a couple questions, somebody saying don’t execute
the handleSubmit immediately and then another question about the format of what I’m returning here, and so basically what I’m doing is I wanna bind the SKU right away and then return an event handler. And so it looks like I am
executing this right away but what comes back is an event handler that’s basically this function here, so event, and then it
does the event default and actually does things, so this is the function that gets executed on submitting the form. This actually prepares the submit handler. It’s a little funky but this
tends to be how my brain works so I apologize if I’m confusing you. And I believe– – [Thor] I personally just
not do it and make it a form, just seeing that the form
is taken care of by Stripe. Just not sure how you feel about that. – [Jason] So the reason that I’m– – [Thor] I was thinking that maybe ’cause it’s a button, it should be a form. – [Jason] Yeah, so if you’re
using a screen reader, and I’m not an accessibility expert but I’ve been told that
if it’s not an actual form that it messes with the way
that screen readers work and so the buttons don’t seem,
they’re not read properly so that somebody on a screen
reader wouldn’t be able to effectively execute the thing. Okay, so what I’m doing now is I’m pulling in StaticQuery and GraphQL and this component down here
is going to run a query for us and then it’s going to render. And the query that we wanna
run is the query that we wrote, and that query is back here. Okay, format that just a tad, and then what we’re
gonna get back is data. And when I say that, I
think that’s what it is. Let’s start by console logging that data. I believe it’s gonna give me some crap because I have a bunch of unused stuff now but we’re not gonna think
about that too hard. We are instead going to
go to our products page and look at the console. So this gives us our allStripeSku and inside we’ve got our edges
and we’ve got our products, so now we can actually
do things with these and what we want to do is in here, we’re going to return the
product and so what I want, or actually that’s not what I want. Let’s just wrap it in something and then here we’re gonna
do data allStripeSku.edges and then we’ll map and
this will give us our, and let’s do node and
we’ll rename that to SKU. And that’s just a little
bit of ergonomics for me so that I don’t have to
think about the node wrapper so once you get into the individual SKU, everything’s under a node. By doing this, I’m just aliasing
so that I get to use SKU and it makes a little
more sense to my brain. So then we have our product and I’m going to do all of the things that we said we were gonna do up here. We need the ID, currency, price, and name. And we can pull those
right out of the SKU. So sku.id, sku.currency, sku.price, and in this case, we’re
gonna do sku.attributes. Oops, attributes.name
and there we have it! And that does not look pretty at all but it’s doing what we want it to do. And I can make it a little
bit prettier in fact if I import the layout
from components/layout and instead of wrapping it in a div, we will wrap it in a layout. This is pretty acceptable. Let’s see if we’re able to buy the things that we wanna buy. So let’s buy our JAMstack Jammies. Okay, that took us back to the JAMstack Jammies.
– All right! – [Jason] And let’s actually jump through the hoops here. – [Thor] Or we can go back and see if the other one works. – [Jason] Probably a good call. So you go back, okay, we’ve canceled. Let’s go to the products again and let’s buy the freelance pants now. Hey-oh!
– Nice. – [Jason] This is pretty slick, right? Yeah, I’m pretty into this. This is very pleasant compared to some of my previous
eCommerce experiences. And the fact that we’ve been
able to do this in what? We’ve been on for 45–
– An hour? – [Jason] An hour? We’ve been on for an hour? I’m pretty happy about this. How are you feeling, Thor? – [Thor] Yeah, good, good! There’s a question. – [Jason] Ah, yes, okay. – [Thor] Loading Stripe object in the layout component be fine? – [Jason] So yes, but you would have to, then you’re in the react state management so because you are already loading Stripe through a third-party script
that puts it on the window, adding it in layout doesn’t
do you a lot of favors because then you would still
need to extract it from layout into the component where
you were gonna use it. If we didn’t have it on window, then probably what we
would wanna do instead is setup react context or you could use something
like Redux or whatever to make sure that you had it
globally available on state and then you could pass
that around as needed but in this case, because we’re using the
global Stripe script, we’re able to just
access it from the window which is that’s really all we need. I don’t think that there would
be a whole lot of benefit to moving it into layout at
all unless you were, yeah. I can’t really think of a good
reason to do it personally. Okay, so what do we do next? I feel like we’re in
pretty good shape here. There are a lot of things that we could still do here like adding, if we had the product.
– Sure. – [Jason] We’d be able
to put multiple sizes in and add a drop-down for
size selection or something. – [Thor] The quantities. – [Jason] Yeah, we could
do quantity editing. For anybody who does want
to do quantity editing, we do have our store up on GitHub. Let’s see, github.com/gatsbyjs/store. Gatsbyjs.org. On the store, we have–
– I’ve got the socks. – [Jason] (laughs) Yes! So on the store, if you
are interested in the way like cart handling and
quantity management, things like that, we’ve got components in
the store that do that so you could just lift those straight out and use them with this
Striped-based setup. Anything else that is
worth digging into, Thor, that would help people out? – [Thor] I think what I’d love to do is seeing that we pull
in the data at realtime, once we have our page deployed and we add a new SKU or add a new product, our page is out of sync and something cool that I found recently is Netlify deploy hooks. What is it called? Build hooks.
– Yeah. – [Thor] And we can actually pair that with the Stripe webhooks. We can point the Stripe
webhook at our build hooks, Netlify build hook URL
and then we can select all the product created, updated, deleted, and the SKUs created,
updated, deleted events. – [Jason] Yup, okay. – [Thor] After that, we make
changes in the dashboard or we would automatically
redeploy in our page. – [Jason] Do you think we
can do this in 17 minutes? I think we can do it. Let’s give it a shot. I’ve already got my git
init so let’s get add all, make sure that I didn’t had
anything I didn’t want to, so I’ve got our components,
yarn.lock, that’s all good. Didn’t commit any API keys. Good. Let’s commit, or yeah, commit. Actually, how does this work? Co-authored by. What’s the GitHub email
I should use for you to hook this up? Is it like [email protected]? Do you have that one hooked up? – [Thor] No, I think it’s Thorsten. So T-H-O-R-S-T-E-N @stripe.com. – Okay, so this–
– And yeah, everyone who’s one the stream, if you have any feedback on the checkout, we’d love for you to use this
and if you have feedback, you can send me to that email address. – [Jason] Okay, so what I’ve done is I’ve just created a new repo. I am currently pushing things to it. I have now pushed things to it. So let’s go over to Netlify
and I’m gonna sign in here. Let’s see. Maybe this one? What? Oh, I went to the wrong. Just one second. I’m on my other screen here
grabbing this password here. Okay. What’s this thing doing? Hmm, getting like the
windows not available thing. Did I break something?
– The cropped from the Chrome extension. – [Jason] There we go. I don’t know why that just happened. Okay, one second. Let me pull out my phone and
get this authenticator app. Two-factor authentication is a great idea until you’re trying to do
something in 17 minutes or less. Let’s see. – [Thor] Yeah, you should get one off the keys, the YubiKeys. – [Jason] Oh, I do love that idea and I know for a fact that
I would lose it. (laughs) Okay, so a new site from Git. I’m gonna pull it from GitHub and I’m going to grab
called Stripe something. Okay, it’s a personal site. We’re going to deploy master. We do want Gatsby build. Okay. And I’m gonna need to set
some environment variables before I can do that
so let’s go to settings and Build & Deploy. – [Thor] Oh, and I think we might have an issue with the node version. If I remember the source plugin SAS, we need a node version above 10 but let’s see if it builds. – [Jason] Okay. Same thing here, we’re just gonna set this so that it’s available. All good. And then I’m gonna go out here and my assumption is that
this is not gonna work because we didn’t have… – [Thor] Yeah, it should fair. (laughs) There we are. Oh yeah, so this is
the node version issue. – [Jason] Okay. – [Thor] So we might have to add, I remember that a file. What was it called? – [Jason] I think we just need to update the Netlify node version. – [Thor] Yeah, can’t we do that manually? I know there’s .nvmrc file we can add. – [Jason] Is that all it is? Is the nvmrc? – [Thor] To get the top-level cross act. – [Jason] Yeah, let’s do that. How have I done this? Echo node v to nvmrc. (laughs) Nope. (laughs) Okay, let’s just do that again. – [Thor] Is it the double? – [Jason] It definitely could. I think I might have to
quote it or something. Okay, I’m gonna try this one more time. Node -v into nvmrc then if we cat that, that’s what we wanted, okay. So yeah, I’m just saying
echo the value of this instead of just that plain text. So let’s commit that. We gotta add it first. Add nvmrc, good. Commits. Add Node version for Netlify. Okay. Let’s get back into the deploys and see. So this should kick one off here and we’ll see if it actually
picked that up for us. – [Thor] All right, fingers crossed. – Now using Node 10.
– Nice. – [Jason] So it did pick that up. – [Thor] There’s a question
in the chat, I think. The best answers, we’ll publish the recording
on Jason’s YouTube. How long does that take actually? – [Jason] It should be
up within a couple hours of us wrapping up. It typically–
– Nice! – [Jason] Yeah, it doesn’t take very long. So the billing interval
for a single item product, we didn’t set up a billing interval so that’s something very cool which you can set up
subscriptions in Stripe. I remember doing that a long time ago. I used to have clients
who I would auto-bill for hosting and stuff like that and I used Stripe to
do it which was amazing but I’ve never done it in Stripe Checkout, so Thor, is it just a setting? Sorry. To do that, it’s just a setting, right? You don’t have to do anything special? – [Thor] Yeah, so instead of creating a one-time purchase product, you create a subscription plan that is associated with the product so instead of a SKU, it will have a plan and then you can use it the
same way referencing the plan ID in the redirect to checkout and then it would actually sign them up for the subscription. – [Jason] Okay. – [Thor] Cool. – [Jason] So yeah, this works. We have one problem that
I haven’t solved for which is the redirects are
hard-coded right now here. – Oh, yes.
– So this, I’m not going to solve this
because it’s just busy work but effectively, we would
wanna define local variables so an environment variable for
what our development URL was and then what our quote-unquote
production URL would be which is this one and we
would just swap those out. So if anybody is trying this,
the redirects are gonna fail but that’s okay because
we know that it would work if we weren’t being lazy. (laughs) So that being said– – [Thor] Jason, do you know if
Netlify has these by default or if you would have to install them? – [Jason] I don’t know if they do. I’ve never actually looked but that sounds like
something they would have. That’s very much a Netlify thing. – True.
– Let’s see. So Stripe product updates. We’re gonna build master,
we’re gonna save that, and so now we have a build hook. Okay. And if I go back in
here, URL to be called. So basically what we’re doing right now is we’re saying that
when a product is updated and if I find, let’s see, product is updated, product is
deleted, product is created, and then let’s see if SKUs
are down here as well. SKU created, deleted, updated. So any of those changes
should call our Netlify build. So if I had this endpoint, we can test this now by
going over to products and we will do, let’s just do some punctuation for now, and what this should have
done is triggered a build. So let’s go look. Deploy triggered by hook,
Stripe product updates, so that is rebuilding for us now based off of product changes. What’s really nice about
this is as a developer, then you could hand over the
administration of the store to somebody else, somebody in the marketing department, somebody who’s managing inventory, they can go in and update the inventory. They can update the
products that are available and not have to worry about
whether or not the site is locally installed or
that they can run a build or having to log in to
Netlify and hit a button. They’re able to just edit the inventory and things will immediately go live or within a minute or two. That’s a pretty powerful way to work. And we did it in about 11 minutes, including me having to go
through a two-factor outflow. So I’d say that’s pretty impressive, 10 minutes to set up auto
rebuilds based on your inventory, that’s a pretty nice workflow. – [Thor] Yeah, I mean,
I’m a big fan of Netlify. – [Jason] Okay. It’s so wonderful.
– It’s wonderful! – [Jason] I love this product. I feel like this was such
a game-changer for me because AWS is really
easy and it’s really cheap but you still have to go to AWS and you still have to setup
the bash script or whatever to handle all the nine API
calls to upload and package and invalidate your AWS stuff, just being able to set it once in Netlify and walk away is such a wonderful thing. Okay, so while we wait for this to build, let’s see if maybe
Netlify’s thing locked up. I think we’re just waiting right now. Does anybody who’s watching have any questions for Thor or I? Before we wrap up, I think we’ve got, we’ll try to maybe wrap this up within about five minutes here. And while we’re waiting
for questions to come in, Thor, is there anything that you’re particularly excited about right now? – [Thor] Oh, in general? This is very much a beta
and we’re really looking to extend the use cases. There’s things like shipping
calculation and tax calculation and all the things that you might need, more functionality if you’re selling physical goods and things. So the functionalities is gonna grow and I very much love to
hear what are the use cases that you’d love to build. Drop me an email and we can
look at it with the team. – [Jason] Let’s see. A question came in about logs. I don’t know what’s in the logs. Let’s find out. So let’s see, we did– – [Thor] Maybe let’s look
at the payments view first. If you go to the left. – Here?
– Just see what, yeah. – [Jason] Yep, okay. So here’s what we got when
I did my one test payment. So it shows when it happened,
that it went through, who I am, a little bit of
info about the credit card. And let’s see. Oh cool, it even shows the Stripe fees. And what’s that Stripe fee? It’s 0.29% plus $0.30 or something. – [Thor] Yeah, it depends on the country and the payment method. – [Jason] Oh yeah, then
here’s all the info down here in the payment method. So yeah, it looks like
you would be able to do, you get quite a bit of info and then if you click into the full log, let’s see what comes out. Don’t. All that same info. Well, hold on. This is not the same log
that we were talking about but I’m sure if we went deep
enough into the logs, we’d– – Yeah, no, the info’s kinda– Yeah, a split between the source there and the payment intent, the source to being
specifically the payment source. – [Jason] There is a question about the broadcasting software that I use. I use it’s called OBS, Open Broadcasting Suite
or Software or System. I don’t know what the S is for. It’s free, it’s really easy. I saw a post from noopkate, Suz Hinton, she wrote a thing about
how to do it which is here. I’ll drop it in the thing. But she has a much
better setup than I have and she did a great write-up
on how all that works. Looks like Netlify is fighting us here. It doesn’t wanna start this build. It’s just waiting. – [Thor] Oh, it doesn’t. – [Jason] I’m gonna blame
that on every once in a while, it just doesn’t start. It’ll happen eventually. And then the other question
here is is there, let’s see. Well, there’s two and they look related, so can you send a custom email after a successful transaction? And then the follow-on
question from Mr. Nime is is there a way to pass
the info into the checkout and fill it out automatically like email? That’s a great question. So actually, that is two questions. So the first one, can
you send the custom email after your successful transaction? – [Thor] Yeah. In the dashboard, you
can actually configure, I think it’s the business
settings at the bottom. Stripe has the capability to
send an email to your customer and I think it’s customer emails so you could say for successful payments and save that maybe. I think on the branding,
you can actually specify what does that look like. You can have a color profile that suits the look and
feel of your business. And if you wanted to make
it completely custom, you could integrate it for
example with emailing services and then use the webhooks
and point them there or have some cloud function
that takes the webhook, reads out the data from the
payment and the customer and then sends a custom email. – And so that would be like–
– Yeah, it’s pretty much an event or anything that happens, yeah. – [Jason] Now, would that
be the session succeeded? That’s where you would
get the customer info? – [Thor] Correct, yeah. – [Jason] If I were to,
say, want to use SendGrid. – [Thor] That is, I
think, a different one. So there, we would have
the charge succeeded. – Charge succeeded?
– If that is a new entry, no. Charge succeeded, yeah. – Got it.
– Attribute. – [Jason] Here. Yeah. Let’s see. There’s events. Oh cool, yeah. It seems like a lot of, a new payment, a checkout session was completed. These were created but
not completed, right? – [Thor] I believe so, yeah. I think a couple ones
we did the back button. – [Jason] Yeah, yeah. Okay, interesting, yeah. So this is cool. You’d have to dig into
the docs a little bit to figure about exactly how that works but it does look like you
could, using Stripes API, do pretty much anything you can imagine. You would just have to
hook to the right events and grab this data out but from my experience
working with Stripes API, everything that you want to get with the exception of somebody’s
actual credit card number, you can get your hand on. If they’ve paid you money,
you can get their email so that you can put
’em on a customers list and send things through
and all that stuff. Assuming you’re being respectful
of people’s information, there’s not a whole lot of limits. – [Thor] Went and GDPR. – [Jason] Oh yeah, and GDPR. But yeah, the API is really extensive. And Stripes API Docs, for those of you who have not used them
before are commonly held up as one of the best examples of API documentation in the industry so it’s very well worth giving it a shot and trying that out because
it’s really easy and really fun. And then the other
question was is there a way to pass info into the checkout? So if I’m on my page, where was my page? Here. Can I auto fill anything in the checkout? If I have somebody logged
in, can I auto fill these? – [Thor] Yeah, so that
is the functionality where we will make available. I’m not entirely sure what
it will look like exactly but there will be the
ability to basically specify which information you want to collect or as well as auto fill
certain information if you already have it. – [Jason] (laughs) It’s never gonna build. Okay. This was cool. I’m super impressed
with how easy that was. And for anybody who’s
built eCommerce before, I think they’ll agree that
this was a startlingly easy way to get actual payments where somebody could actually
give you actual money, which in my experience
with setting up eCommerce and dealing with the payment
processors and the gateways and having to fill out whatever paperwork to get the bank to authorize
your eCommerce thing, it is really, really
nice working with Stripe and seeing this ability
to have a hosted checkout so that you don’t even have to bother with configuring a pop-over. That is pretty fantastic. Anything you wanna add
before we wrap up, Thor? – [Thor] Yeah, just one thing. I’ve written this up as a tutorial as well and I just posted that
into the chat so if anyone, if we were too quick or anything, you can also follow along there. – [Jason] Great! I will put all of this
onto YouTube later today and we’ll include the
links in the show notes. Yeah, if you’ve got other technologies that you wanna see me
learn, get at me on Twitter, I’m jlengstorf on Twitter. Thor is ThorWebDev on Twitter. I’ll post those links as well. Let’s pull up his page actually. Let’s see. Twitter.com/thorwebdev. So everybody go follow Thor. You gotta get a beard photo up. What’s going on? (laughs) – [Thor] This is actually funny. This is the picture when
I first started at Stripe. – [Jason] Ah, nice! Yeah, okay. Well, I think that’s it for us today then. Thor, thank you so much for coming on.

11 thoughts on “Build an Ecommerce Site Using Stripe and Gatsby — Learn With Jason

  1. Great intro! I can def pitch it for some small projects. What would happen with a cart functionality? Would it pick the array and show the checkout page accordingly?

  2. Very cool! At about 1:12:00 you guys start talking about build hooks and Thorsten mentions automatic redeploys. My question: how can we make sure the user isn't seeing stale data? When exactly would the data be refetched in the client? Think about scarce product quantities and users thinking they got the "last" unit

  3. Great video guys!
    What kind of flow would you recommend for shipping info ?
    It looks like the shipping info is not collected …

  4. As I build my gatsby app with this integrated it returns a webpackerror with window being undefined as error, I can see this is due to SSR, but how to solve? Thanks

  5. I'm trying to get the images from stripe with the source-stripe plugin but got this error:
    ✕ We were unable to download files that Stripe was hosting

    can anyone help me ?

Leave a Reply

Your email address will not be published. Required fields are marked *