1
00:00:01,130 --> 00:00:03,770
‫Narator: Di bagian terakhir ini, kami

2
00:00:03,770 --> 00:00:06,160
‫sekarang akan menerima pembayaran

3
00:00:06,160 --> 00:00:08,770
‫kartu kredit di aplikasi kami menggunakan

4
00:00:08,770 --> 00:00:12,233
‫Stripe untuk memungkinkan pengguna kami benar-benar membeli tur.

5
00:00:14,080 --> 00:00:16,320
‫Jadi, mari kita buka tab baru di sini

6
00:00:18,160 --> 00:00:21,730
‫dan kemudian di sana buka strip. com.

7
00:00:21,730 --> 00:00:25,080
‫Jadi Stripe adalah platform perangkat lunak terbaik dan terpopuler

8
00:00:25,080 --> 00:00:27,910
‫dan juga paling mudah digunakan untuk

9
00:00:27,910 --> 00:00:30,810
‫mengintegrasikan pembayaran ke situs web mana pun.

10
00:00:30,810 --> 00:00:34,210
‫Dan masih banyak lagi tentang cara kerjanya nanti, tetapi

11
00:00:34,210 --> 00:00:38,040
‫untuk saat ini mari kita mulai dengan membuat akun gratis kita.

12
00:00:38,040 --> 00:00:40,540
‫Jadi klik di sini di akun

13
00:00:40,540 --> 00:00:43,303
‫gratis dan kemudian buka akun gratis Anda sendiri.

14
00:00:44,510 --> 00:00:46,810
‫Dan setelah Anda berhasil masuk,

15
00:00:46,810 --> 00:00:49,990
‫Anda akan melihat dasbor yang terlihat seperti ini.

16
00:00:49,990 --> 00:00:52,210
‫Jadi ketika Anda membuka akun baru,

17
00:00:52,210 --> 00:00:55,150
‫awalnya Anda akan selalu dalam mode uji coba.

18
00:00:55,150 --> 00:00:59,250
‫Jadi itulah yang dapat Anda lihat di sini dengan data pengujian ini.

19
00:00:59,250 --> 00:01:01,380
‫Sekarang, segera setelah Anda benar-benar

20
00:01:01,380 --> 00:01:04,250
‫ingin mulai menerima pembayaran nyata yang melibatkan

21
00:01:04,250 --> 00:01:07,530
‫uang nyata dari pelanggan nyata, Anda kemudian harus mengaktifkan

22
00:01:07,530 --> 00:01:08,960
‫akun Stripe Anda.

23
00:01:08,960 --> 00:01:11,350
‫Dan untuk itu, Anda kemudian

24
00:01:11,350 --> 00:01:14,220
‫harus memberi Stripe banyak data tentang bisnis Anda.

25
00:01:14,220 --> 00:01:15,580
‫Tapi tentu saja

26
00:01:15,580 --> 00:01:18,360
‫dalam proyek ini, kami tidak akan melakukan itu, jadi

27
00:01:18,360 --> 00:01:21,680
‫kami akan selalu bekerja dalam mode pengembangan pengujian semacam ini, oke?

28
00:01:21,680 --> 00:01:24,010
‫Tetapi sebaliknya, Anda cukup klik di

29
00:01:24,010 --> 00:01:26,940
‫sini untuk memulai atau mengaktifkan akun Anda di sini.

30
00:01:26,940 --> 00:01:29,980
‫Sekarang dasbor ini sangat mudah dan super intuitif

31
00:01:29,980 --> 00:01:31,890
‫untuk digunakan menurut saya.

32
00:01:31,890 --> 00:01:35,660
‫Jadi di sini Anda dapat melihat pembayaran Anda, yang sekali

33
00:01:35,660 --> 00:01:37,360
‫lagi sangat mudah, dan

34
00:01:37,360 --> 00:01:40,280
‫ingat bahwa ini semua adalah data pengujian.

35
00:01:40,280 --> 00:01:42,270
‫Jadi semua jumlah ini di sini,

36
00:01:42,270 --> 00:01:44,110
‫tentu saja, hanya jumlah palsu.

