1
00:00:01,410 --> 00:00:05,020
Now got everything around handling orders put together inside of our payment service.

2
00:00:05,020 --> 00:00:10,330
Now our attention is going to move over to actually handling credit cards and actually billing users.

3
00:00:10,330 --> 00:00:14,520
So this video we're gonna get an overview of the API that we're going to use we eventually handle a

4
00:00:14,560 --> 00:00:18,370
real credit card payments coming in from our users.

5
00:00:18,430 --> 00:00:18,760
All right.

6
00:00:18,770 --> 00:00:23,740
So quick diagram first off we're gonna start with a quick mockup of what a user is going to see in our

7
00:00:23,740 --> 00:00:28,450
app on the left hand side is a very simplified version of what a user is going to look at whenever they

8
00:00:28,450 --> 00:00:30,500
take a look at an individual ticket.

9
00:00:30,520 --> 00:00:33,290
So this would be a ticket that a user might want to buy.

10
00:00:33,390 --> 00:00:36,260
They're going to display the title of the ticket and the price.

11
00:00:36,260 --> 00:00:41,640
And then right after that we'll show a Buy Now button or something that looks very similar whenever

12
00:00:41,640 --> 00:00:42,920
a user clicks on this.

13
00:00:42,920 --> 00:00:49,110
We're going to use a third party library to open up a automatic dialog that looks like this right here.

14
00:00:49,220 --> 00:00:54,560
This is going to be a dialogue created by a third party library called the stripe J S library.

15
00:00:54,560 --> 00:00:58,970
The goal of this modal dialogue right here is to take in some credit card input from a user.

16
00:00:58,970 --> 00:01:03,970
The user will enter in their name and then a credit card number and then submit the payment.

17
00:01:03,980 --> 00:01:07,700
But this entire mode right here again is created by stripe Jesus.

18
00:01:07,730 --> 00:01:12,410
And the reason I'm saying that so much is that what happens with this information is really important

19
00:01:12,410 --> 00:01:18,320
for us to understand and know point time do you and I really want to directly handle credit card numbers

20
00:01:18,770 --> 00:01:21,120
and that's what this stripe API does for us.

21
00:01:21,260 --> 00:01:26,240
It removes the requirement of unite to deal with credit card numbers directly is there are huge security

22
00:01:26,240 --> 00:01:32,030
concerns with handling credit cards at any point in time so by having this modal window right here created

23
00:01:32,030 --> 00:01:37,160
by stripe we're essentially delegating handling everything related to a credit card number off to stripe

24
00:01:37,430 --> 00:01:39,720
as opposed to dealing with it ourselves.

25
00:01:39,740 --> 00:01:41,900
So what happens when the user clicks on submit right there.

26
00:01:41,900 --> 00:01:45,860
Well let's take a look at another diagram and understand what happens and user submits their credit

27
00:01:45,860 --> 00:01:48,560
card number.

28
00:01:48,670 --> 00:01:53,320
So Seagram is a little bit complicated even though it looks relatively simple in nature because there's

29
00:01:53,320 --> 00:01:58,490
kind of a lot of hidden gotchas and hidden little steps inside of here so we're going to have running

30
00:01:58,490 --> 00:02:02,450
inside the browser the stripe j ust library that's the thing that is going to eventually create that

31
00:02:02,450 --> 00:02:07,460
modal window user is going to enter their credit card details when they click on submit the stripe j

32
00:02:07,460 --> 00:02:12,060
ust library is going to take those credit card details and send them off to the stripe API.

33
00:02:12,080 --> 00:02:17,240
Now during this initial send off right here read centrally going to get back something called a token

34
00:02:17,480 --> 00:02:21,950
and you should really view at this token right here as kind of like an authorization.

35
00:02:21,950 --> 00:02:26,600
It is something that's going to allow you and I some developers to eventually charge that credit card

36
00:02:26,630 --> 00:02:32,570
that the user just submitted for some amount of money the token that is received back inside the browser

37
00:02:32,630 --> 00:02:37,150
when those credit card details are submitted should be thought of as a pre authorization.

38
00:02:37,160 --> 00:02:38,610
No money has been charged yet.

