1
00:00:01,010 --> 00:00:02,600
‫Instruktur: Dalam kuliah ini

2
00:00:02,600 --> 00:00:04,910
‫kita akan belajar bagaimana memproses pembayaran

3
00:00:04,910 --> 00:00:08,203
‫dengan stripe, di front-end setiap kali pengguna mengklik tombol.

4
00:00:09,840 --> 00:00:12,860
‫Dan untuk memulai, mari kita benar-benar mengonfigurasi tombol

5
00:00:12,860 --> 00:00:15,350
‫itu sehingga hanya muncul setiap kali pengguna

6
00:00:15,350 --> 00:00:16,563
‫benar-benar masuk.

7
00:00:17,920 --> 00:00:19,763
‫Jadi di sini, di

8
00:00:21,260 --> 00:00:23,540
‫halaman detail tur, saat ini kami

9
00:00:23,540 --> 00:00:27,250
‫memiliki pengguna yang masuk, dan tombol itu mengatakan tur buku

10
00:00:27,250 --> 00:00:29,180
‫sekarang, tetapi seharusnya hanya seperti

11
00:00:29,180 --> 00:00:31,450
‫ini ketika ada pengguna yang saat

12
00:00:31,450 --> 00:00:32,430
‫ini masuk,

13
00:00:32,430 --> 00:00:36,129
‫dan jika tidak, itu akan mengarahkan kami ke halaman login.

14
00:00:36,129 --> 00:00:37,240
‫Oke?

15
00:00:37,240 --> 00:00:40,463
‫Jadi mari kita terapkan itu dalam template tur.

16
00:00:43,210 --> 00:00:45,570
‫Dan itu sebenarnya di sini, jadi

17
00:00:45,570 --> 00:00:47,313
‫itu adalah tombol ini.

18
00:00:48,300 --> 00:00:49,380
‫Baik?

19
00:00:49,380 --> 00:00:52,300
‫Sekarang jika saat ini ada pengguna

20
00:00:52,300 --> 00:00:55,860
‫yang masuk, maka itu berarti bahwa kami memiliki akses

21
00:00:55,860 --> 00:01:00,860
‫ke variabel pengguna, dan kami dapat melakukannya jika pengguna lebih baik dari ini.

22
00:01:02,440 --> 00:01:05,390
‫Dan jika tidak ada pengguna, jadi kita

23
00:01:05,390 --> 00:01:08,260
‫hanya ingin menampilkan tombol, yang membawa kita

24
00:01:08,260 --> 00:01:10,143
‫ke halaman login.

25
00:01:13,490 --> 00:01:16,540
‫Jadi , login ke

26
00:01:16,540 --> 00:01:20,610
‫tur buku, dan yang ini sebenarnya

27
00:01:20,610 --> 00:01:23,060
‫adalah tautan, jadi

28
00:01:23,060 --> 00:01:26,583
‫kita membutuhkan elemen A untuk jangkar.

29
00:01:27,801 --> 00:01:31,970
‫Mari kita tentukan juga properti hf, yang lagi-lagi

30
00:01:31,970 --> 00:01:34,873
‫akan mengarahkan kita ke halaman login,

31
00:01:34,873 --> 00:01:35,990
‫oke?

32
00:01:35,990 --> 00:01:39,173
‫Sekarang di sini kita juga perlu menambahkan ID,

33
00:01:41,710 --> 00:01:46,200
‫memesan tur sehingga kita dapat memilihnya di JavaScript kita, dan juga sesuatu

34
00:01:46,200 --> 00:01:47,860
‫yang sangat penting,

35
00:01:47,860 --> 00:01:50,700
‫apakah kita harus meletakkan ID tur saat ini

36
00:01:50,700 --> 00:01:53,020
‫di sini di elemen ini, Oke?

37
00:01:53,020 --> 00:01:55,200
‫Sekarang mengapa itu begitu penting?

38
00:01:55,200 --> 00:01:58,913
‫Nah ingat bagaimana endpoint API yang baru saja kita buat.

39
00:01:59,780 --> 00:02:02,840
‫Jadi yang ini di sini membutuhkan ID tur, dan

40
00:02:02,840 --> 00:02:06,970
‫ID tur itu harus datang dari suatu tempat pada dasarnya, dan sekarang

41
00:02:06,970 --> 00:02:09,470
‫kami tidak memiliki informasi itu di mana

42
00:02:09,470 --> 00:02:11,410
‫pun di halaman ini, jadi

43
00:02:11,410 --> 00:02:14,380
‫kami akan meletakkannya di sini tepat di elemen

44
00:02:14,380 --> 00:02:17,440
‫ini, jadi itu atau file JavaScript dapat mengambilnya

45
00:02:17,440 --> 00:02:19,050
‫dari sini, dan

46
00:02:19,050 --> 00:02:22,140
‫mengirimkannya bersama dengan permintaan ke rute sesi checkout, oke?

47
00:02:22,140 --> 00:02:24,700
‫Jadi seperti yang kita lakukan di sini dengan

48
00:02:24,700 --> 00:02:27,170
‫peta, kita akan menggunakan atribut data, dan

49
00:02:27,170 --> 00:02:28,417
‫itulah data-, dan pada

50
00:02:29,548 --> 00:02:31,880
‫dasarnya apa pun nama variabel yang ingin

51
00:02:31,880 --> 00:02:32,913
‫kita definisikan.

52
00:02:33,940 --> 00:02:36,753
‫Dan itulah id tur dalam kasus ini.

53
00:02:40,810 --> 00:02:44,113
‫Jadi tur. id, oke?

54
00:02:45,380 --> 00:02:47,010
‫Jadi berikan ke

55
00:02:47,010 --> 00:02:50,210
‫brankas, dan mari kita coba sekarang.

56
00:02:50,210 --> 00:02:52,400
‫Jadi muat ulang halaman, dan

57
00:02:52,400 --> 00:02:53,960
‫pertama-tama mari kita

58
00:02:53,960 --> 00:02:56,640
‫periksa untuk melihat apakah idenya benar-benar

