‫Instruktur: Dalam kuliah ini
‫kita akan belajar bagaimana memproses pembayaran
‫dengan stripe, di front-end setiap kali pengguna mengklik tombol.
‫Dan untuk memulai, mari kita benar-benar mengonfigurasi tombol
‫itu sehingga hanya muncul setiap kali pengguna
‫benar-benar masuk.
‫Jadi di sini, di
‫halaman detail tur, saat ini kami
‫memiliki pengguna yang masuk, dan tombol itu mengatakan tur buku
‫sekarang, tetapi seharusnya hanya seperti
‫ini ketika ada pengguna yang saat
‫ini masuk,
‫dan jika tidak, itu akan mengarahkan kami ke halaman login.
‫Oke?
‫Jadi mari kita terapkan itu dalam template tur.
‫Dan itu sebenarnya di sini, jadi
‫itu adalah tombol ini.
‫Baik?
‫Sekarang jika saat ini ada pengguna
‫yang masuk, maka itu berarti bahwa kami memiliki akses
‫ke variabel pengguna, dan kami dapat melakukannya jika pengguna lebih baik dari ini.
‫Dan jika tidak ada pengguna, jadi kita
‫hanya ingin menampilkan tombol, yang membawa kita
‫ke halaman login.
‫Jadi , login ke
‫tur buku, dan yang ini sebenarnya
‫adalah tautan, jadi
‫kita membutuhkan elemen A untuk jangkar.
‫Mari kita tentukan juga properti hf, yang lagi-lagi
‫akan mengarahkan kita ke halaman login,
‫oke?
‫Sekarang di sini kita juga perlu menambahkan ID,
‫memesan tur sehingga kita dapat memilihnya di JavaScript kita, dan juga sesuatu
‫yang sangat penting,
‫apakah kita harus meletakkan ID tur saat ini
‫di sini di elemen ini, Oke?
‫Sekarang mengapa itu begitu penting?
‫Nah ingat bagaimana endpoint API yang baru saja kita buat.
‫Jadi yang ini di sini membutuhkan ID tur, dan
‫ID tur itu harus datang dari suatu tempat pada dasarnya, dan sekarang
‫kami tidak memiliki informasi itu di mana
‫pun di halaman ini, jadi
‫kami akan meletakkannya di sini tepat di elemen
‫ini, jadi itu atau file JavaScript dapat mengambilnya
‫dari sini, dan
‫mengirimkannya bersama dengan permintaan ke rute sesi checkout, oke?
‫Jadi seperti yang kita lakukan di sini dengan
‫peta, kita akan menggunakan atribut data, dan
‫itulah data-, dan pada
‫dasarnya apa pun nama variabel yang ingin
‫kita definisikan.
‫Dan itulah id tur dalam kasus ini.
‫Jadi tur. id, oke?
‫Jadi berikan ke
‫brankas, dan mari kita coba sekarang.
‫Jadi muat ulang halaman, dan
‫pertama-tama mari kita
‫periksa untuk melihat apakah idenya benar-benar
‫ada, dan memang ini dia.
‫Dan sekarang jika kita logout.
‫Lalu mari kita lihat apa yang kita
‫miliki, dan memang sekarang tertulis,
‫login untuk memesan tur.
‫Hebat, dan mari kita lakukan itu sebenarnya.
‫Sekarang Oke?
‫Jadi sekarang mari kita buat skrip di mana
‫kita akan benar-benar melakukan permintaan,
‫dan memproses pembayaran di front end.
‫Dan seperti sebelumnya itu akan di depan umum, dan
‫kemudian JavaScript.
‫Jadi satu skrip lagi di sini.
‫Dan aku akan menyebutnya stripe. js.
‫Dan sekarang di sini kita
‫sebenarnya membutuhkan akses ke perpustakaan stripe lagi, tetapi
‫paket yang baru saja kita instal sebelumnya,
‫jadi ingat paket MPM stripe yang kita gunakan di sini.
‫Jadi yang ini hanya berfungsi untuk bagian belakang,
‫dan yang perlu kita lakukan
‫di bagian depan adalah memasukkan skrip ke dalam HTML, dan karena
‫kita hanya membutuhkan skrip itu di sini di halaman tur,
‫kita akan melakukannya seperti kita lakukan dengan skrip kotak peta.
‫Jadi yang ini,
‫kita taruh di sini di blok kepala ini,
‫oke?
‫Sekarang skrip mana yang sebenarnya kita butuhkan?
‫Nah itu yang bisa kita dapatkan dari dokumentasi
‫yang sudah kita lihat
‫sebelumnya, dan saya harap Anda tidak menutupnya, oke?
‫Dan sekali lagi yang ini di sini menjelaskan bagaimana
‫kami menggunakan produk checkout baik di
‫klien maupun di server.
‫Jadi di sini kita melihat bahwa
‫kita memiliki dua langkah, pertama membuat sesi checkout di
‫server, dan ini sangat
‫mirip dengan apa yang kita lakukan sebelumnya di
‫video terakhir, dan sekarang kita juga perlu menambahkannya ke front end kita.
‫Dan skrip yang kita butuhkan adalah yang ini, oke?
‫Jadi mari kita salin itu dan mari kita kembali.
‫Dan sekarang kita perlu menyesuaikan ini sedikit.
‫Sekarang kan?
‫Jadi ini adalah mengekspos objek strip ke lingkup global, dan
‫sekarang dalam file ini kita dapat menggunakannya.
‫Jadi kita
‫katakan, const stripe =, dan
‫kemudian ini adalah objek yang
‫kita dapatkan dari skrip yang baru saja kita
‫sertakan, dan kemudian di sini kita memerlukan kunci publik kita, oke?
‫Jadi kita sudah menggunakan kunci rahasia kita
‫di backend, sekarang saatnya menggunakan kunci publik kita.
‫Jadi mari kembali ke dasbor, dan sebenarnya
‫jika Anda berada di dokumentasi, itu
‫akan muncul di sini untuk Anda, jadi
‫ini adalah fitur yang
‫sangat bagus dari dokumentasi stripe.
‫Jadi setiap kali
‫Anda masuk, maka kunci yang Anda
‫miliki di sini sebenarnya adalah kunci publik Anda.
‫Tetapi jika Anda tidak berada di
‫halaman itu, tentu saja Anda juga bisa mendapatkan
‫kunci API Anda dengan membuka beranda,
‫atau halaman pengembang, mari kita
‫coba yang itu.
‫Kemudian di sini, di
‫kunci API, Anda memiliki kunci uji publik di sini.
‫Jadi ambil itu, lalu
‫mari kita kembali dan menyebarkannya di sini.
‫Dan seperti sebelumnya,
‫saya ingin menonaktifkan eslint dengan cepat di sini.
‫Oke?
‫Dan sekarang mari kita akhirnya membuat sebuah fungsi, yang
‫akan saya sebut tur buku.
‫Oke?
‫Jadi fungsi ini akan mengambil ID tur.
‫Jadi ID tur adalah yang akan datang
‫langsung dari antarmuka pengguna ini.
‫Jadi langsung dari sini, oke?
‫Jadi seperti sebelumnya,
‫kita akan mendapatkannya dari index. js di
‫mana kita juga akan menyebut buku ini Tour,
‫oke?
‫Jadi sangat mirip dengan apa yang kami lakukan sebelumnya.
‫Bagaimanapun, sekarang mari kita tentukan sekali lagi langkah-langkah yang
‫akan kita ambil di sini.
‫Jadi langkah pertama adalah benar-benar
‫mendapatkan sesi dari
‫server, dan dari situlah sekarang rute ini masuk, Oke?
‫Jadi ini adalah titik di mana kita akan
‫menggunakan titik akhir ini untuk benar-benar membawa sesi checkout
‫kita ke sisi klien.
‫Oke?
‫Jadi periksa sesi.
‫Dari titik akhir atau dari API itu tidak terlalu penting.
‫Itu dilakukan
‫sebagai langkah kedua, kita
‫akan menggunakan objek stripe kita pada dasarnya secara otomatis membuat
‫formulir checkout, + proses atau katakanlah +
‫biaya, kartu kredit untuk kita, Oke?
‫Dan itu sebenarnya,
‫jadi hanya dua langkah sederhana,
‫dan Anda akan melihat bahwa itu sebenarnya cukup sederhana.
‫Jadi mari kita simpan sesi ke dalam variabel yang disebut sesi.
‫Dan kemudian kita akan menunggu permintaan HTTP, yang sekali
‫lagi akan kita lakukan dengan axios.
‫Baik?
‫Jadi saya harus mengambilnya di sini.
‫Jadi impor aksio, dan
‫sekali lagi saya menggunakan sintaks modul ES6.
‫Ingat
‫itu, dari axios.
‫Jadi seperti yang kita lakukan misalnya di login,
‫atau di update setting, kan?
‫Sekarang kita juga perlu menandai fungsi ini di sini sebagai async.
‫Oke?
‫Dan kemudian ke
‫aksioma, kita cukup meneruskan URL, ketika
‫yang ingin kita lakukan hanyalah permintaan GET sederhana.
‫Oke?
‫Jadi
‫sampai saat ini kami selalu menentukan
‫metode, dan URL dan data, tapi
‫sekarang kami hanya melakukan permintaan GET,
‫dan itu jauh lebih sederhana.
‫Langsung saja kita ambil URL-nya
‫di sini, agar tidak kehilangan waktu lagi.
‫Lalu ini dia api/v1/bookings.
‫Kemudian periksa sesi.
‫Dan kemudian id tur.
‫Jadi yang satu
‫ini, yang akan mengalami disfungsi,
‫oke?
‫Dan mari kita lihat
‫objek sesi ini di konsol kita,
‫hanya untuk melihat apakah semuanya
‫berfungsi, oke?
‫Jadi sekarang di index. js kita pada
‫dasarnya akan menghubungkan tombol hijau dengan disfungsi yang baru saja
‫kita buat di dalam stripe. js.
‫Jadi impor.
‫Pesan tur dari stripe.
‫Kemudian seperti biasa mari kita pilih elemen kita dari halaman web.
‫Jadi tombol buku adalah = untuk mendokumentasikan. dapatkan elemen dengan ID, dan ID
‫yang diingat adalah, tur buku
‫yang saya yakini.
‫Jadi ya,
‫jadi itu ID yang baru saja kami tambahkan sebelum ID buku.
‫Jadi sekarang kita bisa menambahkan event handler itu ke dalamnya.
‫Jadi jika ada tombol buku, maka
‫bookBtn. addeventlistener, menunggu
‫klik maka kita membutuhkan acaranya
‫juga, dan sekarang kita perlu mendapatkan
‫ID tur itu dari tombol itu, Jadi itu tourid
‫=, dan sekarang ketika saya coret
‫di sini yaitu e. target, dan
‫mungkin Anda sudah familiar
‫dengan itu, jadi acara. target pada dasarnya adalah elemen
‫yang diklik, jadi yang memicu event listener
‫ini dipecat, oke?
‫Dan tentu saja itu adalah tombol ini.
‫Kemudian di sana kami memiliki ID
‫tur, dan
‫dalam JavaScript, itu sebenarnya akan disebut
‫tur, jadi seperti ini biarkan saya menulisnya.
‫Jadi ID tur, jadi
‫setiap kali ada
‫-, itu akan secara otomatis
‫dikonversi ke notasi CamelCase ini.
‫Oke?
‫Jadi e. target. Himpunan data. wisata.
‫Tapi sekarang karena nama ini persis sama dengan yang ini,
‫kita cukup menggunakan strukturnya.
‫Jadi sekali lagi gunakan trik bagus ini.
‫Dan kemudian kami menyebut tur buku dengan ID tur itu.
‫Dan hal menyenangkan lainnya yang dapat
‫kita lakukan di sini, adalah mengubah teks
‫tombol menjadi sesuatu seperti pemrosesan, jadi mari kita
‫lakukan lagi e. target.
‫Jadi sekali lagi elemen yang diklik,
‫itulah tombolnya. textcontent yang
‫kita gunakan sebelum mendengar, jadi
‫untuk mengubah teks dalam
‫suatu elemen, dan mari kita ubah itu ke pemrosesan,
‫oke?
‫Jadi dengan
‫ini saya pikir kita memiliki semuanya terhubung dengan benar.
‫Jadi kita klik tombol
‫itu, lalu kita ubah teks pada tombol itu,
‫lalu kita dapatkan ID tur
‫dari atribut data yang ada di
‫tombol itu, dan panggil buku tur dengan ID itu,
‫oke?
‫Dan ID itu kemudian akan diteruskan ke URL
‫ini, yang pada gilirannya akan mengembalikan sesi checkout,
‫oke?
‫Dan kemudian di sini kita akan melihat
‫itu, seperti ini.
‫Sekarang pada titik ini kita
‫tidak akan membuat formulir checkout dulu, jadi
‫kita akan meninggalkannya untuk langkah terakhir dari video ini.
‫Tapi untuk saat ini saya ingin melihat
‫ini, mari
‫kita lihat apakah parcel masih berjalan di
‫sini di latar belakang, jadi gabungkan
‫semua skrip kita bersama-sama,
‫dan sepertinya memang begitu, jadi mari kita tidak benar-benar mengujinya.
‫Jadi kita sudah login,
‫sekarang mari kita coba Park Camper.
‫Di bawah sini, klik tombol ini.
‫Dan sepertinya kita tidak mendapatkan error apapun, jadi
‫itu bagus, sekarang mari
‫kita lihat console kita, dan
‫kita memiliki sebuah objek, dan
‫itulah hasil dari pemanggilan axios ini, jadi axios
‫selalu membuat objek seperti ini , di
‫mana di dalamnya ada objek yang disebut data, yang
‫merupakan respons aktual.
‫Jadi di sini Anda melihat bahwa kami memang memiliki sesi kami.
‫Jadi Anda lihat kami memiliki email
‫pelanggan, kami memiliki ID tur saat ini,
‫kami memiliki sekarang mari kita lihat apakah kami punya, (bergumam) Jadi
‫di sini
‫kami memiliki beberapa data tentang tur.
‫Dan sekarang semuanya terlihat benar di sini.
‫Baik?
‫Jadi mari kita tutup
‫itu, dan sekarang sebagai langkah
‫terakhir, mari kita membuat formulir checkout pada dasarnya, dan
‫menagih kartu kredit.
‫Baik?
‫Dan sebenarnya mari kita juga membungkus semua ini
‫di sini menjadi blok try catch.
‫Karena tentu saja kami memiliki beberapa panggilan asinkron di sini, dan keduanya
‫memiliki satu panggilan lagi dalam satu
‫detik, jadi ini adalah praktik yang baik.
‫Untuk mencoba menangkap blok.
‫Baik?
‫Tapi jangan buang banyak waktu dengan kesalahan ini.
‫Tapi saya masih akan menunjukkan peringatan
‫sebenarnya jika ada
‫kesalahan, jadi misalnya dengan panggilan API ini,
‫oke?
‫Sehingga pengguna pada dasarnya dapat melihat
‫ada yang tidak beres.
‫Jadi mari kita ambil impor lansiran ini.
‫Baik?
‫Dan kemudian katakan Show alert, tentukan
‫bahwa itu adalah kesalahan, dan
‫kemudian hanya kesalahan itu sendiri sebagai pesan pada dasarnya.
‫Baik?
‫Pokoknya untuk sekarang melakukan langkah terakhir ini,
‫sebenarnya sangat, sangat sederhana, yang harus
‫kita lakukan adalah menunggu.
‫garis. redirectTocheck out,
‫biarkan saya melihat apakah
‫saya salah, dan biarkan saya
‫melihat apakah saya benar, Jadi redirect untuk check out.
‫Baik?
‫Dan kemudian opsi tetapi hanya
‫satu opsi, yaitu ID sesi, dan itu
‫akan berasal dari sesi, dan ingat bagaimana
‫sesi itu ada di dalam data, jadi
‫ada objek data yang dibuat di sana oleh
‫axios, ingat dan begitu maka semua respon itu sendiri.
‫Dan di sana kita memiliki sesi. Indo.
‫Dan hanya itu,
‫oke?
‫Dan sekarang datang bagian terbesar
‫dari semuanya, yaitu untuk benar-benar memeriksa apakah ini berhasil.
‫Jadi kita masih login, ayo sekali
‫lagi kita memuat ini.
‫Klik tombol dan sekarang tunggu.
‫Dan memang kami sampai ke halaman checkout kami, dan juga
‫kami mendapatkan gambar yang bagus di sini,
‫kami mendapatkan semua logo Alam di sini, kami
‫mendapatkan di sini semua ikon,
‫jadi semua barang yang kami tentukan sebelumnya,
‫kami memiliki harga yang juga kami tentukan
‫di kami sesi
‫checkout, dan benar-benar semua detail lainnya.
‫Jadi nama, ringkasan, dan tentu
‫saja gambarnya.
‫Itu benar-benar menakjubkan, bukan?
‫Kemudian di sini hal hebat lainnya yang saya sebutkan sebelumnya,
‫adalah bahwa alamat
‫email sudah terisi secara otomatis, jadi
‫itu fitur lain yang sangat bagus.
‫Dan sekarang di sini
‫yang perlu kita lakukan adalah memasukkan informasi kartu
‫kredit ini, dan jadi kita garis ketika kita menguji
‫nomor kartu kredit hanya empat dua empat dua empat dua
‫empat dua , dan seterusnya sampai kita selesai , baik?
‫Lalu di sini setiap bulan dan tahun bekerja, Jadi
‫mari kita taruh dua dua dua.
‫Jadi apa pun di masa depan, oke?
‫Jadi jika Anda menonton kursus ini setelah Februari 2022, maka
‫tanggal ini tidak akan berfungsi,
‫jadi taruh saja nanti,
‫oke?
‫Sampai nomor apa pun berfungsi dengan
‫baik, di sini nama apa
‫pun juga berfungsi, sebut
‫saja Laura, negara tentu saja juga tidak terlalu penting,
‫orang-orang secara otomatis mengisi berdasarkan lokasi IP Anda, jadi
‫saya di
‫Portugal, dan seterusnya itulah yang saya dapatkan.
‫Dan sekarang Anda melihat tombol hijau yang bagus di
‫sini, dan ini memiliki efek yang
‫bagus, dan sekarang ketika
‫kita mengkliknya, itu sedang diproses dan kita selesai.
‫Hebat, lalu ini sebenarnya URL sukses yang juga
‫kami tentukan di sesi checkout kami, bukan?
‫Jadi kami mendefinisikan bahwa,
‫jika berhasil, kami
‫kembali ke URL beranda ini.
‫Dan kami akan mengubahnya di sini
‫nanti, tetapi untuk saat ini, inilah yang benar-benar kami
‫inginkan, dan itu bekerja dengan sangat baik.
‫Setidaknya saya harap
‫begitu, jadi mari kita lihat semua pembayaran sekarang.
‫Dan memang,
‫ini adalah yang baru saja kami buat.
‫Jadi kami berhasil menerima pembayaran ini tepat di
‫akun kami sekarang.
‫Jadi Anda melihat alamat email namanya,
‫dan memang taman Camper Tour yang baru saja kami beli.
‫Hebat, itu benar-benar luar biasa.
‫Jadi di sini Anda dapat melihat biaya yang diambil stripe,
‫jadi tentu saja mereka juga perlu menghasilkan uang,
‫dan karena itu mereka mengambil
‫potongan, yang menurut saya seperti 2. 9% atau semacamnya, Tapi tentu saja
‫semua itu bisa Anda lihat di situs
‫web mereka.
‫Kemudian Anda juga mendapatkan metode pembayaran di sini, jadi data
‫yang baru saja kita
‫masukkan, dan Anda mendapatkan beberapa data bagus tentang
‫sesi tersebut, dan mungkin dia juga harus muncul di sini di pelanggan Anda.
‫Dan ya, memang di sinilah dia,
‫Dan ya, saya
‫pikir itu cukup berhasil sekarang.
‫Oh dan hal lain yang saya lupa sebutkan
‫adalah bahwa pengguna Anda sebenarnya juga akan
‫mendapatkan email secara otomatis.
‫Jadi saya pikir itu harus menjadi default di sini dalam
‫tanda terima email, jadi buka
‫tanda terima email pengaturan Anda, dan
‫kemudian di sini Anda memiliki email pelanggan tentang
‫pembayaran yang berhasil.
‫Dan itu juga merupakan
‫fitur yang sangat bagus, artinya kita tidak perlu mengirimkan
‫email secara manual setiap kali pengguna berhasil membeli tur, oke?
‫Jadi satu hal lagi yang diambil garis dari kita,
‫Fantastis, jadi sekarang mari kita luangkan waktu sebentar untuk merangkum seluruh proses
‫yang baru saja kita lalui.
‫Jadi kami mulai dengan membuat sesi checkout
‫ini, yang membutuhkan input ID tur,
‫sehingga kami dapat menyimpan banyak detail tentang tur di
‫sesi itu.
‫Jadi hal-hal
‫tentang nama tur, ringkasan juga gambar harga.
‫Jadi semua hal yang ingin kami
‫tampilkan di halaman
‫checkout, tetapi juga di dasbor kami.
‫Kemudian kami juga menyertakan email sehingga pengguna
‫tidak perlu mengisinya di kasir, dan
‫kemudian banyak data lainnya.
‫Jadi ingat ID referensi klien ini, yang
‫akan jauh lebih masuk
‫akal setelah kita benar-benar menggunakannya.
‫Jadi kami membuat sesi
‫ini setiap kali seseorang membuka rute sesi periksa ini, oke?
‫Dan itulah yang kemudian kami lakukan di ujung depan kami, di
‫sini di garis. js.
‫Jadi kami mendapatkan sesi kami
‫di sini, dan kemudian dari sana kami membuat
‫checkout, dan menagih kartu kredit
‫menggunakan stripe. redirectTocheckout,
‫dan objek stripe
‫di sini hanya menggunakan perpustakaan
‫stripe dengan kunci publik kami, oke?
‫Sekarang dari mana ID tur ini berasal?
‫Nah, itu disimpan di sini tepat di tombol
‫tempat pengguna mengklik untuk memesan tur baru.
‫ID itu kemudian dibaca di sini di index. js, setiap
‫kali seseorang menekan tombol pemesanan, Oke?
‫Jadi kami menyimpannya ke dalam
‫ID tur, dan meneruskannya ke
‫tur buku, yang sekali lagi merupakan fungsi ini
‫di sini, yang benar-benar menangani pemrosesan pembayaran
‫di ujung depan.
‫Dan hasil dari semua ini
‫adalah apa yang
‫baru saja kita lihat sebelumnya di mana
‫pengguna benar-benar mendapatkan tagihan kartu
‫kredit, dan membeli tur, sangat sempurna.
‫Sekarang apa yang
‫hilang di sini adalah bahwa sebenarnya setiap kali
‫ada pemesanan baru, kami ingin membuat dokumen pemesanan baru di database kami.
‫Jadi seperti yang sudah kita bahas
‫saat kita membicarakan semua
‫model data di aplikasi ini, kan?
‫Dan untuk itu, kita akan
‫membuat model pemesanan tepat di video
‫berikutnya , mengurutkannya
‫setelah itu,
‫kita kemudian dapat membuat tur
‫baru setiap kali ada pembelian yang berhasil.