1
00:00:00,510 --> 00:00:07,590
Once we have set up dot envy and restart the server, now let's take a look at the docks, see how we

2
00:00:07,590 --> 00:00:12,960
can accept payment and and here in a dashboard, we want to look for documentation.

3
00:00:13,540 --> 00:00:16,190
Then we want to go for payments.

4
00:00:16,230 --> 00:00:20,840
You have many options, but we're looking for except online payments.

5
00:00:21,150 --> 00:00:26,400
And what's really cool about these docs, essentially, they provide all the code.

6
00:00:26,760 --> 00:00:29,070
And for starters, we have these two options.

7
00:00:29,430 --> 00:00:36,540
We can go with pre-built check out page or we can go with custom payment flow, not the one that we're

8
00:00:36,540 --> 00:00:38,910
looking for, the custom payment flow.

9
00:00:39,300 --> 00:00:45,090
And you can also notice here that we have platform options, we have fronton options, as well as the

10
00:00:45,090 --> 00:00:45,510
backing.

11
00:00:46,110 --> 00:00:49,580
Of course, in the real course, we use react as a front.

12
00:00:49,590 --> 00:00:52,020
And in this case, just simplify this.

13
00:00:52,140 --> 00:00:59,460
I went with the email and as far as the back end, of course, we're using of the node now before we

14
00:00:59,460 --> 00:01:05,239
can do anything, we need to install Stripe, which is already included in the star.

15
00:01:05,580 --> 00:01:11,220
And then when it comes to the front end, we can simply take a look at the check out the amount in here.

16
00:01:11,460 --> 00:01:15,800
Notice they have quite a few scripts that relate to this tribe.

17
00:01:15,990 --> 00:01:18,650
And again, this is going to change depending on your front end.

18
00:01:19,140 --> 00:01:22,140
In our case, we'll just focus on this server.

19
00:01:22,140 --> 00:01:27,420
Just then they set up this nice form where we set up the payment.

20
00:01:27,420 --> 00:01:34,140
But before we can send the payment, this is where we need to create that intent and the way they create

21
00:01:34,140 --> 00:01:36,190
that intent in the client.

22
00:01:36,930 --> 00:01:42,630
So this is a front and one this is not a controller we we're about to create.

23
00:01:43,050 --> 00:01:44,600
This is a front end code.

24
00:01:44,670 --> 00:01:49,590
And again, this going to change depending on your fronton in react.

25
00:01:49,590 --> 00:01:51,980
It was different in Vanilla Jass.

26
00:01:51,990 --> 00:01:56,010
It goes something like this where sends in the checkout demo.

27
00:01:56,310 --> 00:01:58,050
We have access to the stripe.

28
00:01:58,350 --> 00:02:03,330
So here how we're looking for the Strib then in the client, just so in the browser.

29
00:02:03,340 --> 00:02:11,009
Jerse we have access to the stripe and this is where we pass in that public key so that one is publicly

30
00:02:11,009 --> 00:02:11,580
available.

31
00:02:12,000 --> 00:02:17,250
Then notice how they set up a post method to some kind of route.

32
00:02:17,490 --> 00:02:19,710
So we have this purchase here.

33
00:02:20,100 --> 00:02:24,500
So at the moment we just have the items and they pass in the area.

34
00:02:24,900 --> 00:02:32,460
So they showcase which item is in purchase and then they communicate with that, create payment content.

35
00:02:32,820 --> 00:02:35,250
Now from that create payment content.

36
00:02:35,430 --> 00:02:38,540
We want to send back the positive response.

37
00:02:38,790 --> 00:02:44,070
So what we want to do, we want to send back this client secret to the front end.

38
00:02:44,430 --> 00:02:51,630
And once we do that, after we have done some other things here before that, then the front end can

39
00:02:51,630 --> 00:02:53,820
actually communicate with Strib.

40
00:02:54,060 --> 00:02:55,590
So that's that middle step.

41
00:02:55,770 --> 00:02:56,760
Hopefully it is clear.

42
00:02:56,970 --> 00:03:01,530
So we have to check out the email, which is going to change depending on the front end that you're

43
00:03:01,530 --> 00:03:01,920
using.

44
00:03:02,250 --> 00:03:07,830
But the area is going to be exactly the same where you have the purchase and what you want to do.

45
00:03:08,040 --> 00:03:14,640
You want to use the front end, just the one that's publicly available pass in there, the public key,

46
00:03:14,940 --> 00:03:16,980
and communicate with the back end.

47
00:03:17,160 --> 00:03:21,660
Basically say, hey, listen, this is what the client is trying to get.

48
00:03:22,020 --> 00:03:25,710
And then on the server, we'll do some cool things.

49
00:03:26,130 --> 00:03:29,970
First of all, we need to require Stripe and then passing that screen.

50
00:03:30,270 --> 00:03:32,640
And as a side note, yes, this is your real one.

51
00:03:32,910 --> 00:03:36,000
So after I'm done with this video, of course, I'll have to change it.

52
00:03:36,300 --> 00:03:40,470
But if you're looking at your own docs, this is going to be exactly the key that you're using.

53
00:03:40,480 --> 00:03:44,340
Therefore, we want to use the process, not the entry, because once we push this up to the GitHub,

54
00:03:44,670 --> 00:03:50,310
we don't want other people to see that code and that I'll talk about these ones once we get there,

55
00:03:50,340 --> 00:03:51,660
once we set up the controller.

56
00:03:51,960 --> 00:03:57,510
But hopefully understand that middle step or yes, there's a front, then yes, we communicate with

57
00:03:57,510 --> 00:03:58,050
our own back.

58
00:03:58,050 --> 00:04:03,600
And then from the back end, we get back the payment intent, client sacred.

59
00:04:03,900 --> 00:04:09,420
And once we have that one in place, then from the front end we can complete the payment.

60
00:04:09,900 --> 00:04:17,490
And as far as the setup, what I want to do right now is just check the dependencies I should have.

61
00:04:17,910 --> 00:04:20,100
If you also have Stripe, you're good to go.

62
00:04:20,100 --> 00:04:21,540
You don't need to install anything.

63
00:04:22,079 --> 00:04:29,160
And let me just showcase where we can get, again, that public key, because I want you to set it up

64
00:04:29,340 --> 00:04:35,910
in your client dress, because if they won't match, if you will use Mikie, then you'll get the errors.

65
00:04:36,180 --> 00:04:42,840
So what I want I want you to do right now is go back to your dashboard and take notice how they have

66
00:04:42,840 --> 00:04:45,660
this nice option to copy the clipboard.

67
00:04:45,870 --> 00:04:50,490
So just copy the public key and go to the public folder.

68
00:04:50,670 --> 00:04:52,080
And it's very, very important.

69
00:04:52,470 --> 00:04:56,850
Go to the public one where you have the browser up and copy and paste.

70
00:04:57,420 --> 00:04:59,490
So in a star you'll see Mikie.

71
00:05:00,010 --> 00:05:04,960
Which, of course, is not going to work because the secret is different in your case, just copy and

72
00:05:04,960 --> 00:05:12,940
paste Yorkey and paste it into the strip and I'll talk about all this code one more time, even though

73
00:05:12,940 --> 00:05:15,150
I just covered in a photograph.

74
00:05:15,610 --> 00:05:20,710
But before you do anything, make sure that you take your public key.

75
00:05:20,770 --> 00:05:22,060
This is not your secret one.

76
00:05:22,360 --> 00:05:24,010
Please don't put the secret one in here.

77
00:05:24,430 --> 00:05:29,860
Pen the public key and paste it into the stripe method.