37
00:01:44,110 --> 00:01:46,460
‫Tapi bagaimanapun, Anda dapat melihat pelanggan Anda di

38
00:01:46,460 --> 00:01:48,463
‫sini, Anda dapat melihat jumlahnya.

39
00:01:49,490 --> 00:01:52,440
‫Dan ketika Anda membukanya, Anda mendapatkan lebih banyak

40
00:01:52,440 --> 00:01:55,670
‫informasi, seperti metode pembayaran di sini, jadi nomor kartu kreditnya.

41
00:01:55,670 --> 00:01:58,640
‫Dan omong-omong, kami sebenarnya tidak pernah mendapatkan akses

42
00:01:58,640 --> 00:02:01,420
‫ke nomor kartu kredit pelanggan yang sebenarnya.

43
00:02:01,420 --> 00:02:04,230
‫Jadi kita akan selalu melihat empat digit terakhir

44
00:02:04,230 --> 00:02:07,630
‫ini, tapi tidak pernah melihat nomor kartu kredit yang sebenarnya, oke?

45
00:02:07,630 --> 00:02:09,620
‫Kemudian Anda juga mendapatkan

46
00:02:09,620 --> 00:02:12,110
‫gambaran tentang apa yang sebenarnya dibeli.

47
00:02:12,110 --> 00:02:14,630
‫Jadi, misalnya, The Snow Adventurer Tour.

48
00:02:14,630 --> 00:02:16,360
‫Dan semua ini,

49
00:02:16,360 --> 00:02:18,410
‫tentu saja, sejak saya

50
00:02:18,410 --> 00:02:21,133
‫pertama kali membangun aplikasi Natours, oke?

51
00:02:22,000 --> 00:02:24,570
‫Jadi semua ini hanyalah pembelian percobaan.

52
00:02:24,570 --> 00:02:27,420
‫Kemudian kita juga bisa melihat seluruh saldo kita,

53
00:02:27,420 --> 00:02:30,150
‫jadi intinya semua uang yang kita terima.

54
00:02:30,150 --> 00:02:33,610
‫Dan sekali lagi, semua ini hanyalah data uji.

55
00:02:33,610 --> 00:02:37,060
‫Kemudian kami memiliki pelanggan kami dengan daftar semuanya.

56
00:02:37,060 --> 00:02:39,653
‫Dan, ya, semua ini bekerja dengan sangat baik.

57
00:02:40,650 --> 00:02:42,500
‫Sekarang sebelum kita dapat memulai,

58
00:02:42,500 --> 00:02:44,830
‫kita sebenarnya perlu menentukan beberapa pengaturan

59
00:02:44,830 --> 00:02:46,400
‫tentang akun kita.

60
00:02:46,400 --> 00:02:48,867
‫Jadi di akun baru Anda, Anda akan melihat

61
00:02:48,867 --> 00:02:52,120
‫sesuatu seperti "Akun Tanpa Nama", atau sesuatu seperti itu, di sini.

62
00:02:52,120 --> 00:02:55,740
‫Jadi, Anda juga harus memiliki, seperti ikon pena atau sesuatu

63
00:02:55,740 --> 00:02:59,010
‫di mana Anda dapat membuat nama untuk akun tersebut.

64
00:02:59,010 --> 00:03:02,160
‫Jadi tolong sebut itu "Natours" atau yang lainnya.

65
00:03:02,160 --> 00:03:04,700
‫Dan jika Anda memiliki lebih banyak

66
00:03:04,700 --> 00:03:08,690
‫bisnis, Anda dapat menambahkan satu akun untuk masing-masing bisnis ini, oke?

67
00:03:08,690 --> 00:03:11,510
‫Atau jika Anda tidak memiliki ikon pensil di

68
00:03:11,510 --> 00:03:13,220
‫sini, kami juga dapat

69
00:03:13,220 --> 00:03:15,570
‫pergi ke pengaturan, lalu informasi akun.

70
00:03:15,570 --> 00:03:18,030
‫Dan di sinilah Anda

