WEBVTT 1 00:00:00.160 --> 00:00:01.420 Hi and welcome back. 2 00:00:01.440 --> 00:00:03.700 Today we're going to be going over how 3 00:00:03.730 --> 00:00:08.140 to upload our Stripe payment integration to Firebase functions. 4 00:00:08.170 --> 00:00:10.090 If you have no idea what firebase 5 00:00:10.120 --> 00:00:13.940 functions are, I highly recommend you go back to the section where we are 6 00:00:13.970 --> 00:00:17.340 explaining servers, APIs node JS and express. 7 00:00:17.370 --> 00:00:19.420 Because we have a lecture there called 8 00:00:19.450 --> 00:00:21.420 transferring Local Setup to Firebase 9 00:00:21.450 --> 00:00:25.580 and Testing with Postman where you're going to see how to do this on a very 10 00:00:25.600 --> 00:00:27.820 simple server side code. 11 00:00:27.850 --> 00:00:31.220 Example, if you already have a Firebase 12 00:00:31.240 --> 00:00:35.700 account, which you should because we have used it for authentication purposes 13 00:00:35.720 --> 00:00:38.500 already for the donation application, then I'm just going 14 00:00:38.530 --> 00:00:40.040 to show you how to upload the 15 00:00:40.070 --> 00:00:44.060 stripe payment server side code to Firebase functions right now. 16 00:00:44.080 --> 00:00:46.100 So first of all, what we're going to need 17 00:00:46.130 --> 00:00:49.220 is close our server that was running here before. 18 00:00:49.250 --> 00:00:54.780 I'm going to clear my terminal and I'm going to make sure that I initiate 19 00:00:54.810 --> 00:00:59.660 a Firebase project here so that would be done with Firebase init here. 20 00:00:59.680 --> 00:01:03.640 So we're going to say that we're going to be using Firebase functions. 21 00:01:03.670 --> 00:01:06.740 So just navigate to the functions here, 22 00:01:06.770 --> 00:01:10.210 click on Space so that this is selected and then just click on Enter. 23 00:01:10.240 --> 00:01:12.340 Let's create a new project and let's. 24 00:01:12.370 --> 00:01:18.210 Call it Stripe Payment ID. 25 00:01:18.240 --> 00:01:24.880 And I'm going to call this stripe payments project example. 26 00:01:25.200 --> 00:01:28.930 Now this is creating a Google Cloud platform project for me. 27 00:01:28.960 --> 00:01:33.210 I'm going to wait for this to complete and then we can continue our setup. 28 00:01:33.240 --> 00:01:35.900 Great, so my Firebase project is now ready. 29 00:01:35.930 --> 00:01:37.780 I'm going to say that we're using 30 00:01:37.810 --> 00:01:41.140 javaScript for our server side function code. 31 00:01:41.170 --> 00:01:46.570 And I don't want Eslint to catch any bugs or enforce any kind of styling. 32 00:01:46.600 --> 00:01:48.900 And I do want to install the NPM 33 00:01:48.930 --> 00:01:54.740 dependencies right now so that my Node modules is created inside the functions 34 00:01:54.770 --> 00:01:58.290 folder that is going to appear here. 35 00:01:58.320 --> 00:02:03.930 Great, so Node modules will install right now according to this package JSON file. 36 00:02:03.960 --> 00:02:06.060 And then we're going to have to transfer 37 00:02:06.090 --> 00:02:09.980 some of our package JSON code here as well to make sure that 38 00:02:10.010 --> 00:02:12.260 all of the other packages that we 39 00:02:12.290 --> 00:02:16.220 were using before are also running on our Firebase project. 40 00:02:16.250 --> 00:02:19.450 So let's go here, let's copy the 41 00:02:19.480 --> 00:02:25.780 dev dependencies, go to our package JSON here and make sure that we paste it here. 42 00:02:25.810 --> 00:02:27.780 And now we have two dev dependencies. 43 00:02:27.810 --> 00:02:31.580 So let's unite them like this. Great. 44 00:02:31.600 --> 00:02:33.240 Now let's go back here and let's 45 00:02:33.270 --> 00:02:38.420 say that we need type module here as well. 46 00:02:38.450 --> 00:02:40.300 And now let's make sure that we 47 00:02:40.330 --> 00:02:44.700 can run the Body Parser and Express and Stripe there as well. 48 00:02:44.730 --> 00:02:48.380 So let's copy all of this and 49 00:02:48.410 --> 00:02:51.260 paste them inside the dependencies. 50 00:02:51.290 --> 00:02:55.340 We're not going to use Nodemon right here anymore. 51 00:02:55.370 --> 00:02:57.420 Let's save this setup and make sure 52 00:02:57.450 --> 00:02:59.260 that we have comma here as well. 53 00:02:59.290 --> 00:03:02.460 Let's not forget about that. Great. 54 00:03:02.490 --> 00:03:07.660 Once we have this, we're also going to have to transfer our Babel RC file here. 55 00:03:07.690 --> 00:03:10.260 So let's refactor the functions and make. 56 00:03:10.290 --> 00:03:12.420 Sure that babel RC file is here. 57 00:03:12.450 --> 00:03:17.420 But as you see in the package JSON file, we're running on node version 16. 58 00:03:17.450 --> 00:03:22.420 So we need to make sure that preset environment is also installed with that. 59 00:03:22.450 --> 00:03:25.060 So let's make sure that we put 60 00:03:25.090 --> 00:03:27.980 an object here for this and this object is 61 00:03:28.010 --> 00:03:31.900 just going to say that our target for node is 16. 62 00:03:31.930 --> 00:03:34.300 Now let's make sure that our local 63 00:03:34.330 --> 00:03:36.610 environment is running on the 16th version. 64 00:03:36.640 --> 00:03:41.740 And for me it is because I have NVM, which is node version manager. 65 00:03:41.770 --> 00:03:44.260 Again, if you don't know what NVM is, 66 00:03:44.290 --> 00:03:48.140 please go back to the previous videos where we explain all of this. 67 00:03:48.170 --> 00:03:50.820 But right now I'm running on the 16th 68 00:03:50.850 --> 00:03:54.220 version, which is exactly what I need to make sure that this code 69 00:03:54.250 --> 00:03:58.300 recompiles once I run NPM install. So great. 70 00:03:58.330 --> 00:04:00.660 Now since we have everything set up, 71 00:04:00.690 --> 00:04:06.460 what I will also need to do is make sure that I transfer my constants JS file here 72 00:04:06.490 --> 00:04:12.980 and that my index JS content is actually going to be placed here. 73 00:04:13.010 --> 00:04:15.610 So I'm just going to paste it here. 74 00:04:15.640 --> 00:04:18.300 I'm going to import the functions in 75 00:04:18.330 --> 00:04:20.820 an es six way. 76 00:04:20.840 --> 00:04:23.060 So I'm going to say import all 77 00:04:23.090 --> 00:04:27.140 as functions from Firebase functions. 78 00:04:27.160 --> 00:04:30.140 I can comment this code out. 79 00:04:30.160 --> 00:04:35.020 We don't need to listen to anything because this will happen automatically. 80 00:04:35.040 --> 00:04:36.860 And then I just need to say 81 00:04:36.890 --> 00:04:46.640 that we have an exportable constant called, let's say Stripe Payment. 82 00:04:46.720 --> 00:04:53.380 And let's make sure that we use functions 83 00:04:53.410 --> 00:05:00.800 Https on request app. 84 00:05:01.320 --> 00:05:03.220 And this is going to connect to 85 00:05:03.250 --> 00:05:07.380 our app code that we have set up here. 86 00:05:07.410 --> 00:05:09.940 So this should run just fine. 87 00:05:09.970 --> 00:05:11.340 Let's save this. 88 00:05:11.360 --> 00:05:13.420 And now we can delete our node 89 00:05:13.450 --> 00:05:17.820 modules here so we don't need this anymore. 90 00:05:17.840 --> 00:05:20.080 Great, we can also get rid of 91 00:05:20.100 --> 00:05:22.940 the index JS file. 92 00:05:22.970 --> 00:05:24.560 We can get rid of package and 93 00:05:24.590 --> 00:05:28.300 package JSON files because we're not going to need those anymore. 94 00:05:28.330 --> 00:05:30.500 And now we just have the firebase 95 00:05:30.530 --> 00:05:32.140 set up right here. 96 00:05:32.160 --> 00:05:35.860 First of all, what we're going to need to do is install all of these new packages. 97 00:05:35.890 --> 00:05:43.620 So let's go to the functions directory and let's run NPM install so that our node 98 00:05:43.650 --> 00:05:46.500 module has everything installed as it needs. 99 00:05:46.530 --> 00:05:48.020 Great, we got no errors. 100 00:05:48.040 --> 00:05:50.740 And now to deploy, we're going to use this statement right here. 101 00:05:50.770 --> 00:05:55.300 So we're going to say NPM run deploy and this should create our new 102 00:05:55.330 --> 00:05:59.140 function if everything goes well. 103 00:05:59.170 --> 00:06:02.460 So it's telling me now that my project 104 00:06:02.480 --> 00:06:06.660 should be on Blaze Pay As You Go plan to complete this command. 105 00:06:06.690 --> 00:06:08.060 So this is my mistake. 106 00:06:08.090 --> 00:06:10.540 I'm going to click on this link given here 107 00:06:10.570 --> 00:06:13.460 and it should open up my Firebase projects. 108 00:06:13.480 --> 00:06:15.340 I'm going to go here. 109 00:06:15.360 --> 00:06:18.380 This is my stripe payment project example. 110 00:06:18.410 --> 00:06:20.260 I'm going to modify my plan. 111 00:06:20.290 --> 00:06:23.060 I'm going to select pay as you go plan. 112 00:06:23.090 --> 00:06:26.620 I'm going to continue and I'm not going to put any budget here. 113 00:06:26.650 --> 00:06:28.300 I'm just going to skip this step 114 00:06:28.330 --> 00:06:31.300 and click on Purchase. Great. 115 00:06:31.330 --> 00:06:33.780 So now that this is all set. 116 00:06:33.800 --> 00:06:38.220 My deploy should run if I get no errors. 117 00:06:38.250 --> 00:06:40.100 Let's see. 118 00:06:40.130 --> 00:06:45.380 Okay, so I got an error because constants JS file was not imported correctly. 119 00:06:45.410 --> 00:06:48.020 Whoops. I don't need this functions right here. 120 00:06:48.040 --> 00:06:49.540 My import was incorrect. 121 00:06:49.570 --> 00:06:53.200 So I'm going to rerun the deploy. 122 00:06:53.760 --> 00:06:56.700 And this would definitely work now. Great. 123 00:06:56.730 --> 00:07:00.020 My package is uploading because everything was correct. 124 00:07:00.040 --> 00:07:02.400 And now what Firebase will do is it will 125 00:07:02.420 --> 00:07:07.460 generate an endpoint for me that I can use instead of localhost. 126 00:07:07.480 --> 00:07:09.780 So it's going to be called Stripe payment. 127 00:07:09.800 --> 00:07:11.020 And it's going to give me the 128 00:07:11.040 --> 00:07:17.260 uRL address that we can try using on our react native project. 129 00:07:17.290 --> 00:07:21.400 So let's wait on this to complete and grab the URL that its going 130 00:07:21.420 --> 00:07:23.620 to return to me. Great. 131 00:07:23.650 --> 00:07:26.900 So here's my endpoint that I can use from now on. 132 00:07:26.920 --> 00:07:32.420 I'm going to copy this and then I'm going to open my donation project. 133 00:07:32.450 --> 00:07:38.300 And instead of localhost, I'm going to use an API URL. 134 00:07:38.330 --> 00:07:42.200 So I'm going to call it like this. 135 00:07:43.360 --> 00:07:48.860 API URL plus this. 136 00:07:48.890 --> 00:07:55.580 And I'm going to create a constant here called API URL, and its value. 137 00:07:55.600 --> 00:08:00.160 Is going to be my new Firebase function. 138 00:08:01.120 --> 00:08:03.140 I'm going to save this. 139 00:08:03.170 --> 00:08:05.860 And now that I have my Stripe 140 00:08:05.890 --> 00:08:09.060 payment endpoint set up and I'm using this 141 00:08:09.090 --> 00:08:12.660 API URL, I'm still running my Metro bundler. 142 00:08:12.690 --> 00:08:15.380 So I'm just going to reload my application. 143 00:08:15.410 --> 00:08:17.500 I'm going to go to my simulator. 144 00:08:17.530 --> 00:08:20.540 I'm going to click on some I'll 145 00:08:20.570 --> 00:08:24.660 click on some other donation item, like 14.81. 146 00:08:24.690 --> 00:08:26.260 Let's click on donate. 147 00:08:26.290 --> 00:08:29.780 Let's enter this test number 148 00:08:29.800 --> 00:08:38.040 and some weird credentials here to be able to click on donate. 149 00:08:38.560 --> 00:08:41.780 Now my payment was successful, 150 00:08:41.810 --> 00:08:49.940 and if I go back to my dashboard and reload this page, I'm going to see 151 00:08:49.970 --> 00:08:52.780 that this was successfully processed at 08:50. 152 00:08:52.810 --> 00:08:54.940 P.m., which is right now. 153 00:08:54.970 --> 00:08:56.300 So this is great. 154 00:08:56.320 --> 00:08:57.580 Thanks so much. 155 00:08:57.610 --> 00:08:59.700 We have just get up our Stripe 156 00:08:59.730 --> 00:09:02.260 integration with our donation application. 157 00:09:02.290 --> 00:09:05.000 Our server is running on firebase, which 158 00:09:05.030 --> 00:09:08.020 means that technically, if we had users 159 00:09:08.050 --> 00:09:10.380 they could also use our server side 160 00:09:10.410 --> 00:09:14.700 code because we're not running the server on localhost. 161 00:09:14.730 --> 00:09:17.180 Because if we're running the code on 162 00:09:17.200 --> 00:09:20.340 localhost, then it's only accessible to us. 163 00:09:20.370 --> 00:09:24.260 And nobody else because this is our local environment setup. 164 00:09:24.290 --> 00:09:25.620 So this is all great. 165 00:09:25.650 --> 00:09:28.620 We have just finished our donation application. 166 00:09:28.650 --> 00:09:30.800 Going forward, we're going to learn how 167 00:09:30.820 --> 00:09:36.780 to upload our applications on Google Play Store and Apple Store. 168 00:09:36.810 --> 00:09:38.700 So thanks so much for watching. 169 00:09:38.730 --> 00:09:41.780 You have really become an advanced developer. 170 00:09:41.800 --> 00:09:43.740 I hope that you're super excited about 171 00:09:43.760 --> 00:09:45.740 all that you've learned because you definitely 172 00:09:45.770 --> 00:09:49.020 deserve all the recognition for the effort 173 00:09:49.050 --> 00:09:51.340 that you've put in throughout this course 174 00:09:51.370 --> 00:09:54.380 because you've really badge it to the advanced level. 175 00:09:54.410 --> 00:09:56.420 So now if you want to create any 176 00:09:56.440 --> 00:09:58.940 applications and accept payments, you already 177 00:09:58.970 --> 00:10:00.500 have a way to do this. 178 00:10:00.520 --> 00:10:02.480 Thank you and I'll see you in the next video.