39
00:02:38,690 --> 00:02:44,190
It is a token that allows us to do a follow up request and actually charge some real money.

40
00:02:44,190 --> 00:02:48,450
The nice thing about this token is that it is a little bit more secure than handling a credit card number

41
00:02:48,450 --> 00:02:49,420
directly.

42
00:02:49,440 --> 00:02:54,300
It's really a kind of one time use thing where as soon as we charge the money with that token that's

43
00:02:54,300 --> 00:02:54,480
it.

44
00:02:54,480 --> 00:02:57,840
We no longer have any access to the user's credit card or anything like that.

45
00:03:00,120 --> 00:03:03,750
The token is going to be sent back into the browser from the stripe API.

46
00:03:03,960 --> 00:03:08,970
The stripe j ust library is again going to take that token and hand it off to you and I inside of our

47
00:03:08,970 --> 00:03:14,180
javascript code that has also been executed inside the browser you and I are then going to take that

48
00:03:14,180 --> 00:03:19,970
token and submit it inside a request to our payments service then inside of our payment service you

49
00:03:19,970 --> 00:03:21,680
and I are going to take that token.

50
00:03:21,680 --> 00:03:24,960
We're going to make sure that the user is trying to pay for some valid order.

51
00:03:24,980 --> 00:03:26,930
We're gonna make sure we verify the price correctly.

52
00:03:26,930 --> 00:03:28,010
All that kind of stuff.

53
00:03:28,080 --> 00:03:32,930
Then once we decide that is now time to charge the users credit card we're going to make a request from

54
00:03:32,960 --> 00:03:34,130
our payment service.

55
00:03:34,320 --> 00:03:39,620
Often the stripe API and we're going to include that token and that's what's going to actually finalize

56
00:03:39,620 --> 00:03:45,890
the charge or really create a charge the term charge in the world of Stripe really means payment.

57
00:03:45,920 --> 00:03:52,080
So whenever you see a charge we're talking about a credit card charge or a payment of sorts so it's

58
00:03:52,110 --> 00:03:56,520
only when you and I take that token and make the final request of the stripe API that the user's credit

59
00:03:56,520 --> 00:04:03,250
card actually gets charged and you and I in theory receive some money now as we look at this diagram

60
00:04:03,250 --> 00:04:08,760
I hear you're gonna notice that the browser component plays well a really big part of this entire flow

61
00:04:09,230 --> 00:04:13,290
but at this point we have not really worked on our ReACT application whatsoever.

62
00:04:13,290 --> 00:04:15,870
All it really handles right now is the ideal of authentication.

63
00:04:15,870 --> 00:04:20,000
We don't have any thing around tickets or orders let alone payments.

64
00:04:20,010 --> 00:04:24,270
Does that mean we're gonna go work on all the react stuff before we can come back and start to finish

65
00:04:24,270 --> 00:04:25,470
up the payment service.

66
00:04:25,470 --> 00:04:26,270
Well no no.

67
00:04:26,310 --> 00:04:31,260
We've got these automated tests but together so turns out that we can actually write a tremendous amount

68
00:04:31,290 --> 00:04:32,110
of this flow.

69
00:04:32,220 --> 00:04:36,780
So essentially receiving that token so many it to the stripe API and successfully charging a credit

70
00:04:36,780 --> 00:04:42,390
card we can implement all that stuff and test it out using automated tests with jest as opposed to having

71
00:04:42,390 --> 00:04:46,440
to manually test it inside the browser through the use of the stripe j ust library or anything like

72
00:04:46,440 --> 00:04:47,040
that.

73
00:04:47,910 --> 00:04:52,570
That's the idea that's we're going to move on or start to work on moving forward.

74
00:04:52,680 --> 00:04:57,150
We're going to implement some code inside the payment service receive the token rate a charge and we're

75
00:04:57,150 --> 00:05:01,030
going to also get a little bit creative in testing this stuff as well.

76
00:05:01,030 --> 00:05:02,000
So let's take a pause right here.

77
00:05:02,010 --> 00:05:07,650
When we come back the next video we're going to start to create a new stripe API key and or that's going

78
00:05:07,650 --> 00:05:09,870
to allow us to make use of the stripe API.