Video ini gue khususkan buat kalian semua yang belum pernah mencoba Payment Gateway dan pengen coba untuk pertama kalinya pengimplementasian Payment Gateway di proyekan yang udah kalian punya. Dan disini gue pake platform Mitrans namanya, dimana Mitrans ini adalah tools untuk kita bisa mengintegrasikan Payment Gateway ke dalam proyekan kita, misalnya website. Dan Mitrans ini gak harus untuk programmer doang karena... kalau lu pakai mitrans itu bisa juga untuk versi non-developer tanpa coding pun lu bisa masukin integration ke dalam projekan kalian contohnya untuk yang punya toko, toko online misalnya atau pembisnis, merchant yang kayak gitu-gitu itu bisa juga pakai mitrans karena mitrans itu nggak hanya untuk developer tapi disini again karena gue ini developer jadi gue akan praktekkan dalam beberapa menit ke depan dari sisi developer itu seperti apa experience-nya untuk mengintegrasikan si payment gateway ke dalam projekan atau website yang udah kita punya at the first time ya bro kayak gimana?
jadi kita langsung saja bahas seputar payment gateway mitrans oke sebelum lebih jauh gua bakal coba jelasin dulu seputaran mitransnya itu sendiri dan mitrans ini adalah payment gateway jembatan antara sistem kita atau aplikasi yang udah berjalan yang kita punya supaya bisa punya akses untuk melakukan pembayaran pembayaran kemana? ke berbagai macam bank yang ada di Indonesia dan gua pilih mitrans itu karena pertama ya dokumentasinya itu sangat-sangat lengkap Dan real Bukan yang kayak Gue baca Terus gue praktekin Tiba-tiba Nggak sesuai Nggak kayak gitu Jadi gue udah coba Mitrans Terus gue implementasi langsung ke codenya Dan itu lancar Dan sesuai dengan dokumentasinya Bahkan Ketika gue pake stack Yang tidak ada di dokumentasinya pun Gue masih bisa nyocokin dengan Apa yang ada Apa yang disuguhkan Dari dokumentasi si Mitransnya Kalau hal lainnya Selain dokumentasi Itu gue suka karena Si Mitrans ada banyak pilihan opsi pembayaran lebih dari sekitar 25 metode lu bisa pakai contohnya misalkan ke transfer bank ataupun pakai e-wallet lu bisa mainin di mitrans ini jadi menurut gue ini sangat powerful ketika gua baca dokumentasinya itu enggak cuman dengan satu cara untuk kita bisa implementasi atau integrasi payment gateway mitrans ke dalam proyekan yang kita punya jadi ada banyak gua bakal coba sebutin dua metode yang paling gua suka untuk pengimplementasinya di mitrans pertama adalah namanya snap dan yang kedua adalah payment Link, nah snap ini menarik kenapa? Karena di dalam snapnya itu terbagi lagi Menjadi beberapa opsi, dan ini gue suka banget Yang pertama ada snap seamless pop up Terus yang kedua adalah snap Embed, ketiga adalah snap redirect Nah yang mana yang gue Lebih demenin adalah snap Pop up, karena keliatannya kayak Seamless banget, sesuai namanya Di dokumentasi, itu snap seamless Pop up, jadi misalkan Ketika kita klik check out di website kita Langsung, mitransnya itu masuk Kedua Payment gatewaynya masuk ke dalam website kita Kayak gak keliatan itu tuh dari luar Padahal kan kita pake Mitrans Kita tuh gak ngoding user interface-nya kayak gimana Untuk bagian si metode pembayarannya Itu udah bener-bener dari sananya aja Dari si Snap Prosesnya itu yaudah dilanjutin sama Mitrans aja Kita mah cuman yang pertama nge-request aja Supaya muncul halaman tersebut ke dalam website kita Dan itu pun gak keliatan gokil parah Intinya dengan Snap ini mempersingkat waktu kita sebagai developer Untuk Membuat interface dan lain-lain Nah kalau untuk payment link ini cukup menarik Dan ini lebih sederhana lagi daripada yang snap Dimana ketika lu klik tombol check out misalnya Nanti bakal diarahin ke sebuah link Dan link itu lu bisa share ke sana sini Nanti bakalan muncul page khusus Ini di hosting dari mitransnya itu sendiri Tapi tetap terintegrasi dengan web kita Karena di dashboardnya mitrans itu kita bisa saling interaksi gitu Antara sistem kita dengan si mitransnya Kita harus praktekin sih guys Gak bisa gue cuman Ngobrolin kesenangan gue dengan Mitrans doang Terlebih buat temen-temen semua yang belum pernah mencoba ya Gue bakal coba bikin lo asik dengan Mitrans ini Karena apa?
Gratis Dengan mode sandbox pastinya Lo cukup daftar aja Linknya di deskripsi ya guys Itu bukan link promo gue Gue cuman masukin link Mitransnya aja disitu Biar cepet aja masuk situ gitu Terus lo register kayak biasa Lo masukin data diri lo Terus lo bisa dapetin kredensial Nah itu untuk kebutuhan lo pake platform Mitrans Di dalam proyekan yang lo punya Setup project kali ini kita bakal pake Framework Next.js versi 13 app router Dan pake template UI product yang udah gua bikinin khusus buat kalian semuanya Tujuannya biar fokus utama kita adalah ke implementasi payment gatewaynya aja Gak usah yang lain-lain Jadi pertama kita pastikan beberapa hal dulu yang harus di install Yaitu pertama Node.js Disini gua pake versi 18 seperti biasa LTS Terus yang kedua Text Editor Disini gua pake VS Code Dan yang ketiga adalah ngrok untuk kebutuhan port forwarding, yang nanti bakal gue jelasin juga yang keempat adalah kredensial data mitrans, jadi nanti kalian bisa daftar sendiri, karena ini gratis jadi cek linknya aja di deskripsi, itu bukan link untuk promo, jadi beneran link ke mitransnya doang, kalau syarat-syarat di atas udah terpenuhi, saatnya kita coba setup next.js dengan cara clone repository next.js gue, linknya di deskripsi juga terus buka facecode kalian dan gue bakal jelasin sedikit konfigurasi filenya, file.env disini fungsinya untuk kita taruh kredensial mitrans, ya gue Anggap kalian udah pada ngerti semua seputar Hai ente file Oke ada dua rules yang harus kalian tahu disini yang pertama adalah kalau variabel invi diawali dengan next underscore public kata-katanya artinya Ki ini bakalan terekspos ke browser secara public variabel ini bakal kita pakai untuk client key yang dikasih sama mitrans nantinya Nah kalau variabelnya itu enggak ada next public nya Oke itu artinya untuk kita pakai kebutuhan kredensial yang bersifat rahasia variable ini bakal kita pakai untuk server Atau secret key yang nanti bakal dikasih sama mitrans juga Jadi setidaknya ada dua Ada client key dan ada secret key Standar kredensial data Folder thanks ini adalah halaman yang bakal dipanggil sama mitrans Pas transaksi kita udah selesai Jadi isinya cuma kayak komponen standar doang Untuk render HTML dengan satu tombol kembali ke homepage Ini biasa aja Terus disini kalian lihat ada folder libs Ini tuh kayak javascript function biasa yang isinya hanya dummy json aja untuk sampel data produk kita karena disini gak mainin database terlebih dahulu Tapi asumsikanlah ini adalah data dari database kalian ya Ada id, ada gambar, nama produk, harga, dan lain-lainnya Nah kalau file page.js yang ada di dalam folder app, ini adalah routing halaman utama website yang manggil data produk yang ada di folder lips kita tadi Dan perhatikan disini ada satu komponen kecil yang namanya checkout component Yang secara khusus kita bakal fungsiin komponen ini untuk kebutuhan integrasi payment gateway mitransnya Nah sekarang coba dulu kita jalanin proyeknya Buka terminal di VS Code, kalian install dependensinya dengan ketikan npm install Terus kalian ketikin npm run dev Buka url localhost 3000 di browser, port 3000 secara default Tergantung kalau kalian portnya berapa ya tinggal dibuka aja Dan kurang lebih munculnya kayak gini, berarti kita udah sama ya guys ya Sekarang coba klik tombol check out atau klik tombol yang create payment linknya kalau udah sama kayak gue gini muncul alert alert artinya ini kita siap untuk implementasi midtrans payment gateway dengan dua metode kalau kalian cek ke dokumentasi midtransnya linknya ada deskripsi untuk dokumentasi resminya ya guys ya, yang mungkin bakal bikin lo tertarik disini adalah kita akan coba metode snap dan juga payment link seperti yang di awal tadi gue jelasin jadi kita bakal coba dulu integrasi snap Nah kita akan selalu refer ke dokumentasi resminya Mi Trans Kita harus daftar dulu akun Mi Transnya Sesuai dari dokumentasi yang dijelaskan seperti itu Silahkan lo pada daftar aja karena ini gratis Tinggal di next next next isi data Ya guys ya intinya kalau udah Nanti lo bakal lihat dashboard yang kayak gini Hal yang perlu diperhatiin disini adalah Ubah environment modenya yang tadinya itu production Ubah ke sandbox mode Karena kita berjalan secara development mode ya guys ya Sandbox itu untuk Kebutuhan development atau staging Jadi untuk eksperimen kita terlebih dahulu Di awal sebelum kita publish atau release Atau production mode Nah untuk lu dapetin credential midtrans nya Lu coba arahin mouse nya ke menu setting Disitu ada access key namanya Dan kalau kalian klik Itu kita bisa lihat ada Tiga data ya ada merchant ID Ada client key ada server key Yang kita butuhin sebenarnya cuma dua aja Yaitu si client key dan juga server key Untuk kasus yang ini gitu loh Intro Jadi pertama kita siapin dulu, kita copy dulu ini si client key-nya ke file.env yang kita punya. Yang client key masukin ke variable yang client kita. Nah sedangkan untuk yang server key di midtrans itu kita juga copy ke file.env sesuaikan dengan variable yang kita punya.
Dipastikan aja kalau kalian udah simpen perubahannya, env-nya tuh harus ikut ke bawah juga ya. Kalau enggak, enggak keubah misalnya, lo gak yakin, lo coba restart aja next.js-nya. Matiin dulu npm run devnya terus nyalain lagi.
Tapi kalau nggak salah secara otomatis sekarang..env di next.js itu kalau kita save otomatis ke reload juga. Kalau dulu mah lo harus matiin nyalain dulu projectnya. Sekarang kita cek lagi ke dokumentasi mitransnya.
Lo lihat di menu integration guide. Untuk bisa melakukan transaksi pakai metode snap itu kita harus punya token dulu. Dibilang kayak gitu di sini. Lah bang, kan tadi mitrans cuma ngasih merchant ID, client key, dan server key. Token yang mana lagi bang?
Nah ini dia fungsinya baca dokumentasi dengan baik ya guys ya Disini Mitrans bilang nih Untuk mendapatkan token kita cukup kasih informasi pembayaran Dan juga server key yang kita punya Server key Jadi maksudnya disini kita saling berter data Antara sistem kita dengan sistemnya Mitrans Supaya kita bisa dapetin token gitu loh Data apa yang dikirim dari sisi kita ke si Mitrans adalah minimal Seenggaknya server key, order ID, gross amount atau total harga 3 data itu yang paling minimal yang bisa kita kirim ke Mitrans Untuk tukeran data, untuk barter Supaya kita bisa dapat token Nah disini gue coba breakdown dulu sedikit Untuk server key kita udah punya Order ID juga kita udah punya Ada di folder lips Dan gross amount juga ada Sama di folder lips yang kita punya itu Nah terus gimana cara dapetin tokennya adalah Kita tinggal hit aja ke endpoint API-nya Mitrans yang ini Sesuai dokumentasi ya Tapi tunggu dulu Hai kali aja ada cara yang lebih mudah tanpa harus kita fetching fetching atau hitting hitting API and point kayak begituan Coba deh sekarang lu cek ke yang namanya technical reference dan development tools ini sesuai artinya nih tools artinya kemudahan ya menarik dan kalau lu buka bener aja kan di sini ada menu library dan plugin Coba kita cek Ya kan disini ada Node.js Ya karena kita pakai Next.js artinya Possible banget buat kita pakai library yang versi Node.js nya ini, yuk kita buka githubnya Dan karena ini library jadi kita harus Install dan caranya itu udah jelas Banget disini tinggal npm i Minmin save mitrans client Kalau kalian pakai npm, tapi gue anggap Disini semuanya sama rata pakai npm ya Apakah kita udah siap ngoding? Belum, kita baca lagi dokumentasinya Mitrans bilang disini Supaya dapetin token ini harus Dari sisi back end bukan front end dan menurut gue sekali lagi itu sangat logis karena syarat dapet token itu memang mintanya server key bukan client key judulnya aja udah server key nah ini sekaligus menjawab alasan kenapa gue pilih next.js karena kita bisa bikin route untuk API system di proyekan kita ini gitu loh cara bikin API di versi terbaru next.js juga sangat sederhana kayak klik kanan di folder app terus klik new folder namain foldernya API jadi Terus di dalamnya kita bikin satu folder lagi Disini gue taruh aja namanya tokenizer Nama foldernya Sebenernya bebas aja sih Ini untuk endpoint kalian Jadi kalau gue kasih struktur foldernya seperti ini Nanti API kita ada di Slash API slash tokenizer Sekali lagi ini sebenernya bebas penamanya Terserah lu Tapi disini gue seneng aja dengernya tokenizer Tokenizer Dan tinggal buat satu file Namanya itu harus route.js Supaya dideteksi sebagai endpoint atau API Sistem API di Next.js Fungsi API ini adalah untuk nembak data ke midtrans Biar kita dapetin tokennya tadi Jadi kurang lebih nanti gambaran flow-nya kayak gini guys Frontend kita itu bakal consume API tokenizer Dengan data produk yang udah kita punya juga Di sisi frontendnya Terus API tokenizer bakal nerusin datanya ke midtrans Dan midtrans bakal ngasih respon token ke API tokenizer yang kita punya Dan snap pop-up pun bakal muncul di website kita mudah kan hehehe Mari kita implementasikan Oke sekarang kita coba buat epinya terlebih dahulu ya guys ya di sini karena kita udah punya folder atau file route.js di dalam tokenizer kita langsung bikin aja pemanggilan dari library mitrans yang udah kita install caranya tinggal diimport aja mitransnya kayak gini mitrans from library yang kita install yaitu mitrans client seperti ini Hai kalau udah sekarang kita bikin dulu function bawaan route.js nya biar terdeteksi sebagai API jadi langsung aja export async function pause kayak gini kalau di next.js versi app-router kita bikin handlernya seperti ini biar otomatis terdeteksi sebagai metode pause API dan kita bikin dulu satu variable atau beberapa variable yang bakal kita tangkap dari frontend disini const pakai kurawa langsung kalau di next.js 13 itu posisinya ada di dalam request. json di dalam sini bukan di apa ya namanya teh kalau biasanya kan lu harus masukin sini kayak rekres gini-gini ya Nah kalau disini mah cukup satu aja request kayak begini yang mana request ini berasal dari front-end nanti karena di sini kita pakai asing function jadi taruh aja away di sininya Nah apa aja yang dikirim dari depan adalah kurang lebih sama kayak yang ada di dalam lips kita m.id terus juga product name sini ya oke jadi kita masukin aja sini ID, product name, price, quantity alright, kayak gini kurang lebih nah sekarang kita harus initialisasi data mitransnya terlebih dahulu bisa lo masukin di luar function exportnya disini kita bikin variable namanya, pake let aja ya let snap sama dengan new mitrans ada kan langsung disini muncul sugestinya new mitrans.snap S nya huruf gede kasih buka tutup kayak gini kasih kurawal enter disinilah data rahasia kita data secret kita ya guys ya dimana pertama kita declare dulu bahwa mode kita itu bukan production jadi di sini ada yang namanya is production itu harus kita buat false karena kita mainannya sandbox Oke ini dapat dari mana Bang dari dokumentasinya kalau kalian baca eh terus yang kedua adalah server key dan yang ketiga adalah client key dimana server key kita udah punya tinggal masukin aja sini proses.env.secret ya kan dan untuk lain juga sama kan yang klien kita pakai next underscore public ya underscore kela sorry pakai rupiah de klien syarat untuk pakai Snap itu harus ada apa aja parameternya ya kita coba cek ke dokumentasinya Snap sini Nah kita bisa cek yang bagian sampel node.js disini ini kan udah sama aja sebenarnya bisa tanpa client key juga tadi kan gua masukin client key ya terus disini lu harus punya parameter untuk transaksinya supaya simitrans bisa deteksi apa yang lu mau belanjain gitu kan minimal ada transaction detail yang mengandung order ID kita udah punya gross amount atau total harga kita udah punya juga terus credit card kita nggak usah tentuin disini biarin aja customer details itu juga nggak perlu dan lu bisa cek parameter apa aja yang paling optimal yang bisa lu pakai untuk kebutuhan create token Nah cara supaya lu tahu apa aja parameter yang harus kita masukin itu ada di bagian reference biasanya jadi lu coba Scroll ke atas di sini ada yang namanya API reference langsung klik aja terus lu cek ke bagian yang namanya back-end integration dan lu coba cek ke request body atau jason parameter nah ya kan ada nih minimum request transaksi detail order ID gross amount complete request kita bisa lihat di sini ada item details dan gua bakal pakai item detailsnya karena apa apa ini bakal masuk ke dashboard kita nanti untuk kita tahu apa yang dibelanjain lah kurang lebih seperti itu jadi kita bikin dulu parameternya di sini ya parameter sama dengan pertama adalah item details dimana item details itu gua bakal masukin name product name ya terus ada juga price yang mana presnya adalah yang dikirim dari front-end juga price dan terakhir kuantiti cukup kayak gini aja ya Ini kan ada kuantiti quantity seperti ini dan satu lagi adalah transaction underscore details dimana transaction detail ini mengandung order underscore ID order ID kan kita udah punya dari ID yang dikirim dari front-end jadi tinggal masukin kayak gini untuk gross amount atau total harga itu berarti bukan price yang ini doang tapi juga kan orang tuh belanja pasti ada quantity nya gitu kan maka di gross amount ini kita lakukan kalkulasi price dikali quantity So dari sisi frontend itu gak ada kalkulasinya Kita main kalkulasi di bagian backendnya aja seperti ini Parameter udah tercipta cukup kayak gini paling minimal Dan terakhir adalah tinggal kita create tokennya berdasarkan data yang kita punya Caranya cukup sederhana kita bikin dulu variable const token sama dengan await Dari mana?
Dari snap Snapdot apa? Snapdotnya tuh muncul langsung banyak sini Ada create transaction, create transaction token, redirect URL Tergantung metode yang kalian pakai Hai nah sebenarnya kita bisa pakai create transaction secara langsung cuman nanti bakal masuk lagi ke dalam objek Nah karena kita cuma butuh token ya udah langsung aja create transaction token kayak gini nah langsung pakai in buka tutup dimana buka tutupnya isinya adalah parameter data kita jadi kita ngirim data ini ke mitrans lewat library snap create transaction token dan kalau kita konsol log disini tokennya terus kita kirim respon dimana untuk ngirim respon ke frontend dari sisi backendnya next.js lo cukup pake next.response yang harus lo import dulu ya klik aja ini otomatis ke import diatas tambahin.json dalam kurung buka tutup kayak gini kurawal token beres kayak gini aja dan sekarang kita consume API tokenizer yang udah kita bikin ini masuk ke komponen tombol check out nya ada di folder komponen masuk ke tombol check out Hai dan cari aja function yang namanya function check out ini tapi sebelum kita fetching datanya disini kan kita harus punya parameter yang kita kirim ke back endnya jadi kita bikin dulu kons data yang mana ini adalah parameter yang kita kirim dari depan ke belakang pertama tadi kan dari sana dari back end tuh harus ada ID terus harus ada produk name terus harus ada price terakhir adalah quantity ID itu dapat dari mana dapat dari produk yang ada di dalam lips kita ini ya sini Hai jadi kita import produk ini ke dalam button check out import produk nah muncul di dalam produk itu ada ID jadi kita masukin sini produk.id Oke satu yang ini produk.net M2 yang ini produk.price tiga kuantiti berasal dari mana dari state quantity inilah data yang bakal kita kirim ke metode pos raut tokenizer kita API right dan tinggal bikin aja pemanggilan API nya di sini cons sorry-sorry gua Scroll dulu biar enak response sama dengan await fetch pakai fetch standar aja nggak usah pakai libra libra reaksios gitu slash API slash tokenizer kasih koma kurawal metodenya apa metode itu pos dan kita langsung kasih bodinya adalah data yang kita udah siapin di atas tapi sebelum kita lempar data ini ke dalam API kita harus bikin di dalam JSON stringify terlebih dahulu bungkus, masukin datanya dan terakhir kalau kita fetching pakai Fetch bawaannya javascript Kita harus bikin const Request data Sama dengan await Response.json harus dibikin ke json Artinya data terakhir kita ada di mana? Ada di dalam request data Tinggal kita coba Console.log request datanya Langsung aja sini console.log Pake kurawa request data biar tau Gimana?
Ini kan simple kan Dari tombol check out ketika kita klik tombol check outnya Maka kita kirimkan data ini Ke end point API yang kita udah bikin tadi yaitu di slash API slash tokenizer dengan metode pause data yang ini kita kirim, kita tangkep ke variable request data dan hasil akhirnya adalah ada di request data ini kita console log untuk munculin dia ke browser cek lagi sini kita inspect elemen dulu sini ya, ini gue perbesar kita klik tombol check outnya apa yang terjadi? error slash API slash tokenizer 500 nggak ketemu ya end pointnya itu tidak ketemu kita coba benahin dulu ya ada yang salah sepertinya disini Oh ya ya ya di sini ternyata kita lupa ngeriten kasih return ya guys ini duh maafkan aku guys lupa kalau udah kita coba save dan balik lagi ke browser ya kosong-kosong tinggal klik tombol cekotnya buff sekarang ada muncul ya di sini request data dan di dalamnya ada yang namanya token Hai nah token ini dari mana tekan ini adalah dari API kita API kita yang kita tugaskan untuk nyari token kemi trans dan mitrans ngasih data token ini yang mana token ini bakal kita pakai untuk munculin jendela pop-up nya sih snap seamless itu tadi snap seamless pop-up biar muncul pembayarannya disini Oke kita coba langsung praktekin cara supaya kita bisa munculin nya itu cek dulu di dokumentasi pergi ke bagian API reference ini cari yang front-end integration cari yang snap js Nah disini kita bisa tahu gimana caranya pakai snap popup ataupun snap yang lain-lain dan kita bisa custom juga penggunaannya mau pakai advanced fitur atau yang basic-basic aja Nah disini karena kita pakai Next.js, nggak ada nih disini tutorialnya untuk pakai Next.js tapi karena sama-sama javascript jadi sebenarnya kita bisa akalin juga dimana kalau disini kalian baca you can also implement callback to trigger your custom javascript implementation on each event katanya gitu kan ya dimana eventnya adalah snap.pay terus masukin tokennya Artinya ketika kita pencet tombol check out Kita udah dapetin token Masukin token tersebut ke dalam snap.pay Dan ini snap.pay ada di sisi frontend atau client side Artinya kita bisa pakein objek windows Untuk kita akalin supaya si snapnya bisa muncul di next.js kita Karena kita gak bisa langsung implementasi kayak beginian nih Kita harus akalin dulu di dalam body HTML kita Supaya dia bisa dapet script snap.js nya untuk sisi frontend Karena yang tadi yang apa nih yang mitrans client ini kan kita di sisi backend server sedangkan yang frontend kita nggak pakai ini kita bakal pakaiin metode yang frontend integration yang mana kita harus nge-import dulu script src untuk kita bisa munculin pop-upnya disini ya dan kita butuh data client key ya cuman butuh data client key doang jadi kita langsung aja masuk ke bagian halaman utama kita dimana itu berada adalah di page.js nah di page.js ini kan udah gue kasih nih render mitrans snap token jadi caranya adalah kita copy satu persatu satu script yang ada di sini ya kita butuh src-nya ini copy aja kita bikinin variabel di dalam use efeknya sini boleh cons apa namanya snap script misalnya sama dengan tempel Oke terus kita masukin variabel inv client kita cons client key sama dengan dari proses.nv.next underscore public underscore client kayak gitu dengan 2 data ini kita bisa bikin elemen kita sendiri ketika halaman utama ke render pertama kalinya makanya disini saya pakai dependency array yang kosong seperti ini di react standar cycle nya react jadi caranya adalah tinggal kita bikin 1 variable seperti conscript misalnya sama dengan document.createElement element apa yang mau kita bikin adalah elemen script dan kita tinggal timpah objek script ini yang ada di dalamnya sudah pasti adalah script.src seperti ini script.src script.data-client-key kayak gitu-gitu ya jadi langsung aja script.src sama dengan snap script terus satu lagi script.set-attribute kayak gini dalam kurung adalah data-client-key dengan nilai nilainya adalah client-key kita tinggal bikin script ini menjadi asing script.asing sama dengan true dan Tinggal kita masukin ke dalam body yang kita punya Dokumen.body Wah loading lagi..body.appendChild. Kayak gini.
Apa yang di append adalah si scriptnya. Masukin ke sini. Script.
Oke karena script ini nilainya udah kebungkus semua sama yang disini nih. Dan tinggal kita bikin clean up function ala-ala baru udah create seperti biasa. Bikin return kayak begini. Untuk ngebuang komponen atau elemen yang udah kita create ini ya. Ketika renderannya udah ke unmount gitu loh.
Caranya ya tinggal.body.remove ya. child script script dah kayak gini aja sih kayaknya udah cukup untuk kita bisa munculin simles pop-up nya Snap tapi belum kelar ini baru kita implementasi si snap script nya aja di bagian cek kita belum panggil Nah cara panggilnya itu kan di sini kita baru console log doang request data dan datanya pun udah muncul juga di web kita yaitu si token ini Nah cara munculin nya adalah di sini kita pakai browser objek yang mana namanya adalah Windows. Snap.com pay dari mana snap.pay kalau kalian cek ke dokumentasi mitrans disini ada snap.pay kasih tokennya apa tinggal masukin aja kayak gini window.snap.pay dimana data tokennya ada di dalam request data masukin sini.token ya kayak gini aja kita coba cek ke browser sekarang kita reload dulu mungkin sini biar lebih enak kalau kalian lihat error di sebelah sini kayak punya gua ini mah gara-gara extension Chrome yang gua punya bukan gara-gara perjalanan kita jadi kita awasin klik tombol cekotnya puff langsung muncul kayak gini gimana udah berhasil sini ada total pembayarannya berapa 350.000 kita bisa pilih metode mau pakai BCA credit card dan semuanya gua di sini bakal simulasi in pakai BCA aja gesya pakai BCA nih disini BCA virtual account atau gini deh biar lebih enak kita close dulu gua tambahin kuantitinya jadi dua sekaligus memastikan saldo yang masuk nanti berapa kali ya check out, oke, 700 ribu, bener, 350 dikali 2, 700 ribu, pakai BCA virtual account, dan langsung muncul virtual account number yang harus kita bayar, kita copy aja, gimana cara bayarnya, sedangkan ini adalah sandbox, kita pakai yang namanya simulator, jadi Mitrans itu punya simulator disini, untuk kita melakukan testing pembayaran, nah disini gue udah bookmark juga, linknya ada di deskripsi, kalian bisa pakai, tinggal tempel nomornya disini, paste, pencet inquire, dan saldonya muncul ya kan 700.000 tinggal pay aja payment sukses tinggal balik lagi ke appsnya dan otomatis payment suksesful muncul disini nah tapi setelah transaksinya berhasil kok malah nggak ngarah kemana-mana nah ini fungsinya ngrok supaya kita bisa meneruskan ketika pembayarannya udah kelar mau di kemana itu mau diarahin kemana url nya nah kalau kalian cek ke dashboard mitrans kalian masing-masing pergi ke bagian setting ke bagian snap preference sini pencet aja di sini kan kalian bisa setel-setel sesuatu-sesuatu kayak begini pergi ke bagian system setting aja dimana kalau kalian scroll ke bawah sedikit sini ada finish URL dan ada juga unfinished URL ada juga error payment URL nah ini bisa kalian arahin ke halaman yang kalian pengenin di sini gue masukin ke halaman thanks tapi ngroknya gue belum nyala so kalau untuk testing kayak beginian kita butuh ngrok jadi di sini gue akan buka terminal baru new terminal port kita adalah port 3000 Jadi kita akan forward port 3000 nya Ngrok HTTP 3000 Kayak gini Nah kita dapetin link nih Forwarding Link nya HTTPS Blablablablabla Kenapa harus kayak beginian bang? Karena syarat supaya kita bisa mainin Redirect URL nya Atau webhook nya Atau callback nya Itu kita harus pake HTTPS Gak bisa yang localhost Kayak gitu-gitu Jadi gue bakal tempel langsung sini ya Tempel sini Lebih baik sih kalian punya halaman masing-masing Tersendiri khusus untuk Nge-handle Unfinished Atau error Atau apa kek ketika pembayarannya udah dilakukan gitu ya tapi sini sebagai contoh gua pakai yang thanks ajalah yang udah ada kalau udah tinggal di save aja oke snaf preference has been save successfully jadi kita coba cek ke browser lagi kita back ke localhost ini reload dan coba check out lagi ya guys ya check out ah ini ngagokin awas dulu coba pakai bca virtual account lagi copy kita coba ke emulatornya lagi sini kita tempel id-nya tinggal kita tungguin ya guys ya dan muncul 350.000 tinggal pay cek lagi ke browser sini nah kalau ini nggak berubah tinggal pencet aja back to merchant otomatis payment successful karena udah dibayar tadi dan akan otomatis ngeredirect ke halaman terima kasih telah melakukan pembayaran ini adalah halaman thanks kita kalau kalian cek ke bagian url ini udah ngerah ke ngrok yang kita masukin tadi url https ngrok Oke itu dia untuk penggunaan snap sesederhana itu jadi kalau gua breakdown sedikit seputar snapnya itu sendiri ya kita cuman bikin satu route doang sini kayak gini Oke yang mana ini adalah kita pakai mitrans client kita hit ke mereka terus mereka kasih token ke kita tokennya kita ambil di bagian check out sini dan token tersebut kita pakai untuk munculin jendela snap payment nya dimana untuk munculin jendela payment snap pop up nya itu kita harus masukin dulu script frontend nya ke dalam page yang kita punya oke kayak gitu aja gimana menurut kalian apakah cukup mudah atau enggak sekarang kita tinggal coba yang payment link ya guys ya cek ke dokumentasi kita coba cari si payment link itu ada dimana masuk ke dokumentasi sini payment link ini seharusnya sederhana gua bakal pakai payment link yang via API langsung Scroll ke bawah kita coba cari API reference mungkin ini dah kita coba klik dulu oke nah ini dia kita Scroll terus sini the following reference will explain the payment link API Oke Nah di sini ada API host URL sendbox kita copy aja langsung ini Klik Kanan masukin ke ienvi yang kita punya sini gua udah tampung di next public underscore API simpen sini Oke kalau udah di-save aja dan kita balik lagi ke dokumentasi untuk membuat payment link itu kita masuk ke url ini nih slash V1 slash payment links jadi kita bikin di bagian komponen check out dimana kita masukin itu ke dalam generate payment link function sini ya gua jamin lagi di sini gua bakal coba fetching API tersebut cons response sama dengan await begini biasa fetch dari endpoint pakai backtick ya endpoint base URL yang udah kita punya yaitu di process.env.next-public-api masukin yang tadi di dokumentasi itu apa slash v1 slash payment link ini di copy aja nih guys tempel sini alright masukin beberapa parameter sini ya metodenya itu udah pasti post lah masukin headers headers ini kita pakai apa aja ya cek dokumentasi ini syaratnya ini untuk header nya tinggal di copy aja copy tempel pastiin kita pakaiin string aja sini biar enggak bingung ya pakai string semuanya tambahin koma tambahin koma tinggal reformat biar enak nah seperti ini nah perhatikan sini ada out underscore string huruf gede semua artinya ada sesuatu nih kita baca dulu ya dimana disini out string value nya itu harus hasil dari encodan encodan base64 dari server key yang kita punya biar kalian gak begitu bingung intinya server key yang kita punya di ENV itu kita encode ke sini terus kita kirim sebagai authorization untuk dapetin data mitrans nya nah karena ini adalah sisi frontend ya guys ya ini kan dari si client side kita nggak bisa dapetin ENV yang server key nya disini kita nggak bisa nah itu kendala ya cek lagi ke ENV karena disini enggak pakai next underscore public jadi kita nggak bisa konsum ini di sana di tombol check out kita ini jadi kita harus ganti dulu nih ya ini untuk kebutuhan tutorial ya guys mohon maaf jadi gua ganti dulu next underscore public tapi gak usah khawatir karena kita bakal nge-encode ini jadinya gak apa-apa kita panggil di sisi check output atau di komponen yang kita punya sisi client side nya dan tinggal kita masukin ke dalam sebuah variable cons secret sama dengan process.envy.next underscore public underscore secret tapi yang tadi bakal rusak tuh yang ada di route tokenizer kita karena dia gak pakai next underscore public secret kalau pengen enggak rusak ya sementara lu tambahin dulu dah next underscore public underscore secret yang enggak papa sementara kita pakai begini dulu balik lagi ke check out Oke kita bakal encode ini bikin satu variable cons encoded encoded secret sama dengan kalau pakai JS untuk base64 bisa beragam cara bisa pakai btoa lebih sederhana tapi di sini gua bakal pakai yang ribet buffer.from dari secret ya guys.toString base64 kayak gini Hai nah ini sesuai rujukannya mitrans kita harus mengenai ini pakai base64 cek lagi dokumentasi nah ini ya base64 encode dan kurang lebih sintaksnya kayak gini aja artinya encoded secret ini yang bakal kita masukin ke dalam sih basic outstring ini caranya ya outstring ini tinggal ganti aja jadi kayak encoded secret gitu kan tapi biar lebih merenah ya udah langsung aja kita bikin variabel sini cons basic out sama dengan pakai backtick kayak gini basic Hai kayak gini encoded secret jadi disini tinggal panggil basic out nah seperti itulah kurang lebih ya jadi lebih enak dibaca aja gitu ya dipisah-pisah right terus di bagian bodinya seperti biasa kita kasih jason.com ifai tapi datanya mana Bang kita belum punya anak kita bikin lagi di sini datanya untuk kebutuhan payment link apa aja datanya sama aja kayak tadi cuman agak sedikit berbeda nih guys dimana perbedaannya kalau kalian lihat di dokumentasi di bagian ini nih Item details itu ada array disini guys Jadi kita masukin ke dalam array untuk item detailsnya Yuk kita langsung bikin Let data sama dengan Kayak gini Item underscore details Array Kurawal Samain bagian key dengan yang didokumentasi disini Hai ya ada ID name price ini sebesar yang snap tadi jadi lu bisa lihat ke yang atas ini ya bisa lihat situ ID sama dengan apa gitu-gitu atau lupa paslah boleh dikopas juga sini ini copy tempel sini kayak gini ya dan tinggal yang transaction transaction underscore details ini sama persis kayak di snap jadi tinggal masukin order underscore ID dari mana dari produk.id dan tinggal masukin cross amount dari mana dari produk.price dikali kuantiti yang kita punya, ya karena kita implementasi ini dari sisi client side, front end integrationnya, tanpa kita bikin API sekarang data ini tinggal kita masukin ke body json stringify nya tempel, terus response ini tinggal kita bikinin kayak seperti sebelumnya, cons payment link sama dengan await response.json artinya data linknya, atau payment url nya itu nanti bakal masuk ke payment link sini, right, jadi kalau kita console log dulu, sini ini ya, ini gue console log Kalau kalian bingung ya console.log manual aja dah Itu gue pakai extension Console.log payment link Kayak gini ya guys ya Cukup jelas nih Cek lagi ke dokumentasi Apa yang harusnya muncul disini responnya adalah Kalian lihat ke bawah Scroll Nih Responnya itu kalau berhasil Muncul order ID dan juga payment URL Nah payment URL ini yang bakalan kita pakai Kita bisa share Kita bisa buka Untuk kita bayar si produk yang kita jual gitu kurang lebih Jadi sekarang kita coba buka lagi projectannya kalau 3000 gua balik lagi kita create payment link tapi kita inspect elemen dulu sini ke bagian konsol klik ya ini kita klik POU ada implementasi yang salah dari gua kita cek lagi ke codingannya jadi guys ternyata error gua adalah karena inv nya itu enggak ke load jadi tadi gua restart ya gua reload lagi npm randev nya ini dan sekarang errornya berubah Hai yang tadinya merah-merah enggak jelas sekarang jadi lebih jelas sini error message ini kalian bisa baca item details no name is required berarti gua ada yang salah dan ternyata pas gua cek ya ke sini ke data kita memang gua tadi ada salah di sini nih di bagian sini ini bukan product name karena kita langsung tembak ke si mitrans nya lewat endpoint yang visa to payment link ini jadi ininya harus sama persis seperti apa yang ada di dalam dokumentasi payment linknya yang mana disini item details itu di dalam array dan di dalam array punya objek di dalam objek ada name produknya kayak gitu kalau untuk yang item details jadi sekarang gue bakal coba sesuaikan lagi sorry ya guys ini jadi name aja kayak gini udah that's it dan sisanya masih sama aja kayak yang sebelumnya kita save lagi gue akan solo payment linknya jadi kita coba reload lagi disini ya gue pastikan reload dulu oke kita pencet create payment link tes sekarang muncul di sebelah kanan kalian bisa lihat order ID 74 dan ini payment url-nya dimana payment url ini kalian bisa copy dan tempel di browser yang mana ini adalah untuk pembayaran produk ini oke jadi kalau gua reload sekali lagi ya contoh ini gua pesen tiga biji deh 3 x 35 35000 350.000 berapa Nah kita create linknya ini dapat ya kan payment url-nya dan kalau lu cek ke bagian Facebook ini payment link ini kalian bisa copy copy responnya segini ke url tempel di browser lo enter Rp1.050.000 bener gak ini ID 86 ya 3 levy woman XL tracker jaket tiga biji sesuai seperti yang udah kita masukin di sini di front end kita nah tinggal gimana caranya link ini muncul di halaman kita itu sederhana banget jadi disini kita harus bikin state aja ya yang paling gampang kita bikinin state aja jadi Scroll ke atas ini bagian check out yang snap gua awasin dulu increase decrease juga gua awasin dulu biar kelihatan untuk data juga gua awasin kayak gini karena datanya udah fungsi dan untuk respon juga ini udah fungsi jadi gua awasin kayak gini kita fokus di area sini jadi kalau udah dapet payment url-nya kita bisa tampung ke dalam sebuah variabel dimana variabelnya tuh bakal gua bikin lewat state aja ya cons payment url koma set payment url sama dengan use state string kosong dulu aja di awal dan tinggal di set Hai ini konsolnya kita ganti set payment URL dengan data apa tadi payment link dot-dot nya adalah sesuai respon payment underscore you are tinggal kita munculin ke bawah alias ke komponen kita mungkin gua bakal taruh di bawah button ini aja ya biar sederhana sini aja boleh dan kita pakai komponen link bawaannya next.js tinggal ketik aja link nanti bakal muncul untuk importnya dari next link tinggal diklik aja otomatis di bagian atas Itu ada import link from next link Dan link ini ketika di klik Kita bakal arahkan ke Kemana gitu kan kayak gitu Ya udah jelas ref nya adalah ke Payment URL Yang ada di state kita Oke ngerti maksud gua dan disininya kalian bebas mau kasih klik disini gitu klik disini misalnya contoh untuk melakukan pembayaran misal kita coba save dulu ya terus kita recreate linknya nih gua mode gede dulu deh klik langsung muncul nih sini harusnya nih mana ya ah tapi warnanya putih kita ganti eh kita masukin ke div dulu kali masukin ke div masuk sini terus divnya kita kasih warna ya Ini tinggal kita kasih class name Text black Underline mungkin Underline Sama italic Gini dulu aja kayaknya cukup deh Kita coba save Cek lagi browser Klik disini untuk melakukan pembayaran Oke Jadi kalau kita klik ini Otomatis langsung masuk ya Ini nama toko gua Ini harganya dan semua detailnya Dan kita juga bisa melakukan pembayaran Kayak gini Kita coba Pake cc pay, ini gue pakai credit card ya guys langsung sukses, karena itu adalah nomor dummy yang disediakan sama mitransnya, dimana nomor tersebut adalah nomor yang bisa nge-bypass supaya mitransnya jadi sukses langsung untuk pembayarannya, nah sini error lagi, kenapa? karena ngrok gue udah reset linknya bukan yang ini, jadi pastikan aja kalau kalian pakai ngrok, linknya taruh ke dashboardnya mitrans, oke anggaplah ini udah berhasil ya, dan masuk ke dashboardnya mitrans, kalian bisa lihat di bagian payment link, yang terakhir ini yang ini, id 5 ini bener banget id5 dan kita bisa lihat detailnya juga kayak gimana sini ada lengkap ya mau di copy lagi url-nya itu juga bisa kalau pengen lihat halaman fullnya ini bisa klik view page balik lagi sini order id5 yang tadi oke aku lebih kayak gitu untuk penggunaan payment link Nah kalau gua kayaknya nggak mau ini teksnya begini gua pengen munculin link url-nya aja langsung sini jadi kayak lu masukin double aja sini mau dipdikit ya payment url plus juga kita kasih target targetnya ngeblank target underscore blank supaya pas diklik tuh mental ke halaman lain biar web kita nggak ketutup Oke kita cobain lagi ya ini kita reload kita generate payment link puff muncul kayak gini jadi pas diklik dia bakal ke halaman baru pem nah disini kan baru lebih enak order ID 39 misalkan sekali lagi ya gua pesen misalnya lima biji make sure lu pada validasi ya kan kalau ini ada error error ya karena memang gua cuman simple doang enggak validasi enggak apa-apa kayak gitu create aja oke muncul tinggal di klik 1 juta 750 order ID 29 dan sekarang kalau kalian lihat di bagian dashboard di payment link order ID 29 ini ada ya kalian bisa lihat detailnya nih detailnya udah ada juga masuk sini dan kita coba bayar langsung pakai akun sembarangan dulu gua bayarnya pengen pakai BCA sekarang misalnya BCA virtual account kita copy masuk ke virtual bypass untuk BCA gua akan newtab di bookmark gua linknya di deskripsi guy tinggal inquire 1750.000 langsung pay aja payment udah sukses ya guys ya Nah kurang lebih kayak gitu aja alurnya untuk payment link ya sungguh sangat sederhana memang untuk payment link ini dan kalian bisa lihat sini order ada satu artinya satu orang udah order nih dengan pembelian untuk payment link yang kita punya intinya linknya ada yang pakai ada yang bayar makanya disini ordernya berubah jadi satu di bagian detail payment link kalau misalkan gua bayar lagi ya kita coba lagi link ini kita klik lagi karena itu bisa lu coba bayar berkali-kali gitu misalnya ini kan jumlahnya lima lagi nih gua beli lagi langsung aja pakai CC ya guys ya pakai CC nah ini pay biar langsung sukses nah udah ya terus kalian lihat lagi ke bagian dashboard ini tadinya satu orang yang beli sekarang kalau gua reload coba nah sekarang udah ada dua orang jadi kayak gitu kurang lebih ini dashboardnya sangat powerful parah sih lu bisa ngecek apapun disini ya termasuk juga untuk payment link sebenernya lu bisa create sendiri tanpa harus lu bikinin kayak apa ya kayak punya kita beginian nih gak perlu dibikinin tombol gini kalian bisa langsung share linknya ke whatsapp misalnya itu kemana dengan cara bikin aja yang kayak disini nih ada tombol create mau single payment link atau mau bulk upload atau multiple upload lah gitu kurang lebih gue coba yang single payment link aja untuk simulasi ya guys untuk judul misalnya Ryzen 7 processor contoh apakah membutuhkan customer detail ya misalnya kita butuh detail si customer Apakah butuh alamat customer kalau iya ya boleh coba taruh gini Apakah ada yang harus kita spesifikasi in untuk customer detailnya no no aja ya Jadi biarkan kayak begini atau ini kita taruh optional aja biar nanti gampang ngurus simulasinya gitu guys ini payment id-nya dan kita bisa set expire untuk linknya bisa di set ya mau satu hari mau satu jam mau berapa itu bisa di custom juga sini gitu kan right Hai maksimum penggunaan tadi kan link kita tuh bisa digunakan berkali-kali nah ini misalnya maksimum satu kali ya payment metodenya kita pakai lengkap aja semua dan nggak perlu hal lain lagi tinggal kita masukin ID produknya misalnya tes satu nama itemnya misalnya vps1 item price misalnya 125.000 tinggal kita Scroll pencet create payment link Oke, linknya sudah dapat.
Tinggal kita copy link ini. Kirim ke WhatsApp teman lo yang mau beli produk lo atau ke siapa aja. Terserah bisa di-share ke social media kemana juga itu bisa ya. Tinggal kita buka langsung di browser. Kita enter.
Oke, Ryzen 7 Processor RP125000. Jelas banget produk detailnya 1 VPS 1 biji. Dan kita isi dulu sembarang seperti biasa untuk testing. Next, kita lihat di bagian dashboard di payment link apakah ada sesuatu di sini. Hai ini ya order id-nya ada di sini kita lihat details sekarang order masih nol belum ada yang order Nah gua bakal melakukan order sekarang nih pakai visa atau cecela pakai cc kayak gini pay langsung by Pesah please input bla bla bla bla bla bla bla ini kalian bisa ketik langsung aja ikutin 12233 tinggal Oke pembayaran sukses Alright jadi intinya kurang lebih seperti itu untuk penggunaan Mitrans payment gateway Dan saran dari gue adalah pelajarin juga Dari segi security, best practice, dan lain-lain Ya pokoknya intinya refer ke dokumentasi Mitrans Udah lah lo bisa jalan gitu Oke sampai jumpa di video berikutnya Semoga bermanfaat Jangan lupa cek linknya di deskripsi Gue Daya Frijal, bye-bye