71
00:03:18,030 --> 00:03:20,610
‫harus memasukkan nama bisnis semacam ini.

72
00:03:20,610 --> 00:03:23,150
‫Kami juga dapat menentukan beberapa pengaturan lain, jadi

73
00:03:23,150 --> 00:03:25,350
‫mari kita tentukan branding di sini, yang

74
00:03:25,350 --> 00:03:27,390
‫pada dasarnya akan membuat halaman Stripe

75
00:03:27,390 --> 00:03:29,233
‫Checkout cocok dengan merek kami.

76
00:03:30,470 --> 00:03:32,383
‫Jadi mari kita tambahkan gambar kita.

77
00:03:35,880 --> 00:03:39,850
‫Jadi publik, gambar, dan kemudian untuk ikon, mari gunakan

78
00:03:39,850 --> 00:03:41,163
‫yang ini.

79
00:03:43,830 --> 00:03:46,140
‫Dan kami juga dapat mengunggah

80
00:03:46,140 --> 00:03:49,033
‫logo, dan untuk itu, gunakan yang ini.

81
00:03:51,310 --> 00:03:53,913
‫Oh, dan sekarang kita membutuhkan kata sandi untuk melanjutkan.

82
00:03:56,220 --> 00:03:59,033
‫Dan sekarang mari kita juga mengubah warna kita di sini.

83
00:04:00,180 --> 00:04:03,640
‫Jadi cepat buka file CSS di depan umum dan

84
00:04:04,510 --> 00:04:07,150
‫temukan warna hijau khas kami, yang

85
00:04:07,150 --> 00:04:08,663
‫ini di sini.

86
00:04:12,000 --> 00:04:13,623
‫Jadi itu terlihat sedikit lebih baik.

87
00:04:15,570 --> 00:04:16,950
‫Sekarang mari kita simpan

88
00:04:19,200 --> 00:04:22,150
‫di sini dan dengan itu, kita siap untuk pergi.

89
00:04:22,150 --> 00:04:25,130
‫Selanjutnya, mari kita lihat kunci API kita.

90
00:04:25,130 --> 00:04:27,660
‫Jadi, klik di sini pada kunci API

91
00:04:27,660 --> 00:04:29,550
‫dan jika situs web

92
00:04:29,550 --> 00:04:31,690
‫terlihat sedikit berbeda saat Anda menonton

93
00:04:31,690 --> 00:04:35,113
‫video ini, mungkin kuncinya ada di sini di pengembang.

94
00:04:36,180 --> 00:04:41,180
‫Jadi di sini Anda juga memiliki sesuatu yang disebut kunci API, oke?

95
00:04:41,840 --> 00:04:45,860
‫Bagaimanapun, ada satu kunci yang dapat diterbitkan dan satu kunci rahasia.

96
00:04:45,860 --> 00:04:48,270
‫Jadi yang ini pada dasarnya adalah

97
00:04:48,270 --> 00:04:50,820
‫kunci publik yang bisa kita gunakan di

98
00:04:50,820 --> 00:04:54,430
‫front-end, dan kunci rahasia adalah kunci yang dibutuhkan di back-end.

99
00:04:54,430 --> 00:04:56,020
‫Dan lebih banyak lagi

100
00:04:56,020 --> 00:04:58,420
‫tentang itu setelah kita benar-benar mulai menerapkannya.

101
00:04:58,420 --> 00:05:00,310
‫Dan akhirnya,

102
00:05:00,310 --> 00:05:04,120
‫saya juga ingin melihat dokumentasinya bersama Anda.

103
00:05:04,120 --> 00:05:05,940
‫Dan itu sampai di sini,

104
00:05:05,940 --> 00:05:07,390
‫dan sebenarnya Stripe

105
00:05:07,390 --> 00:05:09,470
‫dikenal dengan dokumentasinya yang luar biasa.

106
00:05:09,470 --> 00:05:11,700
‫Sangat mudah untuk menemukan apa yang Anda

107
00:05:11,700 --> 00:05:13,170
‫cari dalam dokumentasi ini.