59
00:02:56,640 --> 00:02:58,950
‫ada, dan memang ini dia.

60
00:02:58,950 --> 00:03:00,793
‫Dan sekarang jika kita logout.

61
00:03:04,240 --> 00:03:06,160
‫Lalu mari kita lihat apa yang kita

62
00:03:06,160 --> 00:03:07,740
‫miliki, dan memang sekarang tertulis,

63
00:03:07,740 --> 00:03:09,183
‫login untuk memesan tur.

64
00:03:10,080 --> 00:03:13,153
‫Hebat, dan mari kita lakukan itu sebenarnya.

65
00:03:19,080 --> 00:03:20,490
‫Sekarang Oke?

66
00:03:20,490 --> 00:03:23,130
‫Jadi sekarang mari kita buat skrip di mana

67
00:03:23,130 --> 00:03:25,320
‫kita akan benar-benar melakukan permintaan,

68
00:03:25,320 --> 00:03:27,603
‫dan memproses pembayaran di front end.

69
00:03:28,580 --> 00:03:32,690
‫Dan seperti sebelumnya itu akan di depan umum, dan

70
00:03:32,690 --> 00:03:34,163
‫kemudian JavaScript.

71
00:03:35,510 --> 00:03:36,943
‫Jadi satu skrip lagi di sini.

72
00:03:38,550 --> 00:03:41,233
‫Dan aku akan menyebutnya stripe. js.

73
00:03:44,440 --> 00:03:46,540
‫Dan sekarang di sini kita

74
00:03:46,540 --> 00:03:49,650
‫sebenarnya membutuhkan akses ke perpustakaan stripe lagi, tetapi

75
00:03:49,650 --> 00:03:52,500
‫paket yang baru saja kita instal sebelumnya,

76
00:03:52,500 --> 00:03:56,293
‫jadi ingat paket MPM stripe yang kita gunakan di sini.

77
00:03:57,240 --> 00:04:00,080
‫Jadi yang ini hanya berfungsi untuk bagian belakang,

78
00:04:00,080 --> 00:04:01,930
‫dan yang perlu kita lakukan

79
00:04:01,930 --> 00:04:05,720
‫di bagian depan adalah memasukkan skrip ke dalam HTML, dan karena

80
00:04:05,720 --> 00:04:09,160
‫kita hanya membutuhkan skrip itu di sini di halaman tur,

81
00:04:09,160 --> 00:04:12,643
‫kita akan melakukannya seperti kita lakukan dengan skrip kotak peta.

82
00:04:13,740 --> 00:04:14,860
‫Jadi yang ini,

83
00:04:14,860 --> 00:04:18,170
‫kita taruh di sini di blok kepala ini,

84
00:04:18,170 --> 00:04:19,260
‫oke?

85
00:04:19,260 --> 00:04:21,760
‫Sekarang skrip mana yang sebenarnya kita butuhkan?

86
00:04:21,760 --> 00:04:25,330
‫Nah itu yang bisa kita dapatkan dari dokumentasi

87
00:04:25,330 --> 00:04:27,600
‫yang sudah kita lihat

88
00:04:27,600 --> 00:04:30,850
‫sebelumnya, dan saya harap Anda tidak menutupnya, oke?

89
00:04:30,850 --> 00:04:33,830
‫Dan sekali lagi yang ini di sini menjelaskan bagaimana

90
00:04:33,830 --> 00:04:36,040
‫kami menggunakan produk checkout baik di

91
00:04:36,040 --> 00:04:37,740
‫klien maupun di server.

92
00:04:38,940 --> 00:04:41,090
‫Jadi di sini kita melihat bahwa

93
00:04:41,090 --> 00:04:44,120
‫kita memiliki dua langkah, pertama membuat sesi checkout di

94
00:04:44,120 --> 00:04:45,630
‫server, dan ini sangat

95
00:04:45,630 --> 00:04:48,170
‫mirip dengan apa yang kita lakukan sebelumnya di

96
00:04:48,170 --> 00:04:52,140
‫video terakhir, dan sekarang kita juga perlu menambahkannya ke front end kita.

97
00:04:52,140 --> 00:04:56,760
‫Dan skrip yang kita butuhkan adalah yang ini, oke?

98
00:04:56,760 --> 00:04:59,513
‫Jadi mari kita salin itu dan mari kita kembali.

99
00:05:02,980 --> 00:05:05,143
‫Dan sekarang kita perlu menyesuaikan ini sedikit.

100
00:05:12,940 --> 00:05:14,280
‫Sekarang kan?

101
00:05:14,280 --> 00:05:18,790
‫Jadi ini adalah mengekspos objek strip ke lingkup global, dan

102
00:05:18,790 --> 00:05:21,960
‫sekarang dalam file ini kita dapat menggunakannya.

103
00:05:21,960 --> 00:05:22,863
‫Jadi kita

104
00:05:24,760 --> 00:05:26,427
‫katakan, const stripe =, dan

105
00:05:27,510 --> 00:05:29,300
‫kemudian ini adalah objek yang

106
00:05:29,300 --> 00:05:31,940
‫kita dapatkan dari skrip yang baru saja kita

107
00:05:31,940 --> 00:05:35,410
‫sertakan, dan kemudian di sini kita memerlukan kunci publik kita, oke?

108
00:05:35,410 --> 00:05:38,180
‫Jadi kita sudah menggunakan kunci rahasia kita

109
00:05:38,180 --> 00:05:41,040
‫di backend, sekarang saatnya menggunakan kunci publik kita.

110
00:05:41,040 --> 00:05:43,620
‫Jadi mari kembali ke dasbor, dan sebenarnya

111
00:05:43,620 --> 00:05:45,910
‫jika Anda berada di dokumentasi, itu

112
00:05:45,910 --> 00:05:48,530
‫akan muncul di sini untuk Anda, jadi

113
00:05:48,530 --> 00:05:50,290
‫ini adalah fitur yang

114
00:05:50,290 --> 00:05:52,310
‫sangat bagus dari dokumentasi stripe.

