Video details

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

React Native
10.20.2021
English

This talk was presented during the React Native EU 2021 - the largest community conference in the world focused exclusively on React Native.
Abstract: Stripe enables developers to securely process payments online around the world. With cross platform frameworks such as Flutter and React Native, it can pose a challenge to provide a delightful developer experience while ensuring customer payment details are handled securely.
In this talk and demo we will explore several use cases for how to integrate payments with React Native and provide a great developer experience that’s secure and optimized for mobile purchases. In addition, we’ll cover how strong developer demand and open source contributions led to the launch of Stripe’s React Native library.
About the speaker: Thor (@thorwebdev) is a Developer Advocate at Stripe working to make processing payments seamless and help grow the GDP of the internet. In addition, Thor is an active contributor for several open source projects. Based in sunny Singapore, Thor serves as an active mentor and technical advisor to several developer-focused startups.
Twitter: https://twitter.com/thorwebdev GitHub: https://github.com/thorsten-stripe

Transcript

This conference is brought to you by Coltstack, 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 News. Reactnativeu 21. The great thing is when you have the slides, all the visuals, you can click on them and find the relevant docs or coatsnevits. 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, 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 car details. It has support for Apple Pay and Google Pay, and you can also add saving car 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 shortlift thermal 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 Affirmal 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 twelve simulator. Now my Expo app is just a simple type script 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 Reacts native library, and so to do that, let's use Exponestal. Please make sure to use Exponestal 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, it now finds the version that is supported for our Expo SDK version. So in SDK 42, we use the React native library. And so now that is installed. So let's import this and we can import from our at 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 you stripe. And since we're using TypeScript here, we can get all the type definitions and all the functions. So we need 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 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. Basically, you want to create your payment intent when the last step of the checkout, when you know the total amount and all those details. So here for convenience, we're just going to do that in our use effects when our single step view here is loaded. And then we're just going to create an async because it's an async method. We need to create a new one here. So we'll just create an Inlet function. First of all, we'll set our Loading to true so we can disable our button while we're Loading our details here. And then we're getting our details from our fetch payment sheet, fetch payment sheet params. And so this is our payments and client secret, our customer thermal key secret as well as our customer ID. Here we are. So we're fetching those from the back end, and then we are initializing our payment sheet. So let's do that. And we can say in it payment sheet. And there's a couple of things we need to provide. First of all, is the customer ID. And so that's our customer from above. Then we will need the customer thermal key secret. 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 falls. We provide a merchant display name. So let's just say React Nativeu 20. And then 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 init our payment sheet and in the payment sheet, we have 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, we say if error, we will just for now console lock the error, see what's going on. Okay. So now we have our init method set up to init our payment sheet. And so lastly, we'll just need to call this in. It fabulous. So now we've got that set up. And then in the next step, we'll want a start checkout method. So we'll say start check out. So that's when our customer hits the checkout button. So it's an async method that we need again and 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 message. So let's say first thing is our error code. We'll just put in the error code and we can see that there is a bunch of things that might be available on the error to inspect. So we'll save the code and then we'll just output the error. 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 want to disable the button if 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. Actually, we can say while we're Loading, we'll just set text to Loading. And otherwise we'll say check out. Great. And so now we're Loading. And now it says check out, and then we'll need an on press, and that is just our start check out. Okay. So now that we've got our parameters loaded, we can hit the check out 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 Trustee 4242 card number here and we'll provide our billing details. And then here is the checkbox because we've provided the customer ID and the thermal key, so we can save this card for future payments with recognizer for you. Let's do that. Let's save that card and we're processing. And yeah, the payment was confirmed successfully. Great. So now let's actually go ahead and have a look at this on 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 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 stores 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, 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. You will see actually the original I made, but my fabulous colleague Chris Troganas has made this great visual 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 the Native Unification coach, or Glue coach that is entailed within our Stripe React 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 communication 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 card form, our Apple and Google Pay buttons, all of those components. And then the icing on the cake, we have our hooks for convenience. And so now let's have a quick look at what I had drawn up. Definitely not as tasty, but yeah, here to recap. So the foundation layer are Native Mobile SDKs. Then we have our Native unification code and our 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 Stripe's Native Mobile SDKs? 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 as strong customer authentication. And so with these native Stripe SDK. So Stripe's 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 two authentication standard, which is actually very difficult to achieve in a nonnative 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 React Native Native modules 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 objective C Identifiers to make sure everything is exposed to the objective C runtime. And then we have our Stripesdk M. So our implementation, which actually then exports the module, the Stripesdk module very similar on Android. We are implementing our React module with implementing the Reactant Space Java module, and it's called Stripe SDK, and then our 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 have written it in Swift, and then we have the implementation. Now, 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 component. 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 cut 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 on the cake, as I mentioned. So hooks for convenience. Really, they are just there for convenience. So if you have an order React application that you're maybe migrating over. You can import all of the methods that you need as top level import. So we're exporting all functions 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 also exposes a Loading state variable, and so you don't have to 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 SDK. And so we're happy to say that since Expo SDK 42 and what a fantastic coincidence. 42 great number. So the strike 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 install the corresponding version for your Expo SDK, and then even another icing on the cake we have is the Config plug in with Expo. So that gives you a simplified set up, especially for Apple Pay and Google Pay, where you have to have permissions and configure things. And so by utilizing the config plugin, we'll 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 the major contributions to this SDK. We had the SDK in a private beta for a while and we really had some members from the community provide feedback and write up issues. And that really helped us to make sure we are providing a good developer experience. So 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 that's it from me. Thanks so much for tuning in. If you have any questions, any feedback issues on the library, please do go to our open source project on GitHub and file the relevant issue there. You can also reach us on Twitter. Stripedaff you will always find someone to answer your questions or you can also find me at Thorwebdef. Thanks so much for tuning in and see you on the interwebs.