Payment Element

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] so [Music] [Music] do [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] hello and welcome back to uh stripe developer office hours i'm cj and i'm joined again today by charles watkins we are on the developer advocacy team here at stripe and we've got a really action-packed episode for you this time around we're going to be talking about the brand new payment element uh which we can we'll share the landing page here is just such a beautiful beautiful way to integrate with stripe but first before we get into the payment element we wanted to share some developer updates with you so we're going to go over just a quick quick round of dev updates for the month of october so in the month of october we released a an episode of the search api beta where we're talking about all the different ways that you can integrate with the search api you can head over to the youtube channel and check that out we are still accepting beta users for the search api and would love your feedback for that we also launched a brand new integration builder for working with stripe billing so that is now available you can go head over and check that out in the stripe documentation for strength payment links that allow you to create payment links with no code directly through the dashboard we launched the ability to collect tax automatically so you can just come in here toggle a switch and then start collecting tax which is pretty exciting and that goes along with the stripe tax product we released the ability to collect phone numbers with checkout there's actually a ton of a ton of new features with checkout you can also do subscription upsells with checkout we're handling decimal amounts for pricing there's also some new changes coming for platform controls for standard accounts for connect so if if you're working with a connect platform you'll want to head over and read up on some of the details for what's changing with connect we also launched a brand new terminal reader for users in u.s and canada it looks like there might be even wider availability here for the the wise pause e countertop reader for stripe terminal really exciting stuff link with stripe is also out and available for i believe this is for uh beta testing is that right charles yeah it is um yeah awesome i think we've got we've got an email address if you're interested in playing with link with stripe you can reach out to this email address and we'll share it in the the dev chat here um and this is sort of like the old remember me feature that we had with the previous version of like the modal checkout this is going to be the brand new version link with stripe so if you're interested in beta testing that let us know we'll let you know the email address to send that to we also launched some videos showing how to integrate stripe tax with checkout the on.net show we did a collaboration with where you can learn how to process payments using c sharp and stripe there's also a big conference coming up called the big transaction this is november 4th and 5th all about payments so if you're interested in payments i know that they are currently releasing a couple more tickets so you can head over and check out the big transaction so that wraps up our updates for today um charles has a really exciting demo for us uh charles you um you want to share your screen and then we'll uh we'll get into it here yeah absolutely awesome let's go ahead let's do it so if you have been integrating stripe for a while you know that um in addition to in addition to just like integrating cards you also want to integrate other payment methods this is especially true if you are serving any types of customers outside of the united states right and so yesterday we launched the payment element which is like one element to rule them all it's the one element that you can use to integrate 18 plus payment methods now what i have here is a really uh really simple glitch which just shows how the payment element what it looks like how it works so you'll see here that we have this payment element it's uh enabled for cards google pay because i'm on chrome and actually have google pay on this browser uh sepa debit as well as eps now what makes the payment element super cool is that it allows you to integrate all these payment methods without a lot of code now if you were going to integrate 18 payment methods that could have been hundreds and hundreds of lines of code but with the payment element adding adding additional payment methods is super simple as a matter of fact let me let me show you very quickly like what it looks like so this is what we have this is what we're going to build let me just show you quickly like if we wanted to add say uh zero pay to this payment element what it would look like so i'm on glitch i'm going to hop into my code here i have a server.js file here to run it fastified it's very similar to express express server so right now i got cards i have a sepa debit i can add in say euro pay eps and you'll see here that it's uh restart my server here if i go back do a quick refresh actually let me refresh from the bottom of the site you'll see i got card google pay sub a debit jiro pay and as well as eps so you can see it's like super simple to add payment methods uh modify your code with really really small changes and open up entire new audiences in terms of like people being able to pay with the payment method that they actually want to pay with right so amazing that's so it's so wild that you can just make that one change and add a single word and then uh immediately you're unlocking an entire audience where you can yeah now you can sell to anyone who wants to pay with eps and all you had to write was eps as like a string value in that array that's pretty incredible it's it's pretty sweet actually let's let's give it a whirl let's see see how it works so i'm just going to type in uh the 4242 token here so that is a test card um yes if you type in 4242 it's going to succeed so i'll go ahead and click pay here and it will redirect me upon completion and you'll see here like when it when it uh actually succeeds we have a nice little message here we're actually pulling in some of the information from the payment that we just made from the redirect so we can see that the payments statuses succeeded and this payment was for 20 euro so we see uh 2000 here because of course uh amounts are in uh since the smallest the smallest unit available so um now that we see what we had let's let's like rebuild the sucker let's do it yeah that sounds great okay should we share the glitch if if folks want to follow along oh yeah i can drop that yeah i can drop that in the the comments if 100 it's uh payment hyphen office hyphen hours dot glitch dot me awesome and cj's going to drop it in the chat there we go all right cool so let's get rid of some of this code here so uh the majority of the code we saw was just in here in terms of what's on the front end so we'll just delete that okay we've also got a question here from himanth also thanks a month for all your engagement we appreciate all the comments on all the youtube channels you've got some really excellent questions so thanks for uh reaching out this is the first one that comes in um where he asks does the payment element support ach if my account origin is in the uk or great and is uh in uh um accepting the currency gbp and that i think as of right now it uh is something that we're absolutely keen to add but ach is not one of the payment methods that we're releasing with is that right charles that's right we don't have ach today but it's definitely something we hope to add in the future so yeah stay tuned um in the on twitter at stripe dev we'll absolutely be ready and excited to announce when ach is available there are 18 payment methods out of the gate but there are several that we are really excited to uh to fast follow with so ach is absolutely one of those 100 so i have just erased the majority of my code here but i'm going to show you what with i'm start what i'm starting with so i have a really really basic setup here on glitch it's fastfi server we are we do have stripe as a dependency we're pulling in our secret key um if you are following along you'll want to add in your secret key and your publishable key um in the dot m file right so if you go down here you'll want to add in these uh your your secret key and your public key the project domain uh is isn't isn't as important but you'll definitely want to add those in so you know take a moment go to your dashboard grab your keys if you're following along drop them in your m file yeah and i think you can remix you can remix this glitch so you can play around with it on your own if you'd like yeah yeah and then when you remix you'll have to add those keys um yeah absolutely and how how do you remix i forget i think it's right here so if you click right there you'll be able to just click remix and you can uh it'll start you off all the same code but the dot m file will you know be empty so you can remix and follow along that way good call out cj appreciate it man all right so what do we have so far really basic server um really basic setup we're just um rendering a page with some really basic information here some parameters to control how uh what shows up in the page uh let's see what else we have this uh we have this endpoint so that we can get our publishable key you're going to see this in pretty much every stripe integration that uses elements so that's that's fairly straightforward and uh then we have our just our our basic page here so let's take a look at what it looks like right now so i'm gonna go ahead i'll refresh let's just make sure that we actually did get rid of everything okay so let's go ahead and fill this in we have uh the test tokens that we want we we have our button we have our console where we'll log some messages just to see errors and and states of objects as we create them like the payment incent um so what do you think cj are we ready i think we're ready yeah let's do it okay let's do it so to start let's do the one thing that we're going to need to do in our server.js file which is we're going to need to create a payment intent so let's just go ahead and make a endpoint here it's going to be post and let's call it create payment intent this will be async we'll get a request we'll get a reply all right so we will want to get so we'll want to in order to render the payment element you'll need a client secret from a payment intent so let's go ahead and we'll start by creating this payment incentive so we'll say payment incent and this is a little bit different than the way that it worked before with just stripe elements so the big change as we move from the old card element or the old individual stripe elements to this new payment element is that we need the payment intent upfront we need the payment intent to be created before we ever create the payment element so what charles is doing now is using the stripe api to create a brand new payment intent and that payment intent the way that it's configured will uh inform how the payment element is ultimately rendered right that's totally totally correct um because the payment yeah you're absolutely right because the the payment element is essentially going to take that client secret it's going to be like oh what are the payment method types that i am supposed to be configured to like render um and then it'll render accordingly right so right see that's what it looks like i might actually have to check the box on this one that looks good bye uh send and we're just going to send the client secret right in here all right so that should be our uh that should be all we need do we need to pass any payment method types or is that going to work by default so if you don't pay if you don't pass in any payment method types it will just assume that the only payment method type you're passing is cart um but we should pass it in let's pass it in okay cool so in general you're always going to see in examples that uh you you pass it in you pass in uh something but you can't technically pass in nothing and it should work great okay so we have our uh yeah we have our payment incentive here so fantastic for next step let's get started with the real work here so to start we want to we want to obviously use stripe.js and we actually have the tag here so let's see so we have the tag so we're good there so what we'll want to do once we have this dom content loaded event the first thing we're going to want to do is to get our publishable key to start so let's do that oh key and it's going to be we're just going to affect it from our back end and i believe that was called config and once we have our response let's see here we want to turn it into json because it's going to return um going to return some json with us with this publishable key we can just do that pull it out structure it i always feel like i say i'm saying that saying that wrong i don't know what no that's good that's good yeah okay and then the next thing we want to do is we just want to initialize stripe so we can do that by just calling strike and then passing in the publishable key okay so and i'll just add in some comments here all right so that's a good place to start great so as a next step we will want to i guess our get our client secret now my reflex is to like start trying to create like trying to trying to create the element like you said earlier you definitely need to have the client secret to even be able to create the element in the first place so let's do that yeah so in the past you might have thought like okay the next step is let's let's create the stripe elements and then mount those to the page because previously you didn't actually need the payment intent up front but now because you need that client secret from the payment intent the next step here is going to be that we actually want to like create the payment intent on the server and then use its client secret as part of this new element's initialization that's right that's absolutely right in this case it's going to be a post cool uh let's see uh we need some it's headers right it's not yep header uh content type here is going to be application uh i can find my key here json that's the one and the body um we're not going to pass in anything um you might pass in something like a currency you wouldn't pass in the amount but you you could potentially pass something in here so we'll we'll have a body but we're not going to pass anything in now once we uh get our response we're going to do the same thing we did above which is we're going to take the response again in json we're going to grab the client secret all right so now we can um create payment element and mount it right that's right all right so the first thing we want to do is instantiate elements and we can do that by calling stripe elements and here is where we would want to pass in the client secret like we pass in the client secret as well as some other options like we wanted to customize what the payment element looks like because in addition to being able to like add in all these different payment methods you can also um you can also change this change its appearance so that it matches the look and feel of your your uh your website and we'll do that a little bit later now let's just pass in the client secret and once we have elements we can instantiate a payment element so let's say the payment element equal to elements um dot create i think that's right um let's see yeah that looks good to me okay we're we're going to see really really soon um and then finally we want to mount it and i believe it's going to it's called payment element that's the empty div we have there okay so that's like the css selector for the div um in your html that you're going to mount it into yeah so let me let me just go ahead and find that one let's let's make sure okay yeah this is also the same or like a similar pattern to what we had before with the old elements right where you can just say mount and you give it a css selector it mounts it into that div yep and this is the div we want to mount it to you're right like a large amount of it is very very similar like if you had a setup already um you'd really only be changing around kind of the order of some things right um so if you've used say the card element before instead of say passing in the client secret when you're trying to confirm the card payment in this case you just pass in the client secret when you're trying to create the element so it's very similar the patterns are strikingly similar so let's uh let's see if this is working i'm just going to go here i'm going to uh oh goodness am i getting a live stream hug of death oh too many too many requests try again later we're getting uh yeah ddos tom for for the practice oh man i did not anticipate this like i gotta i don't think i've ever seen that yeah should we fork it and then like create a separate glitch or something i don't know like think we might have to okay yeah um while you're working on that mario had a question here that i can we can jump in and answer so mario asked does it integrate with stripe tax and uh so stripe tax out of the box integrates right now with strive checkout integrates with stripe billing if you want to use it directly with a payment intent that is not necessarily supported today but it's definitely something that we would love to add i'm not actually sure charles do you have a sense of whether that's going to be supported as part of the the payment element itself i don't know i'd have to i'm not sure we'll have to uh follow up on that one in a future stream but don't know off the top of my head okay awesome yeah it seems like we might need to actually boost that glitch so yeah as you're okay so as you're working on it yeah why don't we um we can break that out um very cool awesome the uh i guess like another thing that we can do here is pull up the docks we have these brand new really beautiful integration builder docs that you can follow along for building the building with the payment element so um right here we're working with node.js you can pick different front ends different platforms so if you're working with ios or android there's a new payment sheet that is also available that is very similar to the payment element so you might want to go check those out but as part of this integration builder here this is a really neat a really neat way to experience some documentation so you can sort of scroll through and see the code that you need on the right while also seeing the pros that are the related documentation on the left here um and so out of the box you can already see that there's tons of different payment method types as just sort of a sneak preview we recognize that it's challenging to know which payment method types you should actually add here so there's going to be an easier way to do this very soon so stay tuned for that um but yeah obviously we would we would love to automatically sort of populate this for you so as we're going through this uh as we're going through the integration builder these are the steps that charles has already completed so he's already added the uh the script tag here at the top we've already got a payment element on our form we've initialized stripe.js with our publishable key that we fetched from the server and at this point what we're doing now is uh we've actually yeah so we've already created the payment intent on the server and we got back the client secret and we've initialized stripe elements we'll come back and talk about this appearance thing in just a bit but um at this point we don't actually have appearance we're just passing in the client secret and we're mounting the payment element on the page um and yeah so why don't i pause there because i think that's where you're at charles and then are you at a spot where you could reshare yeah absolutely okay so let me go ahead and reshare next time we're definitely going to have to boost up not a bad problem though i'll take it no yeah okay i'll take it okay cool so um made some small changes here um go ahead here okay so we have our payment intent on server.js we have got our publishable key we initialize stripe um we're getting our payment intent client secret we're initializing uh we're we're setting up elements we're creating a payment element and then we are mounting it to this payment element uh div that's where we were and right before we got the hug of death we wanted to see what it looked like and here is where we are so in this case passed in cards cards is both cards as well as any digital wallets that may be on the browser so now we have the card and we have google pay right awesome sweet it's so cool that that comes just right out of the box it does you know we're excited to add google pay apple pay support so that's amazing it is it is really it is super cool um so here we are we we have our element we're we're in a good spot um but we haven't added any uh event listeners to this button or this form so uh if you click on pay it doesn't really do anything um as a matter of fact it's currently disabled so let's fix that okay so the next thing that we are going to want to do is let's see well the first thing we'll probably want to do is initialize get the button to actually work so like let's see um all of the elements have like these um events that you can listen to so i think what we could do is when there's a change uh let's see here actually probably need to see when there's a change you uh get an event and uh let's see here what you could do is if the uh event is uh complete you could let's see i think we have a helper function in here to just like activate the button so let's see uh yeah it's called enable button so we'll enable the button and that'll just allow us to uh actually use the button the next thing we're going to want to do is to just uh get the button so in order to do that we can get the button i believe we could do uh document dot query selector button we should do it do the trick then add event listener we'll be listening for click on the button and let's see here uh hmm first we'll want to prevent the default behavior and uh let's see what else we probably want to stop people from clicking the button again so let's see here we can set the button state to button state processing and this is just like a little helper library that we have there so we'll set it to button state processing that will disable the button and um let's see we already have our client secret so the only thing we need to do is to actually attempt to complete the transaction now in order to do that it's really similar to any of the other elements that you've used essentially what you're going to do is you are going to call um see wait uh let's see stripe dot confirm payment not confirm card payment or anything like that just confirm payment and uh let's see here you'll pass in elements as well as some confirm params now within confirmed params there's this return url the return url is important because um the element has a redirect base flow there are a lot of payment methods that have a redirect base flow and so to consolidate all the possible paths the payment element automatically redirects now in our case we don't have like a thank you page or anything so we'll just redirect back to this page and when the redirect happens uh it's not just going to redirect us back to this page it's going to redirect us back to this page with some parameters on our url and it'll include like the payment intent id as well as the payment intent uh client secret and that is useful because if you have the client secret you can grab the payment intents uh some information about the payment intent from the client side like whether or not it was completed and we'll get into that a little bit more later but it's it's important to know that you you do need this return url let's see here we're going to uh try to confirm the payment and we'll ideally will get a payment intent in our response otherwise we'll get an error so let's just grab those two things and let's see i think if we have an error uh we can add a message to errors message otherwise we can add a message to like our page there to show the payment intent dot status even maybe say something cool like uh status all right okay so let's see here um walk through this one more time ah this is an async okay so when someone clicks on the button we're gonna we're gonna prevent the default behavior we're going to set the button state to processing um we're gonna either get a payment intent or an error um the return url is going to be this return ura here um and then we're gonna just pass in elements so let's give it a shot let's add in some more um add in another message it also looks like we lost a a curly on 157 right after error there too let's let's take a look here where uh sorry oh yeah yeah yeah there we go cool yeah makes me miss vs code okay just a little bit just a little bit um okay let's uh let's give it a shot okay you add a message to um submitting payment all right looking good so far looking good so far let's type in our 4242 can anyone on the stream give me a guess as to why it's four two four two is the one that uh gets you gets you a successful payment just curious yeah yeah what are the guesses fun answers only all right so it works we we have our payment element we're we're all good for cards if you nice type in 4242 um you get the payment if we were to try and do like this 3ds card we get the 3ds flow okay it's pretty pretty great this means you don't have to do anything special to launch this in regions where uh secure customer authentication is is in effect it just it just straight up works right so very cool there it is nice i also noticed that in the query string parameter there you have um yeah you have the the id for the payment intent the client secret for the payment intent so if you wanted to um client-side you could re-retrieve the payment intent and show some sort of like success message right yeah totally and as a matter of fact let's do that as our next step right okay so also before you well before you go too far too could we could we talk about that on change real quick yeah is that strictly required or is this sort of like a best practice that we would recommend yeah it's it's not strictly required i do it is a best practice like the the most the reason that i said it in in in this particular example is that in this example it starts with the button being disabled and that's generally a best practice you don't really want to allow people to be able to just like hammer the button while the form is incomplete and so the payment element has events you can listen essentially listen to these events whenever there's a change you'll get a kind of like a an object that includes a variety of different um a variety of like different uh fields one of those fields is whether or not uh the payment element itself is complete and so if you you can essentially use this to manage the state of your button okay okay so that complete is like someone actually filled out all of the fields yep got it so yeah so so for for cards we know that there's like the card number the cbc expiry etc but for maybe for another uh another payment method type maybe can we throw in some other payment method types and and see how those might um change sort of the the list of events too yeah let's let's take a look um element is uh filled out i'll just say fill it out here okay cool and let's just add in a let's say another let's add in another payment method type that's okay that's a really good idea so we have cards set up let's just add in say um go ahead and separate debit okay do that now we add in separate debit and do a refresh here there we go okay great and then like once you fill in the those test card numbers for step of debit then we expect that the console is going to log out that um it's filled out right yeah that's the expectation okay let's see oh wow okay so yeah so as you're typing the address it automatically starts showing the other fields yes that's one of the really cool things about the payment element is that it's a complete element so to the extent that you need to add you need to get all this information that you need to show this uh information here um it's all inside of the element so you just don't need to worry about you know any of it really got it yeah so sometimes there's like specific legal text that you're required to show on the page and so that is actually shown as part of the the payment element okay awesome and then we see payment element is filled out great yeah that's definitely handy for only enabling the button once they've completed it that's that's uh feels like a good best practice it is it's pretty it's pretty cool um we'd also want to listen to you know the event of like as you're like switching between these elements right like it might not be filled out so you'd also want to like um you'd also want to listen to whether or not it's not filled out right so okay but let's see um what else can we do here so we we essentially have it set up i think you mentioned um we could grab the status of the payment grab the status of the most recent payment that you've been redirected from right so sure i mean i think people might also want to know about the appearance api since this is sort of like a brand new concept so could we talk maybe just about themes and kind of like the basics yeah the appearance api okay totally totally cool so um like cj said the payment element uh is customizable it has this uh appearance that you can pass in when you're actually creating elements um let's see here it has all of the different it has like cs css like selectors you're essentially able to um you're essentially able to make the payment element match the look and style the look and style and feel of your website so if we go look at our element right now this is just like the baseline one but we could change this to look quite different so let's see here uh i am far from a a master of css so i am going to grab uh i'm gonna grab this here awesome so yeah if if you've been following on social we've shared like a ton of really hilarious uh payment element implementations there's a windows 95 one floating around and all of those that you can see on on the elements the payment element landing page on stripe.com are just like these really incredible beautiful elements so they are all things that you can totally create yourself with several different um levels of granularity i think the smallest is by just passing in a theme right yeah you can pass in a theme uh let's see here i think there are a few i don't know i'm off hand though i'd probably need to grab the docs let me uh stop sharing really quickly okay yeah i just i also just dropped a link to the appearance api docs into the chat so if you're following along at home you can take a look at that the theme the theme that you might be most familiar with is the stripe theme which is what you would get out of the box today if you were to build your own custom payment flow using stripe elements with separate card elements but there's also a dark mode theme and i believe there is a none theme and so the none theme here is like meant to be um the the theme that is sort of like the reset so if you wanted to really control the entire look and feel then you might use the theme that says none as like a reset so that it um it does not apply any css and then you can use your own css variables and then even more specifically you can apply css rules so these rules apply sort of just directly to the css classes that are used inside of the payment element itself um so i'm going to hand this back to charles yeah absolutely yeah the appearance api is really powerful and it's really meant to to extend the ability to style it so that you can match whatever your brand settings are um really really closely because we absolutely understand that this is more than just sort of an input control it's definitely a little bit bigger takes up more of your checkout flow and so you should have absolutely have the the controls that you need to style that thing yep totally all right so let's see here i think my snippet here is broken but let's figure out how to use themes shall we um yeah let's see here just a moment also we've got another appearance api dock here okay so on the i think under stripe elements on the left yeah customize the appearance appearance api there yeah let's take a look i actually haven't spent a ton of time using the appearance api so yeah this is all brand new stuff so absolutely go check out the docs and like play around with it for sure we also got a question from mihai here will all these work with the payment checkout so um the payment checkout so stripe checkout is a stripe product that allows you to redirect to stripe and then stripe handles all of the hosting you have like the it uses the stripe domain um and users can go through that there the payment flow on stripe checkout that's kind of a that's a completely separate product from stripe elements here which allows you to build your own custom payment flow all of the payment methods that you would want as part of the payment element are available in stripe checkout so you can go enable those the same way that we're enabling the payment methods here as passing a string an array of strings as the payment method types on the payment intent you can do the same thing when you're creating a checkout session so hopefully i think that might have been your question the at stripe stripe.js is an npm package that wraps up the stripe.js library and gives you some tools for loading that onto the page when you're in a single page app so i hope that answers your question but yes the features uh should work with uh both the element or stripe checkout depending on what exactly you're you're reaching for so that said the appearance api is only for the payment element for stripe checkout you can control your brand settings in the dashboard but not uh um there's not as much granularity in terms of the appearance of stripe checkout so totally okay so we have our really our straightforward appearance here so in this case i'm passing in stripe and let's see i haven't used this uh use the api in this way nice okay looks great i think that might be the same as if you don't pass any appearance you know what you're right let's try something interesting let's go with bubble gum okay uh let's go with knight because the knights pretty straightforward theme yeah right i don't know why i expected the striped one to be [Music] nice cool so we have our themes here and like if you check the you check the docs here um it can get a lot more advanced than this see here they're passing in different variables and rules and all other good stuff so you can use the simple straightforward stripe theme the knight theme or you can go you can get really advanced and start using all the different options that are part of the appearance api so it is it is pretty cool so um that's that's that's more like that is the integration that is legitimately the payment element integration awesome 90 similar to the previous elements integration um you have a new appearance api you have the ability to essentially add in new payment methods super quickly by just just typing in uh adding to this array of payment method types yeah maybe we can add like ideal and like shiro pay zero pay p24 maybe yeah p24 24. let's see nice and now we have cards digital wallets sepay we have eps giropay p24 not definitely not going to say this i would 100 butcher that one eps and as long as the payment method you are adding is um in the correct currency it will show up um it will show up correctly okay show you what it looks like if you add the wrong one yeah what happens what happens if we try to to mix the currencies and then maybe what what approach would you take um if you were supporting a multi-multi-currency yeah totally so let's see here so if let's say you were you set the currency to usd and you added in cards which is supported but some of these presumably are only only you know you can only really accept those with um you can only really get those with uh euro you will get an error let's see here okay i thought i was uh adding it to this console here but perhaps not in case would that be on the server side when like when you try to create the payment intent yeah it would let me take a look let me see where let me go find it here so we can see what it looks like i guess the other thing to think about is that also now that you are required to create a payment intent upfront before you initialize the elements um that you might also start to see a bunch of incomplete payment intents in your dashboard that's totally okay and totally expected because every single time the page loads we're creating a payment intent so that we can mount that element so that's something to think think about a little bit um and yeah totally so it is a server-side error so what you would want to do in that case is uh rather than just uh getting the payment intent which you'd want to do instead is maybe you have something like a try catch here okay great i see we also got another question here um from mario will this update replace the old stripe elements so we're not gonna remove support for the old stripe elements um this is going to be sort of on the side or in addition to stripe elements but we do expect that most folks will want to integrate the payment element directly instead of the old individual elements the reason being is that by default you really just have this simple integration you create a payment intent you create the payment element and you can unlock lots of different payment method types for all of your users there's a lot of things that you can get from this like localization and will automatically sort of display the payment method types that we expect the customer to uh to want to use there's going to be a lot of optimizations for conversion coming to this over time so we do expect that most folks will want to use this payment element instead of the individual elements but they're not going away and you can absolutely still integrate individual elements if you'd like so yeah totally that's again for the question yeah absolutely i believe the majority all of the new updates the new features will go to the payment element but like you said you can definitely use the existing elements that being said the amount of work that's required to say integrate any individual element is the same as the payment element so it's um it's it's tough to think of a reason you know why you might want to do that but you totally you totally could right yeah if you were say if you currently had just a card integration where you were only accepting cards with the old card element i would definitely recommend creating your new integration with just the payment element out of the gate that way you can enable payment method types as you become you know comfortable with those or you're excited to add those for your customers so yeah absolutely um that's how i would do it too um the other thing that i was hoping we could look at is the ability to like um to hide certain fields can we take a look at that too um the ability to hide certain fields tell me more okay yeah so um in the um when we're configuring the element you can pass fields and you can specify that you want to never show certain fields so for instance let's say you're already collecting the email address or you're already collecting the address like the shipping address or the billing address for the customer if you want you can sort of suppress that field or you can hide that field in the element so i believe that's like another feature that folks might want if you already have sort of a payment flow that is collecting some of that information or if you already have some of that information in your database um that would definitely be something that you might be interested in and i'm gonna try to find the uh the api here for it let's see totally came out yesterday so we're learning together yeah um okay so all right so this is the um this is the api reference for the payment element and so when you create this element right when we're creating the element and we're passing in the type as payment here we can also pass in options so there's an optional second argument here with options one of them is the business if you pass business you definitely have to pass the name this is what's going to show when we're rendering that mandate text or that legal text that needs to show at the bottom of of the the payment element there we've also got the payment method order so if you wanted to you can specify exactly how you want the payment methods to be ordered you can also pass in these fields this fields argument so as part of the options object you can pass in the fields and say oh we've already actually collected the billing details so never show those or we have already collected the email address or the phone number so you can say never and by saying never that will hide the field from the payment element so you don't actually have to you don't actually have to pass or you you don't actually have to collect that information if you're already collecting it up front and this is this expects that you will pass it when you're confirming the payment so um definitely something to keep in mind there's also terms you can control how how the terms are being shown uh depending on which payment method so you might also want to show the terms in a different way so you can hide that and then show it using your own your own content so this is one of the tools that you have for hiding and showing specific fields and uh yeah please do let us know if you have any feedback about these features or others that are part of the payment element we absolutely want to want to uh continue to improve this and add any anything that you find you might find useful so oh that's super cool let's um i did not that that fields one is is super cool so essentially we could we could just pass in say uh inside of payment method order billing details name and then it will just never show yeah you could say never yeah to hide it if you've already collected it somewhere else so for instance if you have like if you have a stored in your database or you have it in another form field higher in the process then you could hide that so incredible awesome thank you all so much for coming we really appreciate it um as always if you have any feedback we're going to leave a feedback form it down in the description below please let us know if you have any feedback also we're available on discord at stripe.com go slash developer chat you can also reach out to us and stay tuned on twitter at stripe dev and subscribe to the youtube channel stripe developers where we release content just like this and also we have some tighter shorter tutorials and other videos that might be useful as you're building out your integration really appreciate your time and attention thanks so much for joining us today and thank you charles for the demo really appreciate it this is super exciting super exciting thank you cj yep and uh again like it hats off and a huge thanks to all the stripes that contributed this is an incredible uh really powerful tool so i'm really excited to see what all you users are going to build with it alright have a good one until next time see ya

Channel: Stripe Developers

Views: 2,189

Keywords:

Id: Vvxl9HFI0eQ

Length: 57min 5sec (3425 seconds)

Published: Thu Oct 21 2021