115
00:05:52,310 --> 00:05:53,467
‫Jadi setiap kali

116
00:05:53,467 --> 00:05:55,350
‫Anda masuk, maka kunci yang Anda

117
00:05:55,350 --> 00:05:57,850
‫miliki di sini sebenarnya adalah kunci publik Anda.

118
00:05:57,850 --> 00:06:00,220
‫Tetapi jika Anda tidak berada di

119
00:06:00,220 --> 00:06:03,078
‫halaman itu, tentu saja Anda juga bisa mendapatkan

120
00:06:03,078 --> 00:06:05,510
‫kunci API Anda dengan membuka beranda,

121
00:06:05,510 --> 00:06:07,440
‫atau halaman pengembang, mari kita

122
00:06:07,440 --> 00:06:09,200
‫coba yang itu.

123
00:06:09,200 --> 00:06:11,020
‫Kemudian di sini, di

124
00:06:11,020 --> 00:06:14,450
‫kunci API, Anda memiliki kunci uji publik di sini.

125
00:06:14,450 --> 00:06:16,210
‫Jadi ambil itu, lalu

126
00:06:16,210 --> 00:06:18,983
‫mari kita kembali dan menyebarkannya di sini.

127
00:06:22,080 --> 00:06:23,470
‫Dan seperti sebelumnya,

128
00:06:23,470 --> 00:06:26,603
‫saya ingin menonaktifkan eslint dengan cepat di sini.

129
00:06:31,220 --> 00:06:32,053
‫Oke?

130
00:06:32,053 --> 00:06:35,503
‫Dan sekarang mari kita akhirnya membuat sebuah fungsi, yang

131
00:06:36,860 --> 00:06:39,343
‫akan saya sebut tur buku.

132
00:06:40,670 --> 00:06:41,510
‫Oke?

133
00:06:41,510 --> 00:06:44,763
‫Jadi fungsi ini akan mengambil ID tur.

134
00:06:46,220 --> 00:06:50,030
‫Jadi ID tur adalah yang akan datang

135
00:06:50,030 --> 00:06:52,870
‫langsung dari antarmuka pengguna ini.

136
00:06:52,870 --> 00:06:57,160
‫Jadi langsung dari sini, oke?

137
00:06:57,160 --> 00:06:58,430
‫Jadi seperti sebelumnya,

138
00:06:58,430 --> 00:07:01,420
‫kita akan mendapatkannya dari index. js di

139
00:07:01,420 --> 00:07:05,560
‫mana kita juga akan menyebut buku ini Tour,

140
00:07:05,560 --> 00:07:06,393
‫oke?

141
00:07:06,393 --> 00:07:08,960
‫Jadi sangat mirip dengan apa yang kami lakukan sebelumnya.

142
00:07:08,960 --> 00:07:11,850
‫Bagaimanapun, sekarang mari kita tentukan sekali lagi langkah-langkah yang

143
00:07:11,850 --> 00:07:13,550
‫akan kita ambil di sini.

144
00:07:13,550 --> 00:07:16,150
‫Jadi langkah pertama adalah benar-benar

145
00:07:16,150 --> 00:07:17,860
‫mendapatkan sesi dari

146
00:07:17,860 --> 00:07:22,580
‫server, dan dari situlah sekarang rute ini masuk, Oke?

147
00:07:22,580 --> 00:07:25,260
‫Jadi ini adalah titik di mana kita akan

148
00:07:25,260 --> 00:07:28,040
‫menggunakan titik akhir ini untuk benar-benar membawa sesi checkout

149
00:07:28,040 --> 00:07:29,443
‫kita ke sisi klien.

150
00:07:31,550 --> 00:07:32,383
‫Oke?

151
00:07:33,230 --> 00:07:36,573
‫Jadi periksa sesi.

152
00:07:39,810 --> 00:07:43,933
‫Dari titik akhir atau dari API itu tidak terlalu penting.

153
00:07:45,600 --> 00:07:47,410
‫Itu dilakukan

154
00:07:47,410 --> 00:07:49,260
‫sebagai langkah kedua, kita

155
00:07:49,260 --> 00:07:54,260
‫akan menggunakan objek stripe kita pada dasarnya secara otomatis membuat

156
00:07:57,657 --> 00:08:01,023
‫formulir checkout, + proses atau katakanlah +

157
00:08:02,490 --> 00:08:05,110
‫biaya, kartu kredit untuk kita, Oke?

158
00:08:05,110 --> 00:08:06,350
‫Dan itu sebenarnya,

159
00:08:06,350 --> 00:08:08,020
‫jadi hanya dua langkah sederhana,

160
00:08:08,020 --> 00:08:11,023
‫dan Anda akan melihat bahwa itu sebenarnya cukup sederhana.

161
00:08:12,200 --> 00:08:16,983
‫Jadi mari kita simpan sesi ke dalam variabel yang disebut sesi.

162
00:08:17,850 --> 00:08:21,500
‫Dan kemudian kita akan menunggu permintaan HTTP, yang sekali

163
00:08:21,500 --> 00:08:24,323
‫lagi akan kita lakukan dengan axios.

164
00:08:26,170 --> 00:08:27,130
‫Baik?

165
00:08:27,130 --> 00:08:28,793
‫Jadi saya harus mengambilnya di sini.

166
00:08:29,840 --> 00:08:32,260
‫Jadi impor aksio, dan

167
00:08:32,260 --> 00:08:35,810
‫sekali lagi saya menggunakan sintaks modul ES6.

168
00:08:35,810 --> 00:08:36,693
‫Ingat

169
00:08:38,310 --> 00:08:40,200
‫itu, dari axios.

170
00:08:40,200 --> 00:08:43,620
‫Jadi seperti yang kita lakukan misalnya di login,

171
00:08:43,620 --> 00:08:46,033
‫atau di update setting, kan?

172
00:08:47,440 --> 00:08:50,093
‫Sekarang kita juga perlu menandai fungsi ini di sini sebagai async.

173
00:08:52,240 --> 00:08:53,240
‫Oke?

