1
00:00:00,650 --> 00:00:06,150
In the last video we were able to get the token that is provided to us by the Strype API to be consul

2
00:00:06,150 --> 00:00:11,500
logged out our javascript console after we entered a valid test credit card.

3
00:00:11,790 --> 00:00:16,350
So let's now go back over to our flow and get a reminder of what we need to do now.

4
00:00:16,650 --> 00:00:21,300
So we've now gotten a token directly from Strype that represents the charge.

5
00:00:21,300 --> 00:00:27,390
We now need to send that token to our API our API will then do a follow up request over to Strype and

6
00:00:27,390 --> 00:00:30,240
then add some credits to the users account.

7
00:00:30,240 --> 00:00:35,050
Now one thing I want to talk about that is very closely related to this ad credits to users account

8
00:00:35,050 --> 00:00:36,120
thing right here.

9
00:00:36,120 --> 00:00:39,130
We don't necessarily have like a user account per se.

10
00:00:39,150 --> 00:00:45,000
We have a object or a model inside of our database that represents a user.

11
00:00:45,000 --> 00:00:50,850
So when I say on this box right here add credits to users account I'm really saying that every user

12
00:00:50,850 --> 00:00:55,710
model will probably have a record of the number of current credits that they own.

13
00:00:55,710 --> 00:01:00,690
And so when we say add credit Caesar's account we're really saying that we're going to add some additional

14
00:01:00,690 --> 00:01:03,810
number of credits to that user model.

15
00:01:04,160 --> 00:01:04,470
OK.

16
00:01:04,530 --> 00:01:09,030
So just to make sure that part's clear we're now going to kind of fix up a couple of things inside of

17
00:01:09,030 --> 00:01:14,040
our payments form and then we're going to start to implement the step where we take our token that we

18
00:01:14,040 --> 00:01:16,730
get back from Strype and send it to our API.

19
00:01:17,040 --> 00:01:20,420
So what we have to fix for before we get to the step.

20
00:01:20,700 --> 00:01:26,330
Well first off remember that we're getting this warning about the key property inside of our console.

21
00:01:26,430 --> 00:01:32,970
So we said that that is currently being generated by our heterogeneous file specifically this default

22
00:01:32,970 --> 00:01:34,560
or turn case right here.

23
00:01:34,560 --> 00:01:38,580
So we are returning a list of elements but we have not provided a key.

24
00:01:38,670 --> 00:01:40,320
So we're going to put on a key here.

25
00:01:40,320 --> 00:01:46,080
Remember that the only requirements for a key is that it must be unique and consistent across renderers.

26
00:01:46,110 --> 00:01:51,960
Now as you can see right here this is always going to be a static list of records so we can use absolutely

27
00:01:51,990 --> 00:01:54,610
any key we want because it's never going to change.

28
00:01:54,660 --> 00:01:59,520
No we're not rendering a list of elements from like an array of records that will change over time.

29
00:01:59,520 --> 00:02:02,200
This is really a one time render kind of deal.

30
00:02:02,250 --> 00:02:09,300
So I'm going to give it a key of one and key of two on the next record and that should be enough to

31
00:02:09,320 --> 00:02:11,660
just satisfy the key requirements.

32
00:02:11,950 --> 00:02:15,280
So now if we let the OP reload no warning anymore.

33
00:02:15,390 --> 00:02:15,680
OK.

34
00:02:15,690 --> 00:02:17,300
So that's good for step 1.

35
00:02:17,610 --> 00:02:23,640
Now second thing I want to fix up when we click the pay with card button and we get this big old box

36
00:02:23,640 --> 00:02:26,500
on the screen that tells user hey like give us the money.

37
00:02:26,730 --> 00:02:31,710
You can tell that it's immediately not at all clear to the user what they're paying for.

38
00:02:31,710 --> 00:02:37,350
You know we take their e-mail we take the credit card details we tell them they're going to pay $5 but

39
00:02:37,380 --> 00:02:39,230
what are they actually paying for.

40
00:02:39,270 --> 00:02:40,320
Right.

41
00:02:40,380 --> 00:02:47,100
So the re-act stripe check out component that we used previously inside of our payments start G-S file

42
00:02:47,520 --> 00:02:53,600
takes two additional props that we can use to customize the text that appears in that window.

43
00:02:53,940 --> 00:03:00,000
So I'm going to give the stripe check out component a name property name is going to be displayed as

44
00:03:00,000 --> 00:03:02,990
like a big header at the very top.

45
00:03:03,000 --> 00:03:07,590
So for us we'll put in the name of our application just so that the user understands like yeah this

46
00:03:07,590 --> 00:03:10,200
is still payment for our application.

47
00:03:10,530 --> 00:03:15,680
And then the Strype check out component also accepts a description property as well.

48
00:03:15,690 --> 00:03:21,420
This will also show up on the header up here and we can use it to just give the users some idea of what

49
00:03:21,420 --> 00:03:22,890
they're paying money for.

50
00:03:23,250 --> 00:03:32,730
So I'm going to say five four five e-mail credits like so guess what.