108
00:05:13,170 --> 00:05:15,470
‫Tapi tentu saja, ketika Anda baru

109
00:05:15,470 --> 00:05:17,740
‫memulai, maka sangat sulit untuk mengetahui

110
00:05:17,740 --> 00:05:19,830
‫apa yang Anda cari, bukan?

111
00:05:19,830 --> 00:05:21,550
‫Dan itulah mengapa

112
00:05:21,550 --> 00:05:25,270
‫kami menerapkan fitur pembayaran ini bersama-sama di sini, bukan?

113
00:05:25,270 --> 00:05:28,530
‫Jadi kami akan menggunakan fitur pembayaran Stripe dan

114
00:05:28,530 --> 00:05:31,000
‫mereka memiliki beberapa opsi berbeda.

115
00:05:31,000 --> 00:05:33,630
‫Sekarang di web, kita dapat menggunakan

116
00:05:33,630 --> 00:05:36,820
‫Stripe Checkout yang pada dasarnya menggunakan halaman Checkout preformatif.

117
00:05:36,820 --> 00:05:39,170
‫Jadi ini adalah salah satu yang

118
00:05:39,170 --> 00:05:41,800
‫akan kita gunakan, atau Anda juga dapat

119
00:05:41,800 --> 00:05:42,633
‫menggunakan elemen

120
00:05:42,633 --> 00:05:46,400
‫Stripe ketika Anda benar-benar ingin membangun pengalaman Checkout Anda sendiri, oke?

121
00:05:46,400 --> 00:05:48,640
‫Tapi kami hanya akan menggunakan Checkout ini

122
00:05:48,640 --> 00:05:50,110
‫yang sebenarnya baru

123
00:05:50,110 --> 00:05:52,633
‫dan benar-benar tahan masa depan pada saat ini.

124
00:05:53,990 --> 00:05:56,060
‫Jadi ini adalah dua opsi

125
00:05:56,060 --> 00:05:59,850
‫untuk web, tetapi Anda juga dapat membuat Stripe di iOS,

126
00:05:59,850 --> 00:06:01,563
‫Android, dan platform lainnya.

127
00:06:02,700 --> 00:06:05,840
‫Kemudian di Checkout, kita sebenarnya bisa

128
00:06:05,840 --> 00:06:10,223
‫menggunakannya hanya di klien atau bersama dengan server, oke?

129
00:06:11,070 --> 00:06:13,593
‫Jadi di sini ada beberapa perbandingan.

130
00:06:14,610 --> 00:06:17,600
‫Jadi ketika kita hanya menggunakannya di sisi klien, maka

131
00:06:17,600 --> 00:06:20,000
‫kita bahkan tidak membutuhkan server sama sekali.

132
00:06:20,000 --> 00:06:22,890
‫Tetapi cara menggunakan Stripe ini hanya, sungguh, untuk toko

133
00:06:22,890 --> 00:06:25,060
‫yang sangat, sangat kecil, jadi di

134
00:06:25,060 --> 00:06:27,600
‫mana Anda hanya memiliki beberapa produk yang

135
00:06:27,600 --> 00:06:29,420
‫tidak pernah mengubah harganya dan

136
00:06:29,420 --> 00:06:31,040
‫di mana Anda benar-benar

137
00:06:31,040 --> 00:06:34,730
‫harus menambahkan semua produk ini secara manual ke dasbor Stripe Anda.

138
00:06:34,730 --> 00:06:37,250
‫Jadi kami menginginkan sesuatu yang

139
00:06:37,250 --> 00:06:41,460
‫sedikit lebih kompleks dan untuk itu, kami menggunakan integrasi server, oke?

140
00:06:41,460 --> 00:06:43,160
‫Jadi, tentu saja kita

141
00:06:43,160 --> 00:06:45,010
‫masih perlu melakukan sesuatu di

142
00:06:45,010 --> 00:06:48,720
‫sisi klien, tetapi sebagian besar kode sebenarnya ada di sisi server.

143
00:06:48,720 --> 00:06:52,220
‫Oke, jadi Anda lihat ada banyak hal yang