174
00:08:53,240 --> 00:08:54,660
‫Dan kemudian ke

175
00:08:54,660 --> 00:08:57,300
‫aksioma, kita cukup meneruskan URL, ketika

176
00:08:57,300 --> 00:09:00,660
‫yang ingin kita lakukan hanyalah permintaan GET sederhana.

177
00:09:00,660 --> 00:09:01,493
‫Oke?

178
00:09:01,493 --> 00:09:02,420
‫Jadi

179
00:09:02,420 --> 00:09:04,510
‫sampai saat ini kami selalu menentukan

180
00:09:04,510 --> 00:09:06,740
‫metode, dan URL dan data, tapi

181
00:09:06,740 --> 00:09:09,110
‫sekarang kami hanya melakukan permintaan GET,

182
00:09:09,110 --> 00:09:11,053
‫dan itu jauh lebih sederhana.

183
00:09:13,220 --> 00:09:15,520
‫Langsung saja kita ambil URL-nya

184
00:09:15,520 --> 00:09:18,413
‫di sini, agar tidak kehilangan waktu lagi.

185
00:09:19,840 --> 00:09:23,693
‫Lalu ini dia api/v1/bookings.

186
00:09:26,550 --> 00:09:27,993
‫Kemudian periksa sesi.

187
00:09:30,360 --> 00:09:32,273
‫Dan kemudian id tur.

188
00:09:33,690 --> 00:09:35,680
‫Jadi yang satu

189
00:09:35,680 --> 00:09:38,203
‫ini, yang akan mengalami disfungsi,

190
00:09:39,320 --> 00:09:40,153
‫oke?

191
00:09:41,440 --> 00:09:43,170
‫Dan mari kita lihat

192
00:09:43,170 --> 00:09:45,623
‫objek sesi ini di konsol kita,

193
00:09:46,630 --> 00:09:48,850
‫hanya untuk melihat apakah semuanya

194
00:09:48,850 --> 00:09:49,840
‫berfungsi, oke?

195
00:09:49,840 --> 00:09:52,490
‫Jadi sekarang di index. js kita pada

196
00:09:52,490 --> 00:09:56,013
‫dasarnya akan menghubungkan tombol hijau dengan disfungsi yang baru saja

197
00:09:56,013 --> 00:09:59,263
‫kita buat di dalam stripe. js.

198
00:10:01,650 --> 00:10:02,633
‫Jadi impor.

199
00:10:05,330 --> 00:10:08,097
‫Pesan tur dari stripe.

200
00:10:11,760 --> 00:10:16,323
‫Kemudian seperti biasa mari kita pilih elemen kita dari halaman web.

201
00:10:18,240 --> 00:10:23,213
‫Jadi tombol buku adalah = untuk mendokumentasikan. dapatkan elemen dengan ID, dan ID

202
00:10:24,290 --> 00:10:26,313
‫yang diingat adalah, tur buku

203
00:10:28,680 --> 00:10:30,423
‫yang saya yakini.

204
00:10:31,450 --> 00:10:32,390
‫Jadi ya,

205
00:10:32,390 --> 00:10:35,623
‫jadi itu ID yang baru saja kami tambahkan sebelum ID buku.

206
00:10:39,770 --> 00:10:43,023
‫Jadi sekarang kita bisa menambahkan event handler itu ke dalamnya.

207
00:10:44,800 --> 00:10:48,047
‫Jadi jika ada tombol buku, maka

208
00:10:49,986 --> 00:10:52,486
‫bookBtn. addeventlistener, menunggu

209
00:10:55,430 --> 00:10:57,310
‫klik maka kita membutuhkan acaranya

210
00:10:57,310 --> 00:10:59,720
‫juga, dan sekarang kita perlu mendapatkan

211
00:10:59,720 --> 00:11:02,990
‫ID tur itu dari tombol itu, Jadi itu tourid

212
00:11:02,990 --> 00:11:05,170
‫=, dan sekarang ketika saya coret

213
00:11:08,820 --> 00:11:12,230
‫di sini yaitu e. target, dan

214
00:11:12,230 --> 00:11:14,170
‫mungkin Anda sudah familiar

215
00:11:14,170 --> 00:11:18,860
‫dengan itu, jadi acara. target pada dasarnya adalah elemen

216
00:11:18,860 --> 00:11:21,700
‫yang diklik, jadi yang memicu event listener

217
00:11:21,700 --> 00:11:23,530
‫ini dipecat, oke?

218
00:11:23,530 --> 00:11:26,273
‫Dan tentu saja itu adalah tombol ini.

219
00:11:27,910 --> 00:11:30,210
‫Kemudian di sana kami memiliki ID

220
00:11:30,210 --> 00:11:31,400
‫tur, dan

221
00:11:31,400 --> 00:11:33,573
‫dalam JavaScript, itu sebenarnya akan disebut

222
00:11:35,270 --> 00:11:37,860
‫tur, jadi seperti ini biarkan saya menulisnya.

223
00:11:37,860 --> 00:11:39,420
‫Jadi ID tur, jadi

224
00:11:39,420 --> 00:11:40,750
‫setiap kali ada

225
00:11:40,750 --> 00:11:42,640
‫-, itu akan secara otomatis

226
00:11:42,640 --> 00:11:44,363
‫dikonversi ke notasi CamelCase ini.

227
00:11:46,040 --> 00:11:47,100
‫Oke?

228
00:11:47,100 --> 00:11:51,297
‫Jadi e. target. Himpunan data. wisata.

229
00:11:53,820 --> 00:11:57,660
‫Tapi sekarang karena nama ini persis sama dengan yang ini,

230
00:11:57,660 --> 00:11:59,793
‫kita cukup menggunakan strukturnya.

231
00:12:02,700 --> 00:12:05,313
‫Jadi sekali lagi gunakan trik bagus ini.

232
00:12:07,630 --> 00:12:12,203
‫Dan kemudian kami menyebut tur buku dengan ID tur itu.

233
00:12:13,400 --> 00:12:15,470
‫Dan hal menyenangkan lainnya yang dapat