51
00:03:32,740 --> 00:03:34,160
Reload again.

52
00:03:34,360 --> 00:03:40,460
Now when we open up the button it's a lot more obvious to our users what's going on.

53
00:03:40,730 --> 00:03:43,050
So the name of the application is e-mail.

54
00:03:43,310 --> 00:03:44,830
And it's a little bit more clear.

55
00:03:44,840 --> 00:03:51,110
OK we're about to pay $5 to get five email credits or five surveyed credits whatever we really want

56
00:03:51,110 --> 00:03:52,140
to call it.

57
00:03:52,670 --> 00:03:53,010
OK.

58
00:03:53,030 --> 00:03:58,160
So this is looking pretty good now I think that there is one last thing to take care of when we look

59
00:03:58,160 --> 00:03:59,870
at this hideous button.

60
00:03:59,880 --> 00:04:05,210
It really does not match the styling of anything else inside of our application right now.

61
00:04:05,210 --> 00:04:07,690
So I think this button needs to change.

62
00:04:07,760 --> 00:04:12,380
Now I know I've said that we're not going to worry too much about styling in this course but this thing

63
00:04:12,380 --> 00:04:13,370
is just over the top.

64
00:04:13,370 --> 00:04:15,350
It just looks bad period.

65
00:04:15,350 --> 00:04:23,750
So to use some other element or some like GSX markup rather than this pre-build button that was included

66
00:04:23,750 --> 00:04:27,690
with the stripe check out component right here.

67
00:04:28,130 --> 00:04:33,960
We can pass our own custom element to use as a representation for that button.

68
00:04:33,980 --> 00:04:40,610
So the way that we do that is we're going to pass an element to the stripe check out component as a

69
00:04:40,610 --> 00:04:42,080
child component.

70
00:04:42,080 --> 00:04:44,470
So let's see what that looks like in practice.

71
00:04:44,840 --> 00:04:48,400
Right now the Strype check out component is a self-closing tag right.

72
00:04:48,410 --> 00:04:49,640
There's the closing tag.

73
00:04:49,640 --> 00:04:56,250
I'm going to remove the self-closing forward slash and then going to put in a separate closing tag.

74
00:04:56,250 --> 00:04:56,790
So.

75
00:04:56,810 --> 00:05:04,490
Check out and then we'll pass in a child's component to use as the button rather than the built in button

76
00:05:04,490 --> 00:05:06,150
that is currently being displayed.

77
00:05:06,440 --> 00:05:12,400
So as a child component say button with a class name of between.

78
00:05:13,640 --> 00:05:21,200
And this is going to have the text add credits like so the class name of Beechen means use a button

79
00:05:21,230 --> 00:05:24,680
from the material design UI package.

80
00:05:24,680 --> 00:05:28,710
So this is a little bit of CSSA we're going to get out of the box for free.

81
00:05:29,320 --> 00:05:29,750
OK.

82
00:05:29,900 --> 00:05:35,600
Now we'll save this and when we go back over it's a much more reasonable looking button that appears

83
00:05:35,600 --> 00:05:36,890
at the top.

84
00:05:36,890 --> 00:05:42,740
Now maybe like you could definitely make the case to me and say Steve I'm like This is a button up here.

85
00:05:42,730 --> 00:05:46,580
It still looks weird it should look like this other button over here.

86
00:05:46,580 --> 00:05:52,070
However I'm going to point out that usually whenever there is some light preferred action or some like

87
00:05:52,070 --> 00:05:58,640
really clear thing that we want our user to do we want to add a little bit of so designed to just pull

88
00:05:58,640 --> 00:06:00,350
focus to this element.

89
00:06:00,410 --> 00:06:05,720
And so traditionally inside of a web application anything that involves giving us money or you know

90
00:06:05,750 --> 00:06:11,210
getting the user to do something we want we want to put in some like additional pizzazz or like something

91
00:06:11,210 --> 00:06:14,270
to look at you know something to draw the users attention.

92
00:06:14,300 --> 00:06:19,430
And so while the button doesn't like quite match up in here compared to a log out button over here I

93
00:06:19,430 --> 00:06:25,590
think that it does a great job of drawing users up to the top header and they see add credits and like

94
00:06:25,700 --> 00:06:31,020
very suddenly the user can very easily say OK I need to add some number of credits by clicking on a

95
00:06:31,040 --> 00:06:31,710
button.

96
00:06:31,880 --> 00:06:36,620
So we're going to use a button here again just to kind of draw the attention of our user to what's going

97
00:06:36,620 --> 00:06:38,540
on up here.

98
00:06:38,560 --> 00:06:38,910
OK.

99
00:06:38,930 --> 00:06:43,640
So I think that's it for quick fixes that we need to do to the payment stuff.

100
00:06:43,910 --> 00:06:44,890
So let's take a break.

101
00:06:44,900 --> 00:06:49,850
When we come back in the next section we're going to start to make sure that we send that token that

102
00:06:49,850 --> 00:06:53,100
we get from the Strype API to our back end server.

103
00:06:53,150 --> 00:06:55,160
So let's take care of that in the next section.