‫Narator: Di bagian terakhir ini, kami
‫sekarang akan menerima pembayaran
‫kartu kredit di aplikasi kami menggunakan
‫Stripe untuk memungkinkan pengguna kami benar-benar membeli tur.
‫Jadi, mari kita buka tab baru di sini
‫dan kemudian di sana buka strip. com.
‫Jadi Stripe adalah platform perangkat lunak terbaik dan terpopuler
‫dan juga paling mudah digunakan untuk
‫mengintegrasikan pembayaran ke situs web mana pun.
‫Dan masih banyak lagi tentang cara kerjanya nanti, tetapi
‫untuk saat ini mari kita mulai dengan membuat akun gratis kita.
‫Jadi klik di sini di akun
‫gratis dan kemudian buka akun gratis Anda sendiri.
‫Dan setelah Anda berhasil masuk,
‫Anda akan melihat dasbor yang terlihat seperti ini.
‫Jadi ketika Anda membuka akun baru,
‫awalnya Anda akan selalu dalam mode uji coba.
‫Jadi itulah yang dapat Anda lihat di sini dengan data pengujian ini.
‫Sekarang, segera setelah Anda benar-benar
‫ingin mulai menerima pembayaran nyata yang melibatkan
‫uang nyata dari pelanggan nyata, Anda kemudian harus mengaktifkan
‫akun Stripe Anda.
‫Dan untuk itu, Anda kemudian
‫harus memberi Stripe banyak data tentang bisnis Anda.
‫Tapi tentu saja
‫dalam proyek ini, kami tidak akan melakukan itu, jadi
‫kami akan selalu bekerja dalam mode pengembangan pengujian semacam ini, oke?
‫Tetapi sebaliknya, Anda cukup klik di
‫sini untuk memulai atau mengaktifkan akun Anda di sini.
‫Sekarang dasbor ini sangat mudah dan super intuitif
‫untuk digunakan menurut saya.
‫Jadi di sini Anda dapat melihat pembayaran Anda, yang sekali
‫lagi sangat mudah, dan
‫ingat bahwa ini semua adalah data pengujian.
‫Jadi semua jumlah ini di sini,
‫tentu saja, hanya jumlah palsu.
‫Tapi bagaimanapun, Anda dapat melihat pelanggan Anda di
‫sini, Anda dapat melihat jumlahnya.
‫Dan ketika Anda membukanya, Anda mendapatkan lebih banyak
‫informasi, seperti metode pembayaran di sini, jadi nomor kartu kreditnya.
‫Dan omong-omong, kami sebenarnya tidak pernah mendapatkan akses
‫ke nomor kartu kredit pelanggan yang sebenarnya.
‫Jadi kita akan selalu melihat empat digit terakhir
‫ini, tapi tidak pernah melihat nomor kartu kredit yang sebenarnya, oke?
‫Kemudian Anda juga mendapatkan
‫gambaran tentang apa yang sebenarnya dibeli.
‫Jadi, misalnya, The Snow Adventurer Tour.
‫Dan semua ini,
‫tentu saja, sejak saya
‫pertama kali membangun aplikasi Natours, oke?
‫Jadi semua ini hanyalah pembelian percobaan.
‫Kemudian kita juga bisa melihat seluruh saldo kita,
‫jadi intinya semua uang yang kita terima.
‫Dan sekali lagi, semua ini hanyalah data uji.
‫Kemudian kami memiliki pelanggan kami dengan daftar semuanya.
‫Dan, ya, semua ini bekerja dengan sangat baik.
‫Sekarang sebelum kita dapat memulai,
‫kita sebenarnya perlu menentukan beberapa pengaturan
‫tentang akun kita.
‫Jadi di akun baru Anda, Anda akan melihat
‫sesuatu seperti "Akun Tanpa Nama", atau sesuatu seperti itu, di sini.
‫Jadi, Anda juga harus memiliki, seperti ikon pena atau sesuatu
‫di mana Anda dapat membuat nama untuk akun tersebut.
‫Jadi tolong sebut itu "Natours" atau yang lainnya.
‫Dan jika Anda memiliki lebih banyak
‫bisnis, Anda dapat menambahkan satu akun untuk masing-masing bisnis ini, oke?
‫Atau jika Anda tidak memiliki ikon pensil di
‫sini, kami juga dapat
‫pergi ke pengaturan, lalu informasi akun.
‫Dan di sinilah Anda
‫harus memasukkan nama bisnis semacam ini.
‫Kami juga dapat menentukan beberapa pengaturan lain, jadi
‫mari kita tentukan branding di sini, yang
‫pada dasarnya akan membuat halaman Stripe
‫Checkout cocok dengan merek kami.
‫Jadi mari kita tambahkan gambar kita.
‫Jadi publik, gambar, dan kemudian untuk ikon, mari gunakan
‫yang ini.
‫Dan kami juga dapat mengunggah
‫logo, dan untuk itu, gunakan yang ini.
‫Oh, dan sekarang kita membutuhkan kata sandi untuk melanjutkan.
‫Dan sekarang mari kita juga mengubah warna kita di sini.
‫Jadi cepat buka file CSS di depan umum dan
‫temukan warna hijau khas kami, yang
‫ini di sini.
‫Jadi itu terlihat sedikit lebih baik.
‫Sekarang mari kita simpan
‫di sini dan dengan itu, kita siap untuk pergi.
‫Selanjutnya, mari kita lihat kunci API kita.
‫Jadi, klik di sini pada kunci API
‫dan jika situs web
‫terlihat sedikit berbeda saat Anda menonton
‫video ini, mungkin kuncinya ada di sini di pengembang.
‫Jadi di sini Anda juga memiliki sesuatu yang disebut kunci API, oke?
‫Bagaimanapun, ada satu kunci yang dapat diterbitkan dan satu kunci rahasia.
‫Jadi yang ini pada dasarnya adalah
‫kunci publik yang bisa kita gunakan di
‫front-end, dan kunci rahasia adalah kunci yang dibutuhkan di back-end.
‫Dan lebih banyak lagi
‫tentang itu setelah kita benar-benar mulai menerapkannya.
‫Dan akhirnya,
‫saya juga ingin melihat dokumentasinya bersama Anda.
‫Dan itu sampai di sini,
‫dan sebenarnya Stripe
‫dikenal dengan dokumentasinya yang luar biasa.
‫Sangat mudah untuk menemukan apa yang Anda
‫cari dalam dokumentasi ini.
‫Tapi tentu saja, ketika Anda baru
‫memulai, maka sangat sulit untuk mengetahui
‫apa yang Anda cari, bukan?
‫Dan itulah mengapa
‫kami menerapkan fitur pembayaran ini bersama-sama di sini, bukan?
‫Jadi kami akan menggunakan fitur pembayaran Stripe dan
‫mereka memiliki beberapa opsi berbeda.
‫Sekarang di web, kita dapat menggunakan
‫Stripe Checkout yang pada dasarnya menggunakan halaman Checkout preformatif.
‫Jadi ini adalah salah satu yang
‫akan kita gunakan, atau Anda juga dapat
‫menggunakan elemen
‫Stripe ketika Anda benar-benar ingin membangun pengalaman Checkout Anda sendiri, oke?
‫Tapi kami hanya akan menggunakan Checkout ini
‫yang sebenarnya baru
‫dan benar-benar tahan masa depan pada saat ini.
‫Jadi ini adalah dua opsi
‫untuk web, tetapi Anda juga dapat membuat Stripe di iOS,
‫Android, dan platform lainnya.
‫Kemudian di Checkout, kita sebenarnya bisa
‫menggunakannya hanya di klien atau bersama dengan server, oke?
‫Jadi di sini ada beberapa perbandingan.
‫Jadi ketika kita hanya menggunakannya di sisi klien, maka
‫kita bahkan tidak membutuhkan server sama sekali.
‫Tetapi cara menggunakan Stripe ini hanya, sungguh, untuk toko
‫yang sangat, sangat kecil, jadi di
‫mana Anda hanya memiliki beberapa produk yang
‫tidak pernah mengubah harganya dan
‫di mana Anda benar-benar
‫harus menambahkan semua produk ini secara manual ke dasbor Stripe Anda.
‫Jadi kami menginginkan sesuatu yang
‫sedikit lebih kompleks dan untuk itu, kami menggunakan integrasi server, oke?
‫Jadi, tentu saja kita
‫masih perlu melakukan sesuatu di
‫sisi klien, tetapi sebagian besar kode sebenarnya ada di sisi server.
‫Oke, jadi Anda lihat ada banyak hal yang
‫harus dilakukan dengan Stripe, dan kami bahkan bisa melakukan lebih banyak lagi.
‫Jadi kami dapat memiliki penagihan di mana kami memiliki langganan di mana kami
‫memiliki faktur dan semua hal bagus itu.
‫Jadi sungguh, Anda dapat
‫membangun bisnis besar di atas Stripe dan menerima langganan,
‫menyimpan pelanggan ke database, dan
‫semua yang terintegrasi ke dalam Stripe.
‫Tapi sekali lagi, yang akan
‫kita lakukan di sini hanyalah menggunakan
‫Checkout, tetapi versi yang lebih lengkap
‫dengan menggunakan server Checkout.
‫Baiklah, tapi sekarang sebelum kita benar-benar
‫mulai mengintegrasikan produk Stripe Checkout ke
‫dalam aplikasi kita,
‫saya hanya ingin dengan cepat menata seluruh alur
‫kerja yang akan kita terapkan pada beberapa video berikutnya.
‫Jadi semuanya dimulai di back-end
‫di mana kita akan menerapkan rute untuk
‫membuat apa yang disebut Sesi Checkout Stripe.
‫Dan Sesi ini akan berisi
‫banyak data tentang objek yang dapat dibeli.
‫Dan dalam contoh kita, itulah turnya.
‫Jadi Sesi akan berisi harga tur,
‫nama tur, gambar produk, dan juga beberapa detail lainnya
‫seperti email klien.
‫Jadi kita akan melihat itu sebenarnya di video berikutnya.
‫Kemudian, di front-end, kita akan membuat
‫fungsi untuk meminta Sesi Checkout dari server
‫setelah pengguna mengklik tombol beli.
‫Jadi begitu kita mencapai
‫titik akhir yang kita buat
‫di back-end, itu akan membuat Sesi dan mengirimkannya
‫kembali ke klien.
‫Kemudian, berdasarkan Sesi itu,
‫Stripe akan secara otomatis membuat halaman Checkout untuk kami
‫di mana pengguna kemudian dapat memasukkan
‫semua detail seperti nomor kartu kredit, tanggal kedaluwarsa, dan semua itu.
‫Kemudian, sekali lagi, menggunakan The
‫Session, kami akhirnya akan menagih kartu kredit.
‫Dan untuk itu, kita akan membutuhkan kunci publik, jadi
‫kunci yang baru saja kita lihat sebelumnya.
‫Jadi kunci rahasia yang kita perlukan di
‫server seperti yang akan Anda
‫lihat di langkah pertama, dan kunci publik akan digunakan di front-end.
‫Dan yang benar-benar penting untuk
‫diperhatikan di sini
‫adalah bahwa itu benar-benar Stripe,
‫yang akan bersama dengan The Session, menagih
‫kartu kredit, dan oleh karena itu, rincian kartu kredit bahkan
‫tidak pernah mencapai server kami, yang membuat hidup kami
‫sebagai pengembang jauh lebih mudah karena
‫kemudian kita tidak harus berurusan dengan semua hal
‫keamanan yang berhubungan dengan pengelolaan dan penyimpanan kartu kredit, oke?
‫Jadi Stripe mengambil semua itu dari
‫kami, pada dasarnya kami hanya menggunakan API mereka seperti ini.
‫Bagaimanapun, setelah kartu kredit berhasil ditagih, kami kemudian dapat
‫menggunakan sesuatu yang disebut Stripe
‫Webhooks di back-end kami, untuk membuat pemesanan baru.
‫Sekarang, bagian alur kerja ini
‫hanya akan berfungsi untuk situs web yang
‫diterapkan, jadi situs web yang sudah berjalan di server.
‫Jadi, bagian dari
‫alur kerja ini, kita hanya
‫akan dapat menerapkannya pada akhir bagian berikutnya, oke?
‫Tapi untuk saat ini,
‫kita benar-benar akan menemukan solusi sementara
‫untuk ini, yang tidak terlalu
‫aman, tapi itu akan bekerja dengan baik untuk saat ini, oke?
‫Jadi ingatlah diagram ini dan juga konsep bahwa
‫kita sebenarnya menggunakan The Session untuk menagih kartu kredit
‫dan kita tidak melakukannya secara langsung.
‫Jadi, sampai jumpa di video berikutnya.