234
00:12:15,470 --> 00:12:18,140
‫kita lakukan di sini, adalah mengubah teks

235
00:12:18,140 --> 00:12:20,920
‫tombol menjadi sesuatu seperti pemrosesan, jadi mari kita

236
00:12:20,920 --> 00:12:24,230
‫lakukan lagi e. target.

237
00:12:24,230 --> 00:12:26,960
‫Jadi sekali lagi elemen yang diklik,

238
00:12:26,960 --> 00:12:30,190
‫itulah tombolnya. textcontent yang

239
00:12:30,190 --> 00:12:33,070
‫kita gunakan sebelum mendengar, jadi

240
00:12:33,070 --> 00:12:35,450
‫untuk mengubah teks dalam

241
00:12:35,450 --> 00:12:40,310
‫suatu elemen, dan mari kita ubah itu ke pemrosesan,

242
00:12:40,310 --> 00:12:41,143
‫oke?

243
00:12:41,143 --> 00:12:41,976
‫Jadi dengan

244
00:12:41,976 --> 00:12:45,190
‫ini saya pikir kita memiliki semuanya terhubung dengan benar.

245
00:12:45,190 --> 00:12:46,680
‫Jadi kita klik tombol

246
00:12:46,680 --> 00:12:49,840
‫itu, lalu kita ubah teks pada tombol itu,

247
00:12:49,840 --> 00:12:52,110
‫lalu kita dapatkan ID tur

248
00:12:52,110 --> 00:12:54,570
‫dari atribut data yang ada di

249
00:12:54,570 --> 00:12:58,170
‫tombol itu, dan panggil buku tur dengan ID itu,

250
00:12:58,170 --> 00:12:59,003
‫oke?

251
00:12:59,003 --> 00:13:02,143
‫Dan ID itu kemudian akan diteruskan ke URL

252
00:13:03,000 --> 00:13:06,520
‫ini, yang pada gilirannya akan mengembalikan sesi checkout,

253
00:13:06,520 --> 00:13:07,353
‫oke?

254
00:13:07,353 --> 00:13:09,243
‫Dan kemudian di sini kita akan melihat

255
00:13:10,450 --> 00:13:11,620
‫itu, seperti ini.

256
00:13:11,620 --> 00:13:14,010
‫Sekarang pada titik ini kita

257
00:13:14,010 --> 00:13:16,770
‫tidak akan membuat formulir checkout dulu, jadi

258
00:13:16,770 --> 00:13:20,133
‫kita akan meninggalkannya untuk langkah terakhir dari video ini.

259
00:13:21,400 --> 00:13:23,950
‫Tapi untuk saat ini saya ingin melihat

260
00:13:23,950 --> 00:13:25,330
‫ini, mari

261
00:13:25,330 --> 00:13:27,960
‫kita lihat apakah parcel masih berjalan di

262
00:13:27,960 --> 00:13:30,370
‫sini di latar belakang, jadi gabungkan

263
00:13:30,370 --> 00:13:32,030
‫semua skrip kita bersama-sama,

264
00:13:32,030 --> 00:13:35,823
‫dan sepertinya memang begitu, jadi mari kita tidak benar-benar mengujinya.

265
00:13:37,320 --> 00:13:38,830
‫Jadi kita sudah login,

266
00:13:38,830 --> 00:13:40,603
‫sekarang mari kita coba Park Camper.

267
00:13:42,740 --> 00:13:45,793
‫Di bawah sini, klik tombol ini.

268
00:13:47,120 --> 00:13:50,240
‫Dan sepertinya kita tidak mendapatkan error apapun, jadi

269
00:13:50,240 --> 00:13:52,070
‫itu bagus, sekarang mari

270
00:13:52,070 --> 00:13:54,073
‫kita lihat console kita, dan

271
00:13:54,970 --> 00:13:57,230
‫kita memiliki sebuah objek, dan

272
00:13:57,230 --> 00:14:00,350
‫itulah hasil dari pemanggilan axios ini, jadi axios

273
00:14:00,350 --> 00:14:03,140
‫selalu membuat objek seperti ini , di

274
00:14:03,140 --> 00:14:06,560
‫mana di dalamnya ada objek yang disebut data, yang

275
00:14:06,560 --> 00:14:08,230
‫merupakan respons aktual.

276
00:14:08,230 --> 00:14:11,623
‫Jadi di sini Anda melihat bahwa kami memang memiliki sesi kami.

277
00:14:12,830 --> 00:14:15,330
‫Jadi Anda lihat kami memiliki email

278
00:14:15,330 --> 00:14:18,090
‫pelanggan, kami memiliki ID tur saat ini,

279
00:14:18,090 --> 00:14:22,138
‫kami memiliki sekarang mari kita lihat apakah kami punya, (bergumam) Jadi

280
00:14:22,138 --> 00:14:23,100
‫di sini

281
00:14:23,100 --> 00:14:25,653
‫kami memiliki beberapa data tentang tur.

282
00:14:26,670 --> 00:14:29,953
‫Dan sekarang semuanya terlihat benar di sini.

283
00:14:31,240 --> 00:14:32,610
‫Baik?

284
00:14:32,610 --> 00:14:34,290
‫Jadi mari kita tutup

285
00:14:34,290 --> 00:14:36,070
‫itu, dan sekarang sebagai langkah

286
00:14:36,070 --> 00:14:39,310
‫terakhir, mari kita membuat formulir checkout pada dasarnya, dan

287
00:14:39,310 --> 00:14:40,893
‫menagih kartu kredit.

288
00:14:44,950 --> 00:14:46,250
‫Baik?

289
00:14:46,250 --> 00:14:48,650
‫Dan sebenarnya mari kita juga membungkus semua ini

290
00:14:48,650 --> 00:14:51,043
‫di sini menjadi blok try catch.

291
00:14:52,080 --> 00:14:55,750
‫Karena tentu saja kami memiliki beberapa panggilan asinkron di sini, dan keduanya

292
00:14:55,750 --> 00:14:57,830
‫memiliki satu panggilan lagi dalam satu