144
00:06:52,220 --> 00:06:56,930
‫harus dilakukan dengan Stripe, dan kami bahkan bisa melakukan lebih banyak lagi.

145
00:06:56,930 --> 00:07:01,210
‫Jadi kami dapat memiliki penagihan di mana kami memiliki langganan di mana kami

146
00:07:01,210 --> 00:07:04,050
‫memiliki faktur dan semua hal bagus itu.

147
00:07:04,050 --> 00:07:06,040
‫Jadi sungguh, Anda dapat

148
00:07:06,040 --> 00:07:09,330
‫membangun bisnis besar di atas Stripe dan menerima langganan,

149
00:07:09,330 --> 00:07:11,350
‫menyimpan pelanggan ke database, dan

150
00:07:11,350 --> 00:07:13,543
‫semua yang terintegrasi ke dalam Stripe.

151
00:07:14,940 --> 00:07:16,850
‫Tapi sekali lagi, yang akan

152
00:07:16,850 --> 00:07:19,040
‫kita lakukan di sini hanyalah menggunakan

153
00:07:19,040 --> 00:07:21,090
‫Checkout, tetapi versi yang lebih lengkap

154
00:07:21,090 --> 00:07:22,963
‫dengan menggunakan server Checkout.

155
00:07:24,640 --> 00:07:27,130
‫Baiklah, tapi sekarang sebelum kita benar-benar

156
00:07:27,130 --> 00:07:29,690
‫mulai mengintegrasikan produk Stripe Checkout ke

157
00:07:29,690 --> 00:07:31,210
‫dalam aplikasi kita,

158
00:07:31,210 --> 00:07:34,353
‫saya hanya ingin dengan cepat menata seluruh alur

159
00:07:34,353 --> 00:07:37,920
‫kerja yang akan kita terapkan pada beberapa video berikutnya.

160
00:07:37,920 --> 00:07:40,200
‫Jadi semuanya dimulai di back-end

161
00:07:40,200 --> 00:07:42,850
‫di mana kita akan menerapkan rute untuk

162
00:07:42,850 --> 00:07:45,600
‫membuat apa yang disebut Sesi Checkout Stripe.

163
00:07:45,600 --> 00:07:48,170
‫Dan Sesi ini akan berisi

164
00:07:48,170 --> 00:07:50,970
‫banyak data tentang objek yang dapat dibeli.

165
00:07:50,970 --> 00:07:53,070
‫Dan dalam contoh kita, itulah turnya.

166
00:07:53,070 --> 00:07:55,480
‫Jadi Sesi akan berisi harga tur,

167
00:07:55,480 --> 00:07:59,640
‫nama tur, gambar produk, dan juga beberapa detail lainnya

168
00:07:59,640 --> 00:08:01,450
‫seperti email klien.

169
00:08:01,450 --> 00:08:04,530
‫Jadi kita akan melihat itu sebenarnya di video berikutnya.

170
00:08:04,530 --> 00:08:07,370
‫Kemudian, di front-end, kita akan membuat

171
00:08:07,370 --> 00:08:10,580
‫fungsi untuk meminta Sesi Checkout dari server

172
00:08:10,580 --> 00:08:13,120
‫setelah pengguna mengklik tombol beli.

173
00:08:13,120 --> 00:08:14,550
‫Jadi begitu kita mencapai

174
00:08:14,550 --> 00:08:16,350
‫titik akhir yang kita buat

175
00:08:16,350 --> 00:08:19,360
‫di back-end, itu akan membuat Sesi dan mengirimkannya

176
00:08:19,360 --> 00:08:20,720
‫kembali ke klien.

177
00:08:20,720 --> 00:08:22,590
‫Kemudian, berdasarkan Sesi itu,

178
00:08:22,590 --> 00:08:26,010
‫Stripe akan secara otomatis membuat halaman Checkout untuk kami

179
00:08:26,010 --> 00:08:28,640
‫di mana pengguna kemudian dapat memasukkan

180
00:08:28,640 --> 00:08:32,670
‫semua detail seperti nomor kartu kredit, tanggal kedaluwarsa, dan semua itu.

