RNEU 2021: Thor Schaeff - "Show me the money" - securely accepting payments in React Native apps

this conference is brought to you by codestack react and react native development experts hello everyone my name is thor i'm a developer advocate at stripe and today i'm going to show you the money or at least how to securely accept payments in your react native apps now if you want to follow along in the slides you can find them at thor dot news slash react native eu the great thing is when you have the slides all the visuals you can click on them and find the relevant docs or code snippets now we recently shipped our official stripe react native sdk and before we take a look behind the scenes let's kick things off with a demo of our new mobile payment sheet uh implementing it into an expo app now the payment sheet is this overlay that comes up and takes care of everything related to payments for you so it securely collects card details it has support for apple pay and google pay and you can also add saving card details for future use so your customers can check out even faster now in order to enable this functionality we need a server-side component i've drawn that up here so if we want to store the details on our customer we need to retrieve our customer here in the demo we're just getting the latest customer from our list of course in your application do make sure that you retrieve the authenticated customer and store the details there next we will need to create a short lived informal key so this key is what we provide to our payment sheet so it can load the payment methods from our customer object as well as add new payment methods to it and then lastly we need a payment intent so this is our actual payment object that tracks things like the amount the currency and all those details and so this endpoint we have here on our server just returns our payment intent client secret to our expo app as well as our thermal key secret and then lastly the customer id for our authenticated customer so now i have this server running here locally on localhost and then i have an expo app just running here on the iphone 12 simulator now my expo app is just um a simple typescript expo template here with some react navigation and so here what we can see is our single step and so i've just added some text here for some test cards that we can use in our example i have some styles here and then i have a little fetch helper to fetch the details from our server that i just mentioned so the client secret the thermal key and our customer id okay so to get things started let's actually install our stripe react native library and so to do that let's use expo install please make sure to use expo install because that actually installs the corresponding version of the sdk that works with your expo sdk so we say expo install stripe stripe react native and then as you can see here uh it now finds the version that is supported for our expo sdk version so in sdk 42 we use the react stripe right native library r014 and so now that is installed so let's import this and we can import uh from ad stripe stripe react native and so we have a convenient hook here called use stripe that exports all our methods that we need and so let's go ahead and get our methods from use stripe and we can since we're using typescript here we can get all the type definitions and all the functions so we need the the payment sheet related ones so that's in a payment sheet and then present payment sheet so these are the two that we need and then we also have um a state variable here for our loading state okay so now let's go ahead and initialize our payment sheet and we're just going to do this on page load in your app uh basically you want to create your uh payment intent when uh kind of the last step of the checkout when you know the total amount and all um those details uh so here for convenience we're just going to do that in our use effect so when our single step view here is loaded and then we're just going to create an async so because it's an async method we need to create a new one here so we'll just create an init function first of all we'll set our loading to true so we can disable our button while we're loading our detects here and then we're getting our details from our fetch payment sheet fetch payment sheet params and so this is our um our payments and client secret our customer uh thermal key secret as well as our customer id um here we are so we're fetching those from from the back end and then we are initializing our payment sheet so let's do that and we can say so init payment sheet and there's a couple things we need to provide so first of all is the customer id and so that's our customer from above then we will need the customer thermal key secret uh so we have that above we need our payment intent client secret and then we can specify if we want a custom flow a custom flow allows us to separate out the selection of the payment method and the confirmation of the payment so let's just here say we'll want to do that all in one step so we'll say custom flow faults we provide a merchant display name so let's just say um react native eu 2021 and then we're also we want apple pay enabled so we'll say apple pay true here and if we say apple pay true we need to provide a couple more things we need to provide our merchant country code let's just set that to us for this example and then that should be it so with this we can now uh in it our payment sheet and in it uh the payment sheet we have um an error in case there is an error we can say first of all once that resolves we say set loading is false and then we just check if we have an error uh we say if error we will just for now um console lock the error see what's going on okay so now we have our uh init method set up to init our payment sheet and so lastly we'll just need to um call this image uh fabulous so now we've um got that set up and then in the next step we'll um want a start checkout method so we'll say start checkout so that's when um our customer hits the checkout button so it's an async method that we need again and we'll just we'll just say again set loading to true and now we can start our so the second step is to present our payment sheet and here we don't need to provide because we provided all the necessary parameters in our initialization above and again here we can get an error and let's say if we have an error then we want to alert with an error method uh message so let's say um first thing is our error code we'll just put in um the error dot code and we can see that there is a bunch of things that might be available on the error to inspect uh so we'll say the code and then we'll just output the error message but otherwise if we don't have an error we can say alert success and we can say the payment was confirmed successfully okay and so lastly we'll just need a button to start our checkout so let's add a simple button here maybe we'll want to want to disable the button if um we're loading so when we're loading the button is disabled and then we want to also give it a title and we'll just set the title to well actually we can say while we're loading we'll just set the text to loading and otherwise we'll say checkout great and so now we're loading and now it says checkout and then we'll need an on press and that is just our start checkout okay so now that we've got our parameters loaded we can hit the checkout button and we can see here we can use apple pay which then brings up the apple pay sheet and then the billing details are collected via apple pay but now let's actually use our trusty 4242 card number here and uh we'll provide our billing details and then here is the checkbox because we've provided the customer id and the informal key so we can save this card for future payments with um right native eu let's do that let's save that card and we're processing and yay the payment was confirmed successfully great so now let's actually go ahead and have a look at this on uh an android device so we're opening the android simulator here there we are let's go to our single step let's wait for the parameters to be loaded and we check out and now we can see that uh because we're using the same customer id we can see the payment method has been stored on the customer and now they just have to hit pay and they can also pay on android fabulous so now that we know how to process payments in our apps with stripe let's understand when we can use stripe because if you're selling digital products or services within your app so for example subscriptions or in-game currencies game levels access to premium content or unlocking a full version of the app then you must use the app store's in-app purchase apis please make sure that you understand for your use case so do check out i've linked the apple and google guidelines for you with more information but for other scenarios so for example if you're selling physical goods or physical services you can use this sdk to process payments via stripe great so now we know how and when we can use stripe so let's have a quick look behind the scenes and so here we have what i like to call the layer cake the layer cake that is the stripe react native sdk and now i'm not the artist behind this great visual um you will see actually the original i made but my uh fabulous colleague chris dragonas has made this uh great visual for for us so you can see the foundation the bottom layer of the cake are our stripe android and ios native sdks then on top of that we have what i call uh the native unification code or glue code that is entailed within our stripe native library and then we have the react native bridge and on top of that we have our native stripe sdk typescript module so that is what facilitates the community communication um between the native code and the javascript bridge so all of that happens in there and then our top layer we have our native ui component so our card field our cart form our apple and google pay buttons all of those components and then the icing on the cake we have our hooks uh for convenience and so now let's have a quick look at what i had drawn up um definitely not as tasty um but yeah here to recap so the foundation layer are our native mobile sdks then we have our native unification code uh and our um native stripe sdk typescript module that facilitates the communication over the native bridge so all of that put together is what we consider the native module and then on top of that we have some native ui components and our developer experience sugar the hooks the icing on the cake great so now let's actually dig into these layers so first of all why are we using stripes native mobile sdks you know you could say hey we're just collecting some data in our app and then sending that to an api what's the big fuzz but especially when you're dealing with credit card data there is a thing called pci compliance and in europe as well there's strong customer authentication and so with these native uh stripe sdks so stripes native mobile sdks the android and ios sdks are developed with all these considerations in mind and so by utilizing these as the foundation for our react native library we can make sure we give you the easiest way to pci compliance and strong customer authentication because the native mobile sdks implement everything in a secure manner and with the new 3d secure version 2 authentication standard which is actually very difficult to achieve in a non-native environment so that's why we're using our native mobile sdks as the foundation for our cake now let's dig into the native module so we're using our react natives native modules so um on ios we've written this in swift so here with the gray background and again as mentioned all these visuals are links so when you have the slides open you can click on it and you can get to the actual open source code for it and so we've implemented it in swift you can see here we have our at objective-c identifiers to make sure everything uh is exposed to the objective-c runtime and then we have our strive sdk.m so our implementation which actually then uh exports the module the stripe sdk module very similar on android we are implementing our react module with implementing the react context-based java module and it's called stripe sdk and then our uh stripe native sdk typescript module so we have all our types defined in there and then what we're doing is we're getting our stripe sdk module via the react native native modules and then we're just exporting it with typecasting so we can make sure we have the types available when you're developing in typescript and javascript for your code completion and all that convenience then next our native ui components so as i mentioned when you're collecting card details you really want to make sure you're doing that securely and you get the easiest way to prove your pci compliance and so that's why we're exposing these native ui components again on ios we are um written it in swift and then we have the implementation now uh the interesting thing with this is actually the native components handle all the card information and we don't actually expose the card information to the javascript bridge so all of that is handled on the native site we're really just storing a reference to our native ui components and then we are extracting the card information at that point and it goes directly from native component to the stripe api so that's really how we can ensure the security of this and then here you can see this is our card field component so we're utilizing require native component in our react native component implementation and lastly we have our developer experience sugar the icing s the k uh the icing on the cake as i mentioned so um hooks for convenience really they are just there for convenience so if you have an older react application that you are maybe migrating um to uh migrating over you can import all of the methods that you need uh as top level imports so we're exporting all functions that that you need as top level exports as well and so the hooks really give you a little bit more convenience so you can see here for example the use confirm payment hook uh also exposes a loading state variable and so you don't have to um do that yourself you can just use that loading variable to for example disable your button while the payment is being confirmed and so that's really just to give you a nicer developer experience now next you saw in the demo that their stripe direct native sdk works with expo and this was really important for us because expo is the easiest way to get started with react native and especially with the expo go client it's such a delightful experience and so we actually partnered up with the expo team to make this experience work with the stripe react native um sdk and so we're happy to say that since expo sdk 42 and you know what a fantastic coincidence 42 great number so the stripe react native sdk is available with expo and the expo go client and as mentioned it's important that you use expo install so that you ins install the corresponding version for your expo sdk and then even another icing on the cake we have um is the config plugin with expo so that gives you an a simplified setup especially for apple pay and google pay where you have to add permissions and configure things and so by utilizing the config plugin um would take care of that in the background and if you click on the big 42 here you can get to the expo blog post about the sdk 42 release and find some more information there and now i just want to take some time and really say a big thank you it takes a village and so a big thank you to the whole react native community and especially to call stack and expo for their major contributions to this sdk um we had the sdk in a private beta for a while and we really had some members from the community provide feedback and and write up issues and that really helped us to make sure we're providing a good developer experience so big big thank you to all of you we really appreciate it and we're super happy that we're able to develop this as an open source project okay now um that's it from me thanks so much for tuning in uh if you have any questions any feedback issues on the library please to go to our open source project on github and file the relevant issue there you can also reach us on twitter stripedf you will always find someone to answer your questions or you can also find me at thor web dev thanks so much for tuning in and see you on the interwebs

Channel: Callstack Engineers

Views: 235

Keywords: reactnative, reactnativeapps, reactjs, conference, talk, payments, developer, softwaredevelopment, coding, programming

Id: dafaQAeLIqM

Length: 24min 28sec (1468 seconds)

Published: Thu Oct 21 2021