293
00:14:57,830 --> 00:15:00,000
‫detik, jadi ini adalah praktik yang baik.

294
00:15:00,000 --> 00:15:01,603
‫Untuk mencoba menangkap blok.

295
00:15:04,750 --> 00:15:05,610
‫Baik?

296
00:15:05,610 --> 00:15:09,613
‫Tapi jangan buang banyak waktu dengan kesalahan ini.

297
00:15:11,790 --> 00:15:14,590
‫Tapi saya masih akan menunjukkan peringatan

298
00:15:14,590 --> 00:15:16,010
‫sebenarnya jika ada

299
00:15:16,010 --> 00:15:18,870
‫kesalahan, jadi misalnya dengan panggilan API ini,

300
00:15:18,870 --> 00:15:19,703
‫oke?

301
00:15:19,703 --> 00:15:21,460
‫Sehingga pengguna pada dasarnya dapat melihat

302
00:15:21,460 --> 00:15:22,993
‫ada yang tidak beres.

303
00:15:24,500 --> 00:15:29,063
‫Jadi mari kita ambil impor lansiran ini.

304
00:15:31,530 --> 00:15:32,600
‫Baik?

305
00:15:32,600 --> 00:15:35,633
‫Dan kemudian katakan Show alert, tentukan

306
00:15:38,000 --> 00:15:40,630
‫bahwa itu adalah kesalahan, dan

307
00:15:40,630 --> 00:15:44,940
‫kemudian hanya kesalahan itu sendiri sebagai pesan pada dasarnya.

308
00:15:44,940 --> 00:15:46,250
‫Baik?

309
00:15:46,250 --> 00:15:49,220
‫Pokoknya untuk sekarang melakukan langkah terakhir ini,

310
00:15:49,220 --> 00:15:51,460
‫sebenarnya sangat, sangat sederhana, yang harus

311
00:15:51,460 --> 00:15:53,673
‫kita lakukan adalah menunggu.

312
00:15:56,060 --> 00:15:58,837
‫garis. redirectTocheck out,

313
00:16:02,950 --> 00:16:04,683
‫biarkan saya melihat apakah

314
00:16:06,360 --> 00:16:08,250
‫saya salah, dan biarkan saya

315
00:16:08,250 --> 00:16:11,700
‫melihat apakah saya benar, Jadi redirect untuk check out.

316
00:16:11,700 --> 00:16:12,630
‫Baik?

317
00:16:12,630 --> 00:16:15,560
‫Dan kemudian opsi tetapi hanya

318
00:16:15,560 --> 00:16:18,870
‫satu opsi, yaitu ID sesi, dan itu

319
00:16:18,870 --> 00:16:22,053
‫akan berasal dari sesi, dan ingat bagaimana

320
00:16:23,140 --> 00:16:26,280
‫sesi itu ada di dalam data, jadi

321
00:16:26,280 --> 00:16:30,140
‫ada objek data yang dibuat di sana oleh

322
00:16:30,140 --> 00:16:34,020
‫axios, ingat dan begitu maka semua respon itu sendiri.

323
00:16:34,020 --> 00:16:37,793
‫Dan di sana kita memiliki sesi. Indo.

324
00:16:38,810 --> 00:16:40,430
‫Dan hanya itu,

325
00:16:40,430 --> 00:16:41,540
‫oke?

326
00:16:41,540 --> 00:16:44,210
‫Dan sekarang datang bagian terbesar

327
00:16:44,210 --> 00:16:48,150
‫dari semuanya, yaitu untuk benar-benar memeriksa apakah ini berhasil.

328
00:16:48,150 --> 00:16:50,620
‫Jadi kita masih login, ayo sekali

329
00:16:50,620 --> 00:16:52,793
‫lagi kita memuat ini.

330
00:16:54,470 --> 00:16:57,343
‫Klik tombol dan sekarang tunggu.

331
00:16:59,220 --> 00:17:02,810
‫Dan memang kami sampai ke halaman checkout kami, dan juga

332
00:17:02,810 --> 00:17:05,590
‫kami mendapatkan gambar yang bagus di sini,

333
00:17:05,590 --> 00:17:08,540
‫kami mendapatkan semua logo Alam di sini, kami

334
00:17:08,540 --> 00:17:10,560
‫mendapatkan di sini semua ikon,

335
00:17:10,560 --> 00:17:13,270
‫jadi semua barang yang kami tentukan sebelumnya,

336
00:17:13,270 --> 00:17:15,710
‫kami memiliki harga yang juga kami tentukan

337
00:17:15,710 --> 00:17:17,540
‫di kami sesi

338
00:17:17,540 --> 00:17:19,690
‫checkout, dan benar-benar semua detail lainnya.

339
00:17:19,690 --> 00:17:22,550
‫Jadi nama, ringkasan, dan tentu

340
00:17:22,550 --> 00:17:24,336
‫saja gambarnya.

341
00:17:24,336 --> 00:17:27,610
‫Itu benar-benar menakjubkan, bukan?

342
00:17:27,610 --> 00:17:31,230
‫Kemudian di sini hal hebat lainnya yang saya sebutkan sebelumnya,

343
00:17:31,230 --> 00:17:32,690
‫adalah bahwa alamat

344
00:17:32,690 --> 00:17:35,100
‫email sudah terisi secara otomatis, jadi

345
00:17:35,100 --> 00:17:37,463
‫itu fitur lain yang sangat bagus.

346
00:17:38,560 --> 00:17:40,380
‫Dan sekarang di sini

347
00:17:40,380 --> 00:17:43,250
‫yang perlu kita lakukan adalah memasukkan informasi kartu

348
00:17:43,250 --> 00:17:46,410
‫kredit ini, dan jadi kita garis ketika kita menguji

349
00:17:46,410 --> 00:17:49,640
‫nomor kartu kredit hanya empat dua empat dua empat dua

350
00:17:49,640 --> 00:17:52,970
‫empat dua , dan seterusnya sampai kita selesai , baik?

