Integrate payments in React Native (Stripe)

hello hello hello everybody today i'm going to show you how to integrate scribe into reg native app and stripe recently released a official regnated package by the team themselves and this package is quite neat and previously it was a little bit uh cumbersome at least in my opinion to integrate scribe a stripe even into your app but with this new package it has become a lot easier okay so on the screen right now you can see i have bootstrapped a new app and i have all this boilerplate in my app tsx file and i'm going to clear this out a little later but now i'm just going to do some initial steps and the first step is going to be to add the package so i'm going to do yarn add add stripe stripe reg native okay and since i'm going to be running the ios simulator and because i have a fresh new project here i need to do a few more steps to get it working the first step is to go into a into my pod file here and then set the minimum ios requirement here from 10 to 11 okay and the next step is going to be to open up xcode so to do that i'm going to open up the arrows folder here and double click on the workspace file right after i'm inside xcode i need to do two things and the first thing is to go to my project here on the left and then right click and then press add file and i'm just going to add a mt swift file here so i'm going to mark swift file press next and then press create here and then i'm going to say yes to create a bridging header here after that's done i need your last step and that is to click on my project here and then instead of the target here i'm going to press the project here then go into build settings and inside build settings i need to change the library search panels down here you can see currently it's pointing at some swift files and i just need to remove that and i can do that by pressing the minus here so all that's left is this inherited option okay after that i should be able to build the project so i'm actually just going to close xcode again and try to run it from the command line here oh and actually before i run this i need to make sure i do part install after doing port install i can try to run the simulator all right after the app has been built you should see the screen on the right and that means everything has been compiled and it's working and then now is the time for us to clear out this app file so we don't have all this boilerplate and yeah i'm going to use one of my snippets here to create an empty component and let's just call it app and since this is the root i'm just going to do an add default export so export default app all right and here i'm just going to put a save area view since i'm on ios i want to make sure everything is inside here all right now now is the time where we would like to leverage some of these stripe components and the first component that we're interested in is the provider so down here i can put in stripe provider and the strip provider takes a publishable key so this is your uh basically your public key either task your live key doesn't matter and then you can also put in the merchant identifier i'm just going to put in whatever here doesn't matter too much for this demo alright after you have this stripe provider which probably should be before the safe area view we can start to start to rent out a card component okay so below this app component i'm going to create a new one because we cannot put in a strike components when we're using provider in the same component we need to add it as a child so i'm going to create a component here and i'm just going to call it stripe test and i'm going to put it in the same file because you won't be putting too much in here and i think it was a better audio for you guys if i just put everything here okay so in here we are going to return a view and inside this view we're going to have a card field okay and this card field is a component from stripe reg native and this card field takes a few props i'm going to put in a little bit of styling here i'm going to put in height 500 or 50 even i'm going to put a width of 100 and uh i'm also going to pass in postal code enable just consider that one to false so we won't be picking up the postal codes on the checkout all right now that should be all for the card field i'm gonna also add in a button button that says pay now and it's complaining because i didn't have an unpress here so i'm going to pass in a function name here just going to call handle payment and that's going to be a function up here and for now i'm just going to leave it empty okay cool let's try to render it out so in my safe area view i'm going to put in stripe test here and if there's a cat oh i did it's called striped text i wanted to call stripe test okay cool so now we actually have the card component up here oh okay cool and we have our paint now button so that looks that looks quite okay now we need to do a few more things to get a payment running and one of them is we need to expose a confirmed payment method from stripe and for that we can use the use drive hook so this is a react hook coming from stripe library and this one has a bunch of things here creating a token [Music] checking if apple pay is supported and so on but the one we're interested in interested in is confirm payment so this one inside handle payment we can call it um but we do we are missing some some things here to actually do this so in the docs it looks like you can just call confirm payment like this but you actually need to add a backend component to your app before you can do it so that's kind of the next step of this so to create the most simple background you can imagine i will just define it inside this project in this folder i'm going to call it api and in this api folder i'm just going to jump into that and in here i'm going to call npm init i'm going to pass the y flag to get it up and running immediately and um in here i'm going to pull in some libraries that's going to make defining our api very smooth and also type save so in here i'm gonna call npm install typescript express types express stripe and nodemon and then ts node and you might think this is quite a bunch of libraries but we're already using typescript in our react native apps so we also want to use that for the backend of course and express is used for just defining apis very fast very easily and then we have node mod and ts node to restart our server whenever we make a change and last but not least stripe so we can do the stripe stuff on the backend so inside our api folder we can define an index tsts file and in here we can do all our backend related stuff and this code is going to be quite simple so uh should be good so the first thing you want to do is import express from express and then we want to import stripe from stripe okay with those two packages we can first of all initialize initialize stripe so here we can do a new stripe and then we can pass in our secret key secretly goes here and then it also takes a configuration object here one of them is the api version and i don't really know what the api version is so if i trigger a autocomplete here it would even say which one is the latest one so i'm just going to grab that one and i'm going to set typescript to true because i'm using typescript cool now next step is to call express this is going to bootstrap our api you could say and then i'm going to call an app i'm going to use the express json middleware and that is just to say that hey we're going to we want to create a json api next i'm going to create an endpoint and that's going to be post endpoint and this is the only endpoint i'm going to create and i'm just going to call it create payment intent because when we are doing payments with stripe we need to make a payment intent on the backend okay and this that's that's what i'm going to do here basically so in here we're going to have an async function with a request and a response and i'm going to create a payment intent and i can do that with this drive library so i can do await stripe and do payment oh sorry is it right no something is not right this one needs to be capital s yeah yes and now i should be able to access payment intents and on payment intent i can call create and in payment intent i need to give how many what's the amount how much money am i charging i can just put 5000 there now that's going to be 50 dollars saying our currency is us dollars okay and that is actually all now we can send back the payment intent client secret to do that we access the response object we call send and here we can put a json so i'm just going to create a very simple one like an object here where call it client secret and then i can access payment intent client secret like this okay that's our endpoint now we just need to set our server live and i'm going to do it on port 3000 and yeah i'm just going to pass in a call back here that says we're running so i know it's working and last step is in go to our package json just to make things a little more neat let's call nodemon on index.jsx here so now if i go down here i should be able to just say yarn start it was a start script so i can do yarn start and that should open up our api if everything is running and it seems like it is so now i can return to my to my front end here to my reg native app and i can call this api get that secret and confirm my payment okay so the way i do this is i'm going to use fetch to reach the endpoints and the endpoint is at localhost 3000 currently and i'm accessing the pay create payment intent here and i'm using a post method okay and i'm just gonna actually what's important here is that when you're creating a payment intent you can save a little bit of time by calling it inside use effect so instead of putting an inside handle payment i'm going to create a use effect and i'm going to pass in an empty dependency array so as soon as this drive test command is loaded i'm gonna call the api so in here i'm gonna tag it then on top of my fetch and i'm just gonna take the response and then json the body and call another then in here i am going to grab that secret okay so [Music] let me just define our intent here so our intent is going to be res and since we don't know how that looks we need to type cast it here so it's going to be a client secret object or it's going to be an object with a key called client secret and that's going to be a string right that's how that one that's how that one's going to look oh we can see we got an error here and that was because this input or this function actually ran and it saw that we're not using a proper api key so i'm going to fill in a proper api key at the end so you can see that it at least works okay so after the intent here is to find a new variable you don't have to but after that we could put it inside state or in a ref i'm just going to put it inside state so up here i can call you state called a key and here i can then call set key and then pass in the intent client secret here so now i have my key in my state so now down here and handle payment i can pass in oh let me see handle payment i can pass in the key and then as a second parameter it takes in a configuration object here i can say that i'm doing a card payment and i could pass in extra details such as the email here if i wanted to like something here in case i have more information which i probably will have okay so let's make this into an async function and then do and await unconfirm payment and then check on what we get back so we might get an error right and we may not so we need to check if we get that error if we do get an error we can show an alert that says error and then we can print that error message and if there's no error well then our payment was successful so we can print a message that says payment successful okay so this is actually all we need to do now we are ready to do our first payment and uh yeah i'm just gonna be filling in um a public key here and a secret key here and then let's try to run it and see if it works put in a public key and a prior key that is a valid keys and if you're not sure how to get one you just go on strive's website and sign up and grab one basically and uh yeah let's let's try to do a test here so let's actually do a console log just to check if we're getting the intent here so let's just print out the response we get from the api refresh it and perhaps we need to do a hard refresh here no we don't i can see that we are getting getting it actually so uh let's do an alert instead so you guys can see it let's do rest here so now you can see that i'm getting it but i'm getting a error because i just tried to frame adjacent object so let's alert unrest that rest on intent instead client secret okay so now you can see i get the key here and let me use one of stripes test cards put in the card number the month and the year then s cvc number and then i can press pay now and here it actually says your card expiration year is invalid so that's actually great that that's working so let's put one valid in month year so year should be 24 perhaps right cbc can be anything with the test card i believe so let's press pay now and then we get the payment successful okay so that's how it works and yeah if you have the strap dashboard open you should be able to see the charge there in the dashboard and of course if you want to do another flow this is a custom flow um let me just find the documentation here all right so we did this card element only flow here where we get just the card element then we style the rest of this the rest of the rest of the stuff ourselves but if we just want this pre-built ui which looks quite neat in my opinion we can also just use that and we do the exact same thing but instead of wearing out our card element we use a check what's it called i believe we just use this percent payment sheet function that we can grab from the stripe library so same procedure but yeah a little different in terms of what we render in the end okay so yeah that's all check out this documentation it's great if you want to get started on this video couldn't get you to the end okay all right peace

Channel: Jonas Grøndahl

Views: 5,669

Keywords: stripe, react native, payment react native, billing react native, card stripe, typescript

Id: 0K-4bD70wvI

Length: 23min 3sec (1383 seconds)

Published: Thu Jun 10 2021