Ask an Expert: Integrating Payment Methods with Matthew Ling - Stripe

well hey hello everyone wow we have our early arrivers tim wrinkle and aza and alex who's supposed to be on holiday yeah and starling hello yes today very excited to be joined by matthew ling developer advocate at stripe who's going to be teaching us about integrating payments onto our sites hey yeah thank you for joining us matthew it's great to have you here yeah thank you thanks for having me so payment integrations is something that a lot of people ask me about and us generally about uh scrimba and my knowledge is well fairly non-existent so i will be learning too very excited to hear all about it um but first would you like to tell us a little bit about uh your role what it is you do and uh yeah your day-to-day kind of tasks i guess at stripe sure um yeah so i think the da or you know developer advocacy or dea for short um i think one of our main goals at stripe is just to to make sure that you know developers have the very very best experience possible um when integrating with stripe um and we also kind of we also strive to to you know build awareness and grow the community and build adoption around stripe stripe products um i think you know i think devrel from now as i as i learned more and more you know it's it's a pretty broad um kind of uh kind of a role but i think we straddle we tend to straddle probably advocacy and enablement i would say mostly whereby as advocates you know we have we're part of that feedback loop um that that um uh uh from the you know bringing information from from developers uh to strive to the product teams about how they're getting on challenges ideas um and you know we also do all of these kind of things like turning up at live streams or you know i guess uh talking at you know at conferences not so much right now um but certainly going to be you know part of our role roles going forward and so yeah we try to kind of act as as that public face and advocate for for our users and i think you know we also straddle like that and dev enablement kind of role um where whereby you know all of the folks on my team um we're all a part of the engineering org so we we you know we code a lot and you know we do things like you know creating samples be they kind of like little tiny demos or end-to-end integrations you know in one of the seven supported languages that would be like our stripe samples repository you know full kind of demos there but we also create a lot of uh content for our youtube channel um on everything from you know pretty much across the board for the product suite and also payment methods so there's a lot of i'll probably be referencing those pretty much later on um yeah but also things like you know making sure that folks like know how to use the the stripe cli um and yeah thinking about all of the the the tools and and things that that developers need and to succeed so yeah that's kind of like where we're where we we are um in our team awesome and in case anyone's not quite clear or hasn't heard of it before can you sum up what stripe is and uh yeah what the business kind of offers sure yeah so stripe is um is is a is a i suppose you could say a software infrastructure or an infrastructure company that builds uh payments infrastructure for for for you know for the whole uh whole world and the or you know around the globe um so yeah uh we're we're trying to basically increase the the the gdp of the internet so we want to enable folks to basically realize their their their their bus their dreams you know and and and actually build their businesses um in a in a really simple and and nice way yeah fantastic and you're going to be telling us a bit well quite a lot actually about how you can integrate a payment system such as stripe onto your site shortly so very excited for this as it is this linkedin user i'm sorry it doesn't tell me about your name okay thanks for this and they love stripe so that's very encouraging yeah and before we get into that side of things matthew i understand that you switched into tech from another career which i think will resonate with quite a few viewers um from the scrimba channel because quite a lot of our students are career switches would you like to tell us a little bit about that um so that's not quite um accurate i i was always in tech and since i left college and but probably um what i did do which is really close is like i kind of bootstrapped a side business um in photography a number of years ago while i was living in berlin and that was quite um quite fun quite challenging um because i you know if i kind of went from relatively zero to kind of actually having a night job uh a second job rather um as a music photographer so yeah i don't know if there's i think like if you know if you need tips on on making things like that work i i guess i have one or two awesome yeah let us know in the chat what you want to hear about and in case you were wondering why this person if any sorry if i mispronounced that is uh sending us tigers that is because we have a tradition here which is if you are new please put a rabbit in the chat if you've been before hit me with that tiger we don't do anything with this information i know it looks like we might but um it's just a tradition it's i guess out there yeah exactly already got some tigers coming at me yeah uh it's james the linkedin user who loves stripe perfect yeah so i'm looking forward to hearing all about that and as we are a code learning site at scrimba would you like to share with us uh how you learn to code yeah and that one's i mean that's a funny one because when when i think about that i think oh that's an easy answer a two-worder like i went to college you know and years ago and and uh did a computer science course and you know that was uh longer ago than i care to remember um when i thought about it more deeply i kind of figured that really in a way i learned to code quite a number of years in a way after that when i got my first proper you know job at a at a web agency in berlin um we were building out kind of like these fairly large scale java um back ends for these big enterprise companies and that's kind of when i realized oh boy okay i i did the basic i did the i did the formal stuff but i didn't really learn how to like um you know real world a couple years later and again that kind of um changed a couple years later again when uh you know rails started to really take hold and i found ruby to be just such a breath of fresh air um compared to all of the java work that we were doing so again kind of there was that big kind of phase of relearning and retooling and i think that probably i don't know i i that can happen all the time right so i think in a way we're always learning right and i think having a learning mindset is probably you know pretty essential in in today's kind of tech market um so yeah i think there were the three big kind of you know uh uh sea change learning to code events um you know that happened in my lifetime yeah i think you make a great point there so any developer really is going to be constantly learning because are we going to be using the same tech in five years yeah totally and i think you know there's kind of two sides to that and i think that you know if you if you if you learn the the fundamentals you know um for me in a way the fundamentals were like things like mvc right um you know that you can bring those with you through all of the different types of tech that you learn over time um but nevertheless yeah having you know knowing um you know knowing that you're gonna be uh a gonna benefit from having a learning mindset i think it's definitely a good thing to to think on and know 100 yes fabulous to see so many tigers and rabbits in the chat welcome to the bunnies welcome back to the tigers yes so on to what we're really here for which is the payment side of things and i'm sure a lot of people in the chat are wondering and if you have other questions of course put them in the chat and i'll do my best to ask all them the first one i had in mind was can anyone add a payment system to their site uh yeah one word answer yes uh anybody can you know can add a payment system so i i think i would probably go one step further and say like you don't even need a site anymore right so like we just released um payment links uh uh you know um pretty recently and and it's it's super popular and really all you need to do uh all you need to know how to um you know take payments um and have a payment system um is to be able to fill out a form in our dashboard right um so literally you could just write that create a payment link in the dashboard you could write it on a piece of paper and hand it to somebody and you're in business right so um yeah it's it's uh it's really getting pretty exciting uh in the kind of no code space as well and and stripe is certainly pushing pushing that too wow that is super cool yeah yeah show your payment link as well during during the practical parts yeah looking forward to that that might sure be covered by this question from terry is it possible to have stripe available to more countries for integration in their project especially for nigeria so i'm not sure exactly where stripes available at the moment um yeah what can you tell us about that yeah i think that's a pretty you know i mean from a global perspective of really common questions like when are you getting here i'm kind of thinking and um the answer is you know there's we're always pushing to open into new markets and so really all i can say there is keep an eye i'm sure i think there's a page on the docks called either global or availability or something like that i think the easiest thing to do is just to go uh go and go and keep an eye on that and and um and of course like uh you you can also um uh subscribe to our stripe dev newsletter and we we will definitely be announcing like new markets as as they as they come online perfect yeah so the next question i'm not sure i'm not sure exactly what i'm asking but i'll ask it anyway um do you have a startup program for india i'm not too of a startup programmer you're not super sure what what that could mean um but uh but uh certainly if you wanna like i don't know elaborate on you know either directly to me on twitter or uh or jump into our discord um and you can go ask in our in our dev chat um area about like startups and stuff like that but yeah brilliant yeah that uh brings me nicely to this link i wanted or actually you wanted me to share yes thank you is stripes discord chat um well server so i think for the really in-depth questions um arushi yours is fairly in-depth uh probably best to head over there and they will direct you absolutely there's like a dev help channel which is my old team um where you can go and ask all of your in-depth technical integration questions um you know from anything from like api api stuff to like working with our um client libraries um but there's also some general chat channels where where you can go and kind of um you know uh just talk with stripe engineers and other um folks in the community so yeah highly recommend getting getting uh getting started there yeah that sounds super helpful cool so we've established that anyone can add a payment system to their site or maybe they don't even need a site question next is how difficult is it to set this up are you gonna demo later but yeah that's a good question i mean um i think it's it's unfortunately it's going to be the it depends answer um it really depends on your on your business um and the kind of payments that you want to take and how you want to take them like for example with a payment link it's it's not difficult at all right it's literally fill out a form and you know you'll get a link and you can distribute it by email or it's messenger or or what have you um but let's say if you want to build you know the next uh um ride sharing white labeled ride sharing system um that's that's going to be a more challenging integration you know where for example with custom connect you know you have to kind of take care of user verification and changing requirements over time and things like that so it really is a bit of a open question but um kind of down at the at the at this end of like this end of the the the integration spectrum where we're going to see today it really isn't very difficult at all because if you as well if you look at you know we've talked about payment links but also there's checkout you know checkout is incredibly powerful it's really got incredible features um and you could be up and running with checkout in in you know in in like i want to say minutes but and hours because it's literally one api call to stripe to create a checkout session send the user there and and you know you're done and we take care of the rest so yeah it really is very simple and what we're going to do today is an integration um not with checkout but like an on-site integration using elements and stripe.js to collect some card information so yeah i hope to show that it's it's a pretty simple affair yeah cool can you tell us a bit more about check out what it is and maybe show it on your screen if you've got something close to hand um let's see um do uh maybe that's a good time to actually i could jump into it like a payment link uh a quick if you want to share uh my screen i share it i could show you how to create a payment link and the payment link basically will redirect you into checkout so checkout is basically um like a stripe hosted payment system um and you can you know you can basically customize it uh technically speaking well you can also customize the branding of things but techniques we can customize it with different features like for example collecting shipping information applying uh you know shipping rates you can do things like um yeah you can now enable automatic tax calculation and collection so let's see um the first thing is let's make a payment link okay so first i'd like to add a product i'm gonna sell uh a coffee cup um for it's gonna be a one-time sale for 10 10 euros okay let's take that um and here we like got this link called create a payment link and payment links will actually show you um a preview of what checkout is going to look like when when you actually land there via the payment link for example you can add promotion code support you can let the customers adjust the quantity of coffee cups that they're going to buy i hope to buy loads and you can collect their billing address and their billing and shipping address you can decide which countries you're going to ship to um it's all configurable you know via the payment link interface here and this here is checkout this is what we're gonna see so i'm just gonna make a pretty simple one uh let's say uh i'm gonna you know oh well let's take the standard standard uh thank you for your payment so i'll create the link and here we go okay so if i copy the link and just paste it directly into the browser we're in checkout so this is yeah this is the stripe hosted checkout page um and it will collect things like your email address card information um and uh yeah all of the the things that you would need uh to take a payment here um you would also normally i don't have it set up with my wallet but you would see here you know apple pay button or google pay button so you get like you know integrate with um you know digital wallets kind of out of the box so it really is pretty pretty awesome stuff and yeah i mean i could talk about checkout for the whole hour but i guess we'll have to so but it was nice that was awesome yeah i'm interested actually can we customize this checkout experience so it basically matches our site is that possible you absolutely can yeah so there's um let's see if i go to wait settings um i jump into checkout where am i at check check it yeah there should be um some branding uh let's see if i can find it oh cool yeah keep the questions coming in the chat i've got a few lined up i'm going to ask so yeah yeah so you can you know you can check you know change your accent color brand color upload logo and just get everything like really really close to your own um to your own branding settings for your site and so yeah that's absolutely possible sure wow it would be seamless yeah nice testimonial here from linkedin user who i know to be james i'm taking payments on stripe and it's going well cheaper than paypal and tons of useful features so yeah that is worth knowing an interesting question from be cash uh do you use a test api during development 100 yeah so um your your account when you start your your um i can even show you very quickly uh ah i've lost uh here we go um in uh you're in the developer section for um in test mode you'll see this thing called api keys so these are your uh when you see uh underscore test underscore that's your test key um you always use like a set of keys so there's a publishable key and a secret key so the idea being you would use these test keys and you have like full functionality of your of your stripe account and the api of course you will not be interacting with the card networks and what have you so you won't be taking payments but you can do everything that you can do in live mode while you're developing sure well yeah that is excellent to know so we said that we would get on to the demo at roughly 20 past so i reckon we should stick to the plan um if that sounds good to you yeah absolutely yeah if you're ready and um yeah feel free to ask questions as we're going on through the demo and then if there's any time at the end we will ask more kind of general questions and do you want to start by uh telling us what it is you're actually doing absolutely so i think today's integration is going to demonstrate uh we're going use um stripe js and elements to collect a credit card number um and we're gonna instead of taking a payment straight away i think really fun integration that maybe not everybody has seen um is to like save that that um that payment method for later right so let's say you've got a dog walking uh business and you want to like charge a person after you've walked their dog and you might you know collect their their credit card up front and then sometime at a later date when they're up you know when the user is off session we say so not on your website um you'll you know you'll decide okay i walk the dock for 60 minutes i'm going to charge them 60 euros and you can do that off session at a later time so yeah so we call that um a setup um using the setup intents api so in stripe the two of them two of the central apis is the payment intents api and the setup intents api so as a payment intent is your customer's intent to pay for something and the setup intent is an intent to set up your a payment intent for for future usage so we're going to be using this intense api today for that cool so it kind of sounds like um sometimes you have to give your card details to secure a booking type of thing but you're not actually charged until later is that right exactly that and and like it's worth mentioning you can do that with um with stripe checkout as well but this is like how you would do it if it's like embedded on your site all right then yeah take it away okay cool uh let's see if we can get this going um i'm gonna close that top okay so i have a little bit of scaffolding um already started um let's jump into the so this is like an index.html in this case it's handlebar so that we have you know um a little bit more functionality there and the most important part on this on this page in a way and well we're going to be writing some javascript but the thing to kind of be aware of is this empty div here with the id card element so that's where we're going to actually um mount the uh the stripe card element when we've created it and for the user to input their their details uh so the first thing um we're going to do is we want to create um maybe actually a couple of words to this here so um here we've basically said when the dom is loaded we're going to like actually execute this bit of code the first thing we do is we fetch the publishable key so that's the pk underscore test that i showed you in the dashboard under developers and we're going to touch the publishable key from the backend so i can kind of maybe show you uh where that is so there we go so this is like um the back end it's a get request to slash config and what we've done is we've put um this environment variable which is just a way of storing the publishable key into uh into um instant json which we've sent to the front end so that's what we have here all right um cool and then we've initialized stripe.js which was which is um included somewhere here at the top right so this is where we included strike.js at the in the header uh in the head of the page yeah um and using the publishable key we've started uh we've incred we've created an instance of stripe stripe.js so the next thing to do is we're going to be using elements is to create an instance of elements or elements where we say stripe elements okay cool the next thing we'll need now that we have an instance of elements is we want to create a card element so we'll create card element hopefully i have no typos as i go elements i create and we want to create an element of type card okay so um next step now that we have a card element we're going to mount it onto that empty div um on line 35 so element dot mount and then we pass it the id of that div right so it's going to be card element okay cool so we don't need to restart the server because we didn't change anything in the back end but we should already see a little bit of magic here where we have this new uh card input field and this is like being you know generated and mounted um on that div by stripe and it can do nice things like detect what kind of card you're using is it a visa card is it a mastercard um so that's kind of already the first you know main thing we'd need to do is to have that element or that card element mounted i got some notes here for myself um so the next thing we'd like to do is when the button this button here when we click this button we're going to create a setup intent in the back end and we're going to pass a thing called a client secret to the front end now the client secret is um it's an identifier that belongs to the setup intent that we pass the client to actually confirm that we're going to set up that card um yeah for free for future use and we'll see that happening now so what do we need to do we need to know um we need to basically know that when the button is clicked or at least we need to run some code when the button is clicked um okay and then i'm gonna add i've got like a helper function called add message which is gonna actually put um it's gonna log something to my little console there on the website so i will say creating a setup intent okay let's see let's see if that worked to make sure i have my yeah cool okay so we know that the button event handler is working okay um next thing to do is to um we'll make the back end call so so maybe we'll add the back end code first um so this is the post route to create a setup intent so i think what we'll do is uh we'll create a customer first because um when you're creating a when you're setting up a payment a card payment method for future usage you need to attach it to a customer so that you know who to charge um we'll start with creating a customer let's dot create um and we'll use i don't know name uh battling um good choice and then the next thing is we're gonna create um a setup intent and we'll use the stripe setup intense guy for this um we're going to pass the customer this customer wait okay um cool let's see if i have any typos here so customer stripe customers create set up intent stripe set of attendance create that looks good i think and let's copy this um this response here instead of passing that stuff back we're going to pass the client secret um from the setup intent client secret so one thing i can definitely recommend when you're developing against stripe is to use the stripe cli um it's kind of like the multi for um you know for for interacting with the api but can also do really nice things like listen out for events which is what i'm gonna do now so point being um when this customer is created and the set of intent is created we should see the events actually happening on our account um those create events so i am going to have to restart the server for this because um because we had a code there so client secret set of attempt client secret okay i think that looks good let's get rid of that so i'm not going to provide a credit card number but we should oh no wait i'm sorry we got to jump back into the index and actually call that route or call that um call that uh backend route so um we're going to uh ask for the client secret uh and that will be uh we're gonna make a fetch call to create setup intent uh that has no nobody we're just asking it for like the client secret pack um so that should be enough to actually hit that route let's see if that works okay all right did i get it wrong let's see uh see if i i can restart the stripe cli i'll double check the code as well so create a setup intent okay okay and did we get the message we did i wonder did i save the file in the back end maybe not oh gosh easily done [Music] okay try one more time this is one of those perfect uh during a demo stuff is actually going wrong oh yeah i know that feeling very well from our friday live streams this happens quite a lot so yeah do not worry i think people enjoy it man yeah no i'm gonna i will track it down i promise but um yeah no worries that's all and in the meantime if you have more general questions uh about integrating payments put them in the chat and we'll save them until after the demo or maybe during if a suitable thing arrives um yes but i'll definitely try to ask them at some point okay i think what i'm gonna do is um i'll i'll make sure that the sediment tent is being created uh by logging it to the um to the standard out of the um the of the console i'm gonna just make it visible by putting in some equal signs here oh boy i rehearsed this i promise this is actually really good because if people have a similar problem they will have already seen live debugging session so yeah let's restart that server okay all right here we go let's try this again why isn't that hitting the back end at all now is my question um really silly let's have a look makes us feel so much better we have a whole live stream about this so it's all good yes um yeah okay see what i'm gonna do that's odd i because i would have expect i really would have expected to see some uh some debug i put there um log customer let's just jump into the um i'm gonna jump into so i would have expected to see some customers here since i'm creating customers okay i'm gonna do something a bit more um i'm gonna do something a little bit more drastic i'm gonna create i'm gonna copy the secret key directly to make sure i'm actually hitting the right account scrambled demo okay here we go oh sugar [Laughter] okay so now i know i'm definitely using the right key i'm also gonna log in stripe log in and i'm gonna use the interactive so hopefully we are now using same key for both the stripe cli and for the demo can i restart the server okay let's try one more time so okay let's try this now i need to remember to actually i need to pull in the publishable key from uh from there too because that's what i'm using in the front end okay all right michael says live debug is better than 10 minute tutorial because if things come up so yeah yeah wrong in the semicolon the pressure is so much is on okay so we're using the same test and the sk test okay cool this has got to be this has got to get a bit closer um okay hallelujah okay i don't know how my keys got mixed up in between uh rehearsing this beforehand but what we can see here is that we've got a create we've got a setup intent created and we have our customer which are the two calls that we made from the back end okay and we can see that we've got some debug output there we go yes okay cool so next thing to do is to actually confirm that setup intent um so we use stripe for that too and we're going to use the the if i remember it's going to be confirm card setup function the first argument is going to be the client secret that we finally got from the back end and um what we're gonna do is i wanna add some more debug here if that's okay just to make sure that i'm you know you know clicking along nicely so uh setup intent created cool and then we're going to confirm the card setup um we need to pay pass this options and we're going to specify that the um we're using the contents of the card element to set this up and when that call returns uh what we're going to do is we're going to grab the result um [Music] we're going to inspect the result to see what happens so let's say dots dot error if it's an error um we're going to uh let's add oops add a message call that says outside the results error message maybe error message and if it worked out uh we're just going to say um let's copy that let's say um setup setup succeeded cool okay so um um is that when there's an issue with the card that type of error or could it be something else exactly we'll see that so for example um stripe case is kind of kind of clever enough to find have a look at like the formatting of the card or whether your expiry date is wrong or you know or rather um in the past oh okay cool so we'll get that um as part of this error and this this result um so let's actually let me make this a little bit more pretty and let's say when the button is clicked um uh let's say um button states these are helper functions that i have in my index js file button stay processing and then when it returns let's um make it button space our button stays reset i think it's called is this a button styling type of thing then exactly so basically i have these helper functions that do things like disable the button change the text on it make you know make the color a little bit different and i have a reset function that takes the original button text and then like you know puts it back on the button so that it kind of changes states yeah um so it's just for just for convenience to kind of like make it look a bit better okay cool so i think we can go and click the button again i should say at this point michael says catching a typo oh missing a d on line 72 ah thank you so much on line 72 um missing is it is it 72 in the uh i think it's now 74. oh okay oh thank you so much perfect well done all right cool so in theory we should see um yeah so your card number is incomplete so that is the result of the um the result.error.message so that's that's kind of we can probably put in some stuff here and it's going to say no your number isn't complete and so let's give it a valid card number got all 4242 um and we should see it chew on that um and then the setup has succeeded right so and what we can do is let's jump into the uh dashboard that last customer yeah he has that matlane has a payment method um that's set up for future use so so now this pm underscore this thing signifies the actual payment method um that you can charge we could take this payment method and we can create a payment intent um and that would allow you to uh um yeah to to charge that customer offline off session at a future date pretty much as you said if you had like you took uh maybe uh uh details of a booking um or or guarantee of a booking and then you want to like charge that customer uh that customer later on yeah so a bit of a struggle to get there but um we got there in the end uh um so yeah that's all it takes to basically have um a reusable uh card payment method that can be charged offline right so that can be used for kind of ongoing things and like the dog walker you could use it every week for example absolutely yeah you could charge that customer um offline that being said it is important to remember that um um the the network may decline the card issuer may decline um an off session payment at any time so your system must be able to like it must have a flow and that that allows you to get the customer back on session and then to authenticate a payment and on that actually on on that note it's probably worth um showing how this would look um when a card is used um that requires um 3ds um or sca 3ds authentication so maybe if i go to testing so we have a bunch of test cards that basically simulate different real world um real world uh scenarios if i could find them tests are these test cards that basically anyone can use to check that what they've coded exactly exactly so for example here's our basic test cards 4242 is the one i just use used or you could you know say i've you know i've got a mastercard or an amex or discover um you know i think there's debit cards in there as well but probably an important test especially in europe is that um [Music] this test card which which requires um authentication so we can plug that in and see what the difference is uh let's uh yeah here we go so this is the kind of thing sometimes you um have to go to your bank to authenticate exactly yeah you might get a push notification or you might you know have in this case we simulate it with um with uh um this uh yeah this model um and then you can actually you know what i'm gonna do is i'm gonna cancel out that first and then let's let's let's reload the page so we can see the um the result of uh failing it and maybe and letting it succeed so um so you can do like a full redirect to the bank or you can or you can use these these um on-page models so let's just fail it and then here we can see that and when the function returned from confirming the card setup it said yeah we're unable to authenticate so you're gonna have to choose a different payment method you do it again um and then we can also make it succeed so that would be yeah if you if you successfully authenticate um the setup of that card yeah so that's kind of like a fun thing to see in action um but the cool news is stripe.js takes care of all of that for you so so yeah yeah very handy there's one question i had which i should have asked at the time but i didn't it was you were setting up the new customer i think and you said um i'm just going to make it empty for now um and my question is what else can go in there um which part was that um yes good question maybe it was the um setting up the intent um oh right yeah sure um so you can do things like specify other payment method types so by d for example uh what i could do here is payment method types um and i could have said uh card um but by default if you leave it out it defaults to card but you can set up other types of payment as other types of payment methods so like for example separate debit or um you know i think bank contact and ideal i think allow setup so um there's lots you know that that's one option i mean if we jump into the uh into the api ref uh we can see here you know you can um you know you can provide a description metadata is a way of um providing a key value pair for all objects in the api so if you want to pass through your own custom data you would do that in metadata um you can actually set up a previously created payment method that's possible too like what we did was like the most minimal um you can tell you can actually set up as well um a payment method for on session usage in the future and that's basically telling stripe look the user definitely will be on session when they when they pay um but by default for setup intents they're going to be off session so yeah um there's quite a bit you can you can you can configure for a set of intent for sure yeah which brings me nicely to this question um are there any future blockchain or cryptocurrency integration projects by stripe in the next five years uh i don't know that's a great question um i i have no idea i would say for that again the best way to know about like the the future uh uh types of payment methods is to subscribe to the stripe dev newsletter um and in fact i probably should have given you a link for that too let me go find it real quick send that to me and i think you should be able to see a private chat button somewhere and if you send it to me then i will share it with everyone else here yeah now that's very interesting question about uh blockchain and crypto because people quite often ask us uh at scrimba if they can pay with crypto at the moment but um yeah yeah um i i i have no idea but definitely the the way to keep up to date with that will be on on the newsletter which i can't quite find at the moment or the link for it well maybe michael can go and find it michael can i have a look out for the stripe newsletter if not uh tweet it later matthew and then we will retweet it yeah okay i think i got it i think i got it hold on there we go if you can hear me owing in the background that's because it's pumpkin's dinner time and he's angry today so can i post into the private chat here that's right yeah and then i should be able to copy it over so yeah and up to our developer or just jump into our discord people will you know i think all like a lot of the new stuff and we'll be we'll be spoken about in in our discord too nice yes so if you want to hear about the new releases and crypto from stripe that's the place to do it and uh cj also says you can sign up at the bottom of most stripe docs pages good to know and follow us on stripe dev on twitter as well of course that's that's where all of the developer news happens plenty of information coming your way um i did have a question from india which i now can't find it was to do with um yeah what payments are available in india um another cards definitely um that is a good question i think what you can i think the easiest way to find to see that i don't know off the top of my head but i will go quickly looking in the payment methods area um [Music] uh if you go for example if you go to the docs and under add payment methods every payment method will have um an overview page where you can see uh um the the applicable countries um that's an excellent question i'm not sure what pms are available in india other than cards because i know that like 3ds is um really important in india um but uh great question i would i'm gonna have to try and dig into that one yeah you can check it out in the docs so yeah i guess that's um applicable to all regions if you're wondering that's where you can find out yeah cool so on this topic of what's available where um can you tell us a bit about local payments and what that kind of means and what are the benefits and how do we set them up yeah for sure um so yeah that's really important right because um local payment methods um let's say for let's take europe and for example and my experience as well you know in in the the time i was living in berlin you know a credit card just wasn't really a popular way of paying for things right so you either had maybe a debit or cash um but if you look at the payments landscape across europe you know you've got like you know bank contact ideal and you've got like the bnpl by now pay later systems like you know clarinet after pay so ultimately um what you know the benefit of having you know those local payment methods is that you know we want to we want to kind of empower our users um to be able to offer the payment methods that their customers are most happy paying with um you know things that the payment methods that they're familiar with you know they trust they find most convenient um so ultimately you know ultimately that should lead to it to an increase in conversion for for for merchants as well um so it is really really important to be able to support that and you know you know ultimately it's about you know being able to to um yeah to empower users to to to um sell to into those markets where um you know where customers are are most happy with certain in certain payments for example if you take you know the chinese markets alipay we pay wechat pay and we support voucher based payment methods oxo and boleto oxo in mexico boleto in brazil i think where they're really fascinating like you basically create a payment intent um i think they're on payment intents all right and you get a voucher printed and then you go to your local oxo store and then you you know you pay uh for your for your goods and services that way really really popular in mexico yeah so it's it's it's kind of you know it's that kind of enablement um which makes it kind of so so so important setting them up um uh yeah the good news is it's pretty close uh well you can either use checkout because checkout will support a lot of those payment methods and you just simply need to say this checkout session so you know i want this checkout session to support these payment methods or using elements and stripe.js just um as we did you know you can implement a lot of local payment methods in fact um i'll be able to to tweet um or share a bunch of like tiny demos that i've built for a media payment methods like ideal um but a lot of them are bank redirect payment methods which are really popular here where you land on a page um you list out a a um a drop down of applicable banks that people can use they select their bank they're redirected to the bank uh they authenticate their payment and then they're returned back to your site and so that's all available through elements and stripe.js um so and the you know the integration isn't much different to what what we just demonstrated there um so that's that's how you would set those up yeah perfect yeah good to know something to bear in mind if you're adding payment systems to your site uh yeah think about what kind of regions you're aiming at and the relevant payment kind of systems yeah exactly exactly latcho another great testimonial um um our company we were using paypal before now we've set up using stripe almost three years it's really nice using it great stuff good to hear yeah and james likes the gentle pulsing gradient animation on the stripe landing page yeah the waves the the gentle lapping of the waves worth going to check that out if you haven't seen it already yes um is there any difference then so you you showed us i've pretty sure was a one-time payment but yeah it was pretty right exactly yeah like it was it was as close to maybe taking a one-time payment and in our case we we didn't take a payment but we saved that payment method for a future future one time payment yeah yeah so and setting up one-time payments versus subscriptions is that kind of is that a different process or yeah what do you have to do differently i suppose is my question yeah that's that's a great question um so it's kind of like the way i think about that there's somewhat two to three parts to the answer um so in terms of integration directly with stripe to actually kick off a subscription um if you're using checkout it's really not that different to checking out for a one-time product or one-time payment right basically you would just say that you would tell check out hey um here's my product it's not a one-time product it's a it's a recurring product so it might be a monthly subscription to your you know coffee coffee subscription um and you would tell check out okay i'm starting subscriptions with this product instead and it would it would handle all of that for you right so that's you know that's pretty simple and it's not a huge difference to like taking one-time payments to check checkout but if you want to take start a subscription using let's say elements and stripe.js and have that embedded directly onto your site that's a little bit more involved because there's a lot more states that a subscription can be in as it progresses to being active um that that you kind of need to take care of for example let's say um i'm starting a subscription um it will create the first invoice automatically but the payment intent that's created under the hood for that in invoice it requires 3ds okay so now you have to basically in you know handle that case in code and say um you know present the 3ds model to the user using stripe.js um and let them con complete like complete the the payment now all of those steps are all kind of integrated in the basic stripe.js features for example you know using confirm card payment which or which you kind of just showed um but that's a more a little bit more of an involved um integration then using checkout and then there's the other side of the the uh the equation where um we we strongly recommend the use of web hooks which is basically um in a way a route into your backend system where we can post events to to tell you know to let you know about things that have happened on your account for example a successful one-time payment um and the same goes for subscriptions but um with subscriptions there's a lot more things that can happen over time because we're you know it's a recurring payment system so for example um if uh uh let's say for sake of argument um a payment fails because a card is is now um invalid it's maybe expired so that particular invoice would be on page the subscription would would change to um past you so now your system has to react somehow right depending on what you'd like to do maybe notify the customer in some custom way or maybe restrict access to a certain system that they had access to before so it does have implications in the end as well on your you know on your business logic so in that subscriptions will be ultimately like a more involved um kind of a payment system um but yeah so there's kind of those parts of the puzzle in a way yeah and when people decide they want to start using stripe to sell dog walking or coffee or whatever they're selling um what kind of support can they get from stripe um because i imagine some people are feeling a bit overwhelmed with how to set up are they on their own or yeah is anything available no um quite the opposite um so uh well first of all like our docs are you know we always strive to make sure that our docs are self-serve right so you know you should be able to dive into the docs and find you know what you're looking for like with an end-to-end integration but it doesn't stop there so you can also write to support.strike.com um and those um and we have you know a complete a scaled uh support system um for for helping users to like um design their payment system to get set up um you know everything to you know regulatory uh advice for or rather advice about um you know how to design i suppose my mind goes to connect for that one for some reason where for example um you know we can advise or our sports folks can advise on um the right way to you know move money around the world right because there are regulations around that um also we have my old team solutions engineering they are you know they would be able to answer um the most technical uh questions by email so that's kind of like one channel there's also stripe dev on twitter any anybody can reach out directly to me or any of our teammates um on stripe dev um i will help you directly um on dm with your integration or you can jump into our discord channel which is also is really a scaled um technical support solution where there's a ton of um stripe engineers um in there helping people live their integrations so yeah there's loads of options um to reach out for help so it's yeah i i did definitely definitely don't hesitate to to ask that's where those are those links there uh for yes that's our developer chat i will direct you yes thank you that will direct us directly into into discord for sure perfect and there is the twitter there and cj has very helpfully typed up the email support stripe.com so you will not be alone yeah absolutely no you're definitely not we're here for you yes dave says he doesn't understand what strike costs to use yeah oh okay so um i don't know if i have the like a really full answer to that question either that's one you absolutely can write to support at stripe.com for and then when you describe all of the different types of features you would like to use and what way you're using them and all that kind of stuff they will they will definitely be able to help you there hmm yeah good to know so i guess it would be different for every kind of situation so yes there can be differences for sure but but there's there's um you know there are experts at supporters.com that can help with that yeah that is lovely um one question i do have which um we might have already kind of seen the answer to um are there any common pitfalls to setting up a payment system so do when you're on the support end of things do you get a lot of the same kind of questions which you could maybe mention here and prevent people falling into that trap that's a great question um i think yeah i think probably uh from experience um at least from my time i think one of the the most common pitfalls is um the asynchronicity of things these days um and especially with payments i think when when stripe started out you know um um enabling you know payments it was it was a fairly synchronous affair where you would create a charge for a card um you know that would go to the network they would say yes no and then you would know immediately whether you know that payment failed or succeeded whereas now we have like a really asynchronous um world where for example i might create a separate debit um and i might not know about that for up to you know 10 days so my system has to be able to like be able to listen out for events like that the event being saba debit you know worked or didn't work um and be able to react accordingly you know days later so i think that's kind of something that needs yeah it kind of needs a little bit of getting used to when wrapping your mind around um but yeah so i think there's this kind of that that would be probably a pretty not a pitfall but like that's a challenge it can be challenging um yeah and also remember to keep your keys straight when you're doing demos i have had the exact same problem in my developer career with these keys so do not honestly like that's a really common common uh thing that i i used to answer on tsc is like okay make sure your keys are straight make sure if you're using two accounts that you're not mixing up your keys but somehow i managed to do it as well that just goes to show it can happen to the pros one question from kathleen is is there a way that the person making the payment can pay the transaction fee um like there's no technical way kind of there's no api centric way to say that you know the fee falls um you know the fee is is is the uh the responsibility of the person paying but but what you can do is you can build that into your business model and say well you know you'd like to cover your fees um you know by virtue of the fact that your your products might be a tiny bit more expensive or something like that um yeah there's no api or technical answer to that question but that's more of kind of a business decision i think yeah so that makes sense dave says and the integrated auction it's 1.4 percent of transaction plus 20p yes wonderful um when i was talking to you earlier uh matthew you mentioned that stripe kind of takes care of the fraud and compliance side of things yeah it does a lot it does a lot um yeah and i did a bit of i did a bit of kind of thinking and and reading around um just to kind of refresh my memory and um there's a lot a lot of of um writing on stripe.com and in our guides about uh fraud prevention and you know and the things that you can do and probably the main thing to know when you're when you're getting started with stripe is that um there is a you know a part a product called radar and radar is like uh active for all stripe accounts um and radar is a i guess like radar is a machine learning system that analyzes like billions and billions of of data points um from around the stripe network um you know all over time and all the time and it and it attempts um and successfully uh identifies fraudulent transactions and so probably like being aware of how that's working for you and for your business is really important um compliance uh i think at least from from my experience and from a technical standpoint um we always we talk about pci compliance right that's probably the most talk you know kind of important um thing that we are you know or or aspect to compliance that we deal with um and i think that ultimately you know we would advise that you know using the integration guides well um using stripe elements our elements and stripe.js correctly that will um that will uh um you know minimize your stuff sorry that's me ahead that will minimize it that will definitely minimize um you know your pci burden because all of that all of that that is handled by stripe right so i think that's ultimately kind of the takeaway when thinking about pci compliance and integration integrating with stripe um and there are maybe to go back fraud part there are things that you can do as a user um for example we advise to collect as much information about your customers as possible when you're passing transaction data to stripe because with that data you know we and the banks um are the you know financial institutions are able to much more um effectively detect something that might be a little bit um potentially fraudulent um and also things like you know including stripe.js on all of your pages when you integrate that's uh we also recommend doing that because stripe.js is able to actually um kind of monitor or not monitor the wrong word but to to help to detect fraudulent browsing patterns and things like that so there's a lot you can do um as well and there's tons of documentation um in on stripe.com and in their guides about about combating fraud excellent yeah so good to know that the info is out there well i can't believe we have already come up to the end of the hour integration systems that was extremely interesting i now feel that i know at least something about this topic well when people ask me yes if you enjoyed this type of tutorial um which i suppose we have done it a bit with michael but uh generally we have more kind of interview uh live streams on a wednesday if you like this tutorial type of approach let me know i'll try to arrange some more dave says lots of very useful information thank you yeah that's great and what i was trying to prepare earlier uh was yes um yeah hit this button here i've already done it to uh find out about all our upcoming live streams yes and hopefully join us on friday michael here he is pumpkin and i will be calling an api yes same time nice nice well actually a different link so um do join us and let me know if you like this by hitting like and subscribe yes well thank you ever so much for coming matthew thank you thanks for having me information yes thanks everyone bye [Music] [Applause]

Channel: Scrimba

Views: 1,083

Rating: 5 out of 5

Keywords: web development, coding, learning to code, coding tutorial, learn web development, web development tutorial, front end developer, frontend, learn coding, web dev, software development, payment intergration, payment gateway, credit card processing, stripe integration, stripe, stripe payment, stripe checkout, stripe tutorial, stripe payments, stripe checkout tutorial, payment processing, setup payments on site, paypal, stripe payment gateway, accept payments with stripe

Id: MfFt56oq0aI

Length: 62min 58sec (3778 seconds)

Published: Wed Sep 29 2021