351
00:17:52,970 --> 00:17:55,850
‫Lalu di sini setiap bulan dan tahun bekerja, Jadi

352
00:17:55,850 --> 00:17:58,290
‫mari kita taruh dua dua dua.

353
00:17:58,290 --> 00:18:01,060
‫Jadi apa pun di masa depan, oke?

354
00:18:01,060 --> 00:18:05,600
‫Jadi jika Anda menonton kursus ini setelah Februari 2022, maka

355
00:18:05,600 --> 00:18:08,120
‫tanggal ini tidak akan berfungsi,

356
00:18:08,120 --> 00:18:09,973
‫jadi taruh saja nanti,

357
00:18:11,510 --> 00:18:12,343
‫oke?

358
00:18:12,343 --> 00:18:14,530
‫Sampai nomor apa pun berfungsi dengan

359
00:18:14,530 --> 00:18:16,667
‫baik, di sini nama apa

360
00:18:16,667 --> 00:18:18,580
‫pun juga berfungsi, sebut

361
00:18:18,580 --> 00:18:22,000
‫saja Laura, negara tentu saja juga tidak terlalu penting,

362
00:18:22,000 --> 00:18:25,390
‫orang-orang secara otomatis mengisi berdasarkan lokasi IP Anda, jadi

363
00:18:25,390 --> 00:18:26,580
‫saya di

364
00:18:26,580 --> 00:18:29,240
‫Portugal, dan seterusnya itulah yang saya dapatkan.

365
00:18:29,240 --> 00:18:32,080
‫Dan sekarang Anda melihat tombol hijau yang bagus di

366
00:18:32,080 --> 00:18:34,100
‫sini, dan ini memiliki efek yang

367
00:18:34,100 --> 00:18:35,500
‫bagus, dan sekarang ketika

368
00:18:36,870 --> 00:18:39,400
‫kita mengkliknya, itu sedang diproses dan kita selesai.

369
00:18:39,400 --> 00:18:43,281
‫Hebat, lalu ini sebenarnya URL sukses yang juga

370
00:18:43,281 --> 00:18:46,880
‫kami tentukan di sesi checkout kami, bukan?

371
00:18:46,880 --> 00:18:48,893
‫Jadi kami mendefinisikan bahwa,

372
00:18:50,390 --> 00:18:52,250
‫jika berhasil, kami

373
00:18:52,250 --> 00:18:54,697
‫kembali ke URL beranda ini.

374
00:18:55,863 --> 00:18:57,780
‫Dan kami akan mengubahnya di sini

375
00:18:57,780 --> 00:19:00,450
‫nanti, tetapi untuk saat ini, inilah yang benar-benar kami

376
00:19:00,450 --> 00:19:02,640
‫inginkan, dan itu bekerja dengan sangat baik.

377
00:19:02,640 --> 00:19:04,370
‫Setidaknya saya harap

378
00:19:04,370 --> 00:19:07,963
‫begitu, jadi mari kita lihat semua pembayaran sekarang.

379
00:19:10,270 --> 00:19:11,330
‫Dan memang,

380
00:19:11,330 --> 00:19:13,470
‫ini adalah yang baru saja kami buat.

381
00:19:13,470 --> 00:19:15,890
‫Jadi kami berhasil menerima pembayaran ini tepat di

382
00:19:15,890 --> 00:19:17,193
‫akun kami sekarang.

383
00:19:19,810 --> 00:19:22,380
‫Jadi Anda melihat alamat email namanya,

384
00:19:22,380 --> 00:19:26,410
‫dan memang taman Camper Tour yang baru saja kami beli.

385
00:19:26,410 --> 00:19:28,423
‫Hebat, itu benar-benar luar biasa.

386
00:19:29,370 --> 00:19:32,990
‫Jadi di sini Anda dapat melihat biaya yang diambil stripe,

387
00:19:32,990 --> 00:19:35,830
‫jadi tentu saja mereka juga perlu menghasilkan uang,

388
00:19:35,830 --> 00:19:37,950
‫dan karena itu mereka mengambil

389
00:19:37,950 --> 00:19:42,440
‫potongan, yang menurut saya seperti 2. 9% atau semacamnya, Tapi tentu saja

390
00:19:42,440 --> 00:19:44,800
‫semua itu bisa Anda lihat di situs

391
00:19:44,800 --> 00:19:45,893
‫web mereka.

392
00:19:46,770 --> 00:19:49,690
‫Kemudian Anda juga mendapatkan metode pembayaran di sini, jadi data

393
00:19:49,690 --> 00:19:51,313
‫yang baru saja kita

394
00:19:52,480 --> 00:19:54,823
‫masukkan, dan Anda mendapatkan beberapa data bagus tentang

395
00:19:55,860 --> 00:19:59,763
‫sesi tersebut, dan mungkin dia juga harus muncul di sini di pelanggan Anda.

396
00:20:00,770 --> 00:20:04,180
‫Dan ya, memang di sinilah dia,

397
00:20:04,180 --> 00:20:06,260
‫Dan ya, saya

398
00:20:06,260 --> 00:20:09,033
‫pikir itu cukup berhasil sekarang.

399
00:20:10,880 --> 00:20:14,010
‫Oh dan hal lain yang saya lupa sebutkan

400
00:20:14,010 --> 00:20:16,580
‫adalah bahwa pengguna Anda sebenarnya juga akan

401
00:20:16,580 --> 00:20:18,600
‫mendapatkan email secara otomatis.

402
00:20:18,600 --> 00:20:22,510
‫Jadi saya pikir itu harus menjadi default di sini dalam

403
00:20:22,510 --> 00:20:24,540
‫tanda terima email, jadi buka

404
00:20:24,540 --> 00:20:27,160
‫tanda terima email pengaturan Anda, dan

405
00:20:27,160 --> 00:20:30,240
‫kemudian di sini Anda memiliki email pelanggan tentang

406
00:20:30,240 --> 00:20:31,920
‫pembayaran yang berhasil.

407
00:20:31,920 --> 00:20:34,080
‫Dan itu juga merupakan