181
00:08:32,670 --> 00:08:34,760
‫Kemudian, sekali lagi, menggunakan The

182
00:08:34,760 --> 00:08:37,360
‫Session, kami akhirnya akan menagih kartu kredit.

183
00:08:37,360 --> 00:08:39,700
‫Dan untuk itu, kita akan membutuhkan kunci publik, jadi

184
00:08:39,700 --> 00:08:41,830
‫kunci yang baru saja kita lihat sebelumnya.

185
00:08:41,830 --> 00:08:44,270
‫Jadi kunci rahasia yang kita perlukan di

186
00:08:44,270 --> 00:08:46,330
‫server seperti yang akan Anda

187
00:08:46,330 --> 00:08:49,820
‫lihat di langkah pertama, dan kunci publik akan digunakan di front-end.

188
00:08:49,820 --> 00:08:51,730
‫Dan yang benar-benar penting untuk

189
00:08:51,730 --> 00:08:53,180
‫diperhatikan di sini

190
00:08:53,180 --> 00:08:54,930
‫adalah bahwa itu benar-benar Stripe,

191
00:08:54,930 --> 00:08:57,480
‫yang akan bersama dengan The Session, menagih

192
00:08:57,480 --> 00:09:00,720
‫kartu kredit, dan oleh karena itu, rincian kartu kredit bahkan

193
00:09:00,720 --> 00:09:03,800
‫tidak pernah mencapai server kami, yang membuat hidup kami

194
00:09:03,800 --> 00:09:05,870
‫sebagai pengembang jauh lebih mudah karena

195
00:09:05,870 --> 00:09:08,500
‫kemudian kita tidak harus berurusan dengan semua hal

196
00:09:08,500 --> 00:09:12,000
‫keamanan yang berhubungan dengan pengelolaan dan penyimpanan kartu kredit, oke?

197
00:09:12,000 --> 00:09:14,450
‫Jadi Stripe mengambil semua itu dari

198
00:09:14,450 --> 00:09:18,030
‫kami, pada dasarnya kami hanya menggunakan API mereka seperti ini.

199
00:09:18,030 --> 00:09:21,840
‫Bagaimanapun, setelah kartu kredit berhasil ditagih, kami kemudian dapat

200
00:09:21,840 --> 00:09:24,460
‫menggunakan sesuatu yang disebut Stripe

201
00:09:24,460 --> 00:09:28,210
‫Webhooks di back-end kami, untuk membuat pemesanan baru.

202
00:09:28,210 --> 00:09:30,090
‫Sekarang, bagian alur kerja ini

203
00:09:30,090 --> 00:09:32,710
‫hanya akan berfungsi untuk situs web yang

204
00:09:32,710 --> 00:09:35,900
‫diterapkan, jadi situs web yang sudah berjalan di server.

205
00:09:35,900 --> 00:09:37,770
‫Jadi, bagian dari

206
00:09:37,770 --> 00:09:39,690
‫alur kerja ini, kita hanya

207
00:09:39,690 --> 00:09:42,830
‫akan dapat menerapkannya pada akhir bagian berikutnya, oke?

208
00:09:42,830 --> 00:09:44,310
‫Tapi untuk saat ini,

209
00:09:44,310 --> 00:09:46,270
‫kita benar-benar akan menemukan solusi sementara

210
00:09:46,270 --> 00:09:47,770
‫untuk ini, yang tidak terlalu

211
00:09:47,770 --> 00:09:50,870
‫aman, tapi itu akan bekerja dengan baik untuk saat ini, oke?

212
00:09:50,870 --> 00:09:54,060
‫Jadi ingatlah diagram ini dan juga konsep bahwa

213
00:09:54,060 --> 00:09:57,410
‫kita sebenarnya menggunakan The Session untuk menagih kartu kredit

214
00:09:57,410 --> 00:09:59,940
‫dan kita tidak melakukannya secara langsung.

215
00:09:59,940 --> 00:10:01,803
‫Jadi, sampai jumpa di video berikutnya.