408
00:20:34,080 --> 00:20:37,730
‫fitur yang sangat bagus, artinya kita tidak perlu mengirimkan

409
00:20:37,730 --> 00:20:41,580
‫email secara manual setiap kali pengguna berhasil membeli tur, oke?

410
00:20:41,580 --> 00:20:45,360
‫Jadi satu hal lagi yang diambil garis dari kita,

411
00:20:45,360 --> 00:20:50,000
‫Fantastis, jadi sekarang mari kita luangkan waktu sebentar untuk merangkum seluruh proses

412
00:20:50,000 --> 00:20:52,460
‫yang baru saja kita lalui.

413
00:20:52,460 --> 00:20:55,760
‫Jadi kami mulai dengan membuat sesi checkout

414
00:20:55,760 --> 00:20:58,440
‫ini, yang membutuhkan input ID tur,

415
00:20:58,440 --> 00:21:02,270
‫sehingga kami dapat menyimpan banyak detail tentang tur di

416
00:21:02,270 --> 00:21:03,840
‫sesi itu.

417
00:21:03,840 --> 00:21:05,684
‫Jadi hal-hal

418
00:21:05,684 --> 00:21:09,460
‫tentang nama tur, ringkasan juga gambar harga.

419
00:21:09,460 --> 00:21:11,610
‫Jadi semua hal yang ingin kami

420
00:21:11,610 --> 00:21:12,840
‫tampilkan di halaman

421
00:21:12,840 --> 00:21:14,970
‫checkout, tetapi juga di dasbor kami.

422
00:21:14,970 --> 00:21:17,750
‫Kemudian kami juga menyertakan email sehingga pengguna

423
00:21:17,750 --> 00:21:20,040
‫tidak perlu mengisinya di kasir, dan

424
00:21:20,040 --> 00:21:22,190
‫kemudian banyak data lainnya.

425
00:21:22,190 --> 00:21:24,760
‫Jadi ingat ID referensi klien ini, yang

426
00:21:24,760 --> 00:21:26,510
‫akan jauh lebih masuk

427
00:21:26,510 --> 00:21:28,443
‫akal setelah kita benar-benar menggunakannya.

428
00:21:29,610 --> 00:21:31,520
‫Jadi kami membuat sesi

429
00:21:32,500 --> 00:21:36,150
‫ini setiap kali seseorang membuka rute sesi periksa ini, oke?

430
00:21:36,150 --> 00:21:39,770
‫Dan itulah yang kemudian kami lakukan di ujung depan kami, di

431
00:21:39,770 --> 00:21:42,610
‫sini di garis. js.

432
00:21:42,610 --> 00:21:44,230
‫Jadi kami mendapatkan sesi kami

433
00:21:44,230 --> 00:21:46,930
‫di sini, dan kemudian dari sana kami membuat

434
00:21:46,930 --> 00:21:48,760
‫checkout, dan menagih kartu kredit

435
00:21:48,760 --> 00:21:51,017
‫menggunakan stripe. redirectTocheckout,

436
00:21:52,051 --> 00:21:53,560
‫dan objek stripe

437
00:21:53,560 --> 00:21:55,800
‫di sini hanya menggunakan perpustakaan

438
00:21:55,800 --> 00:21:58,240
‫stripe dengan kunci publik kami, oke?

439
00:21:58,240 --> 00:22:01,610
‫Sekarang dari mana ID tur ini berasal?

440
00:22:01,610 --> 00:22:04,500
‫Nah, itu disimpan di sini tepat di tombol

441
00:22:04,500 --> 00:22:07,050
‫tempat pengguna mengklik untuk memesan tur baru.

442
00:22:07,050 --> 00:22:10,770
‫ID itu kemudian dibaca di sini di index. js, setiap

443
00:22:10,770 --> 00:22:14,130
‫kali seseorang menekan tombol pemesanan, Oke?

444
00:22:14,130 --> 00:22:16,020
‫Jadi kami menyimpannya ke dalam

445
00:22:16,020 --> 00:22:17,940
‫ID tur, dan meneruskannya ke

446
00:22:17,940 --> 00:22:20,730
‫tur buku, yang sekali lagi merupakan fungsi ini

447
00:22:20,730 --> 00:22:23,410
‫di sini, yang benar-benar menangani pemrosesan pembayaran

448
00:22:23,410 --> 00:22:24,740
‫di ujung depan.

449
00:22:24,740 --> 00:22:26,450
‫Dan hasil dari semua ini

450
00:22:26,450 --> 00:22:27,960
‫adalah apa yang

451
00:22:27,960 --> 00:22:30,480
‫baru saja kita lihat sebelumnya di mana

452
00:22:30,480 --> 00:22:32,380
‫pengguna benar-benar mendapatkan tagihan kartu

453
00:22:32,380 --> 00:22:34,420
‫kredit, dan membeli tur, sangat sempurna.

454
00:22:34,420 --> 00:22:35,670
‫Sekarang apa yang

455
00:22:35,670 --> 00:22:38,440
‫hilang di sini adalah bahwa sebenarnya setiap kali

456
00:22:38,440 --> 00:22:42,540
‫ada pemesanan baru, kami ingin membuat dokumen pemesanan baru di database kami.

457
00:22:42,540 --> 00:22:45,060
‫Jadi seperti yang sudah kita bahas

458
00:22:45,060 --> 00:22:46,940
‫saat kita membicarakan semua

459
00:22:46,940 --> 00:22:49,420
‫model data di aplikasi ini, kan?

460
00:22:49,420 --> 00:22:51,090
‫Dan untuk itu, kita akan

461
00:22:51,090 --> 00:22:52,960
‫membuat model pemesanan tepat di video

462
00:22:52,960 --> 00:22:54,240
‫berikutnya , mengurutkannya

463
00:22:54,240 --> 00:22:55,250
‫setelah itu,

464
00:22:55,250 --> 00:22:56,970
‫kita kemudian dapat membuat tur

465
00:22:56,970 --> 00:22:59,193
‫baru setiap kali ada pembelian yang berhasil.