Transcript for:
Integrasi Pembayaran QRIS dengan Sendit

Halo asalamualaikum Mas Waalaikumsalam kita tunggu dulu ya Iya Mas Sehat Mas alhamdulillah alhamdulillah Oke sudah pada bisa membuka lms-nya ya alhamdulillah sudah bisa mas Oh iya siap ini tuh yang apa untuk yang waha Itu yang kemarin pernah dibuat berarti iya Mas atau bbeda lagi Mas yang mana itu yang waha Oh itu sama kayak yang dulu sih yang cuma fokusnya enggak ke Ai Heeh Fokusnya ke api Oh oke oke Heeh misal kayak misal pakai woocommerce atau apa gitu nanti tiap Ada yang orang beli barang Iya dapat notif Wa gitu kan Iya atau misalnya tiap habis ngisi Google form Terus dapat notif di WA kalau formnya sudah masuk ya simpel gitu-gitu sih kita nunggu 5 menit lagi ya Insyaallah kita mulai ee sambil nunggu bisa dibuka ini ya Bisa daftar sendit dulu buat dapat akun sandbox-nya sama itu aja sih kayaknya yang dibutuhin Oke bismillah ee Insyaallah asalamualaikum warahmatullahi wabarakatuh ee Insyaallah kita mulai ya materi malam ini yang mungkin ditunggu-tunggu adalah ee membuat qis yang nanti bisa dipakai untuk pembayaran di kasir Nah kita bisa masuk ke sini dulu ya ke dashbo sendit untuk mendaftar mendapatkan akun sandbox Ya nanti saya juga prakk juga Oh kalau oril gimana sih gitu ya nah silakan bisa buka klik daftar Indonesia Nam saya e Misalnya namanya programmer cepat gitu ya Iya oke Oke emailnya udah kepakai ya Entar saya pakai yang lain oke oke kita konfirmasi email oke nah kebetulan karena kita bisnisnya di Indonesia kita bisa pilih Indonesia terus Apakah kita legal karena saya uji cobanya adalah sebagai personal Ya rencana Emang mau bikin cis khusus untuk programmer cepat saya ini ya ini nanti payment method-nya bisa dapat cis dari dana link aja ewallet virtual account nah cuma minusnya kalau yang pakai sendit dia enggak bisa kartu debit kredit virtual account enggak bisa Ya nah tapi yang kita butuhkan yang curies jadi enggak masalah kita next kita Add to Tech ya terus omsetnya per bulan 1 sampai R50 juta terus kita mau bisa pakai website ya sama payment link sebenarnya ini enggak enggak masalah mau diisi yang mana masuki nomor HP Oke kita duit letter ya good letter kita akan uji coba pakai tes ya Jadi kita pakai tes dulu eh versi tesnya ada QR Code ini ya Nah itu nanti kita pakai qis ini Oke kita pakai versi tes dulu Tapi kalau teman-teman udah eh oke mau langsung live langsung bisa continue activation aja ya ada logo bukti bisnis ya bisa website kayak gitu ya Nah syaratnya website-nya udah live eh contohnya kan saya programer cepat udah live ya terus adaod KTP NPWP dan selfie Ya cuma ini doang cepat ya Ee jadi itu kalau mau bisnis personal tapi kalau enggak punya website Gimana bisa pakai sosial media Instagram atau juga marketplace atau e-commerce ya akun di topad atau di mana ya yang lainnya itu bisa juga untuk verifikasi kalau tidak memiliki mm website sendiri oke Nah kita lanjut untuk implementasi setelah kita register sendit ya kita mau membuka fi-nya Oh entar klik aja ya ini ya Nah ini ada payment api kita bisa Klik run in postmen untuk uji coba nah kita akan pilih fog collection ya bisa fog collection nah ini silakan bisa login atau register kalau belum punya saya pakai akun saya Oke ini contoh eh sendit kita F collection untuk ngetes fi-nya nah ini ya Ini ini yang atas saya hapus aja ini enggak kepakai nah ini yang barusan saya voog ya Nah kita akan pakai ini eh new payment api yang QR Code nah ini nah ini jadi karena kita masih testing ya testing uji coba kita akan ng-create close atau fix amount jadi kebetulan qis itu kan ada dua macam ya pertama adalah close berarti nominalnya kalau kita scan itu sudah ada angkanya misal 5.000 r.000 kayak gitu ya Ada juga yang Open amount Open amount berarti eh apa namanya orang bisa Ngisi sendiri Contoh mungkin dipakai untuk donasi di masjid dan kawan-kawan Nah karena kita masih testing kan enggak mungkin kita bayar Beneran ya kita bisa pakai simulate payment nanti kita simulasikan eh statusnya terbayar kayak gitu ya nah gimana caranya jadi pertama untuk kita bisa nyoba Ee api-nya Kita kita bisa buka di halaman setting eh ada namanya api Keys ya ini bisa kita buka lalu kita bikin api key di sini bisa generate Secret account Secret Key ya Nah kita cuma Butuh Money in WR sisanya nan ya kita enggak butuh yang fitur lain kita hanya butuh untuk nah namanya misalnya curis kasir super kasir gini aja ya kururis kasir gener ke Nah ini bisa dicopy ya Atau saya download deh nah ini disimpan eh apiq-nya karena nanti enggak bisa kita lihat lagi kita bisa close Nah kita nyobanya gimana Jadi kita bisa pilih close fix amount eah ini ada authorization ya Nah biar enggak nyeting satu-satu kita bisa masuk ke api sended ini authorization username-nya diganti tadi ya Ini ini masih development ya maka tulisannya xnd development kita bisa cek e ini post close fix Ini saya save dulu ya fix close di binnya itu ada nilainya criies-nya nanti berapa ya terus ada currency IDR QR Code dana description metadata nih sementara saya enggak description sama metadata mungkin enggak usah dihapus dipakai enggak usah dipakai ya karena yang Kayaknya mandatory cuma ini maka kita coba langsung send nah dapat ya r.000 kita coba buka di dashboard accept payment E atau QR Code ya Coba transaction mana nih Nah ini ya Oh ini data tes ya Oke ini oke ini belum ada transaksi ya ini PQR payment Oke viurisnya munculnya di mana enggak muncul ya mungkin karena harus dibayar dulu ya ya untuk sendit langsung daftar a ya langsung daftar aja nanti pilih yang personal aja oke oke ini kayaknya harus dibayar dulu deh Biar nanti masuk ya Uji cobanya Oke kita coba ee simulate payment nah ini ada simulate payment dia butuh PM ya payment method-nya kita bisa Scroll ke bawah ada ni PM Oh sebelumnya ya kita mau ngecek statusnya dulu ya Jadi j general ada get payment request ID ya Jadi ada atget payment method ya di payment request Id ini kan ada nih ya payment request PR kita copy masukkan di sini statusnya apa gitu ya kita pengin lihat statusnya adalah pending ya ini sama dengan yang di sini ya statusnya pending artinya belum dibayar Nah kita akan cuci coba eh statusnya kita jadikan bayar jadi kita simulate payment ini kita butuh PM Pap payment method jadi di sini ada cries ya QR Code ini pm7f ini kita copy simulate payment kita masukkan Sini pm-nya Send Oke we are Processing payment for payment method ini payment sukses Nah kita bisa cek statusnya lagi Ya Send sekarang statusnya succeed nah artinya dia sudah sukses terbayar curis-nya cuma saya penasaran di sini Kok enggak muncul ya oh inih ya pending ya pending 15.000 gr-nya Oke jadi itu ya cuma di sini harusnya muncul Nah itu nah kita akan uji coba juga nanti ee Pak pakai akun re saya ya Nah pertanyaannya Mas ini tadi pas bikin QR kan langsung dites kode qr-nya di mana ya Ini qr-nya ini ngambilnya di sini som random QR string ya ini di sini Nah mas kalau eh apa namanya Nanti realnya kayak gimana bentuknya ya kita coba pakai akun send it Beneran ya ini saya coba logout dulu pakai akun saya oke pakai codingnya akun coding works ya IC case saya buat nanti bisa bisa saya hapus lagi kan alright uji coba quriis E N N nan Jadi sebenarnya nanti kalau mau ganti apa dari tes ke ini tinggal copy url-nya aja ya nah ini di sini authentication bisa langsung diganti production saya coba Bikin lagi ini ya is mungkin kecil aja biar saya bisa ngetes enak Rp500 nah ini ya cuma kok enggak muncul ya apa dia error ya Kok masih S random string coba authorization basic out ini pakai out yang baru ya yang production he eh Nah ini ya kalau real Harusnya kayak gini ya Nah ini coba Saya copy Ir generator tek Ya oke Ini coba saya lar saya Scan ya kalau mau dibayarin juga boleh ee oke nah sebentar saya scan Oke coding works benar oke masuk saya screenshot-nya share ke grup ya Oke ini sukses jadi kalau udah sukses saya bisa cek ya statusnya di PR ini gate payment request oh nih ya autorization-nya juga masih salah kayaknya nah ini ya dia sudah statusnya succeed Nah kalau kita cek di sini oke ya kita lanjut pakai akun tes dulu Oke jadi sama ya nanti pakai kita akan pakai akun tes e gimana kita ngimplementasinya ke flatterfow ini sayain pakai akun saya oke lanjutin yang kemarin ya Oke lanjutin ee oke sebelum nya kita masuk dulu ke halaman payment method ya jadi ketika dia e apa curies diklik dia otomatis langsung ke halaman ini kan Nah pertanyaannya adalah proses menggenerate curies itu mau kita lakukan di mana ya kan kalau halaman ini apa namanya payment method ketika klik tunai kemarin kan cash klik tagih baru bayar Nah kalau ini Eh saya kepikirannya ya Otomatis baru diproses di sini ya nanti muncul qr-nya datanya di di sini oke nah cuman ee sebelum kita ee mau implementasi karena kan artinya di struktur datanya akan ada perubahan ya ketika tipe datanya adalah ini ya contoh QR gitu ya kita butuh nyimpan dua hal ya pertama tadi ee sebenarnya cuma dibutuhin ini ya payment request id-nya ya ya karenanya ini kan dipakai untuk ngecek status pembayaran Oke Yang kedua kita harus naruh tempat untuk nyimpan apq ya ap-nya harus kita simpan di lokal agar nanti kita bisa nge-hit Api oke oke yang pertama ee ini dulu ya yang payment request ya Jadi kita akan eh nambah field namanya adalah quies payment request ID tipe datanya adalah string oke terus mungkin eh kita juga akan kasih ID ya jadi adalah ID transaksinya tipenya juga string nah n gate payment request id nah ini untuk ngecek ini kan Id sendit-nya ini adalah ID transaksi kita Oke maka kita akan mulai eh implementasi yang pertama Bagaimana nyimpan eh sendit dulu ya apk-nya nah saya akan secure persisted field untuk ngamanin data saya akan tambah namanya api key tipenya string dia sifatnya persisted default-nya Eh ini ya N0 ya enggak ada isinya maka kita harus bikin di halaman setting eh mana kemarin profile ya E nah ini ya APK send it kita bikin satu halaman baru aja e Blank send it P setting page e dikasih tombol back Oke dalamnya kasih kolom warnanya putih ya biar enak biar sama style-nya elevation-nya satu kita kasih Pading 16 kolom input ya text field text field ini fiq-nya oke Biar agak rapi kita tipenya bikin outline aja ya outline sama button simpan 16ion-nya nol ioke ya Oke ini kasih nama apa ya textfed sanded apiq Initial value-nya ngambil dari appstate Send apiq terus label send it api ke here Oke nanti ketika simpan action-nya simpel ya on tab adalah update APP state sended ap set value dari widget state lalu navigate back oke ya jadi klik simpan dia langsung balik ini ada apa nih ee enggak apa-apa ya kita langsung nunggu dulu Loading ini kenapa enggak mau custom function udah oke padahal ya Oke kita klik X ini kita bikin sended apiq untuk nyimpan datanya Udah sambil nunggu tes eh ke halaman ini ya payment method nah ketika qis dia akan ngelempar data ee eh apa kalau saya pinginnya gini kalau ternyata datanya itu Nul maka kita kasih ini ya tolong input sended apik dulu gitu ya jadi eh saya mau kasih action on tab curies itu saya mau kasih sebelum navigate Saya mau kasih conditional dulu Jika ternyata state exend itu is not set or empty Jadi kalau kosong saya kasih information eh Kris belum bisa digunakan silakan set di halaman setting tapi kalau udah eh bisa langsung navigate kuris ya oke Oke di pos ni tes tambah satu check out pilih bayar curious Oh bentar di instan reload dulu ya Oke kita cek pemb aran Nah ya karena datanya masih kosong maka dia enggak bisa menggunakan metode pembayaran qis maka kita set copy dulu Kita uji coba ya setting Oh ini malah belum saya setting ya ketika diklik dia pindah ke halaman curis [Musik] order ini action Oh oke Ya ini sudahah simpan oke aman masuk masuk cis Nah nanti ee sebelum ketika dia ke sini dia akan nge-hit api untuk ee apa ngget lalu ketika sukses kita akan munculin datanya dan sekaligus menyimpan data transaksinya ya itu oke nah saya konsepnya adalah Disimpan dulu data transaksinya terus sambil menunggu kita pakai back and query ee menunggu quies-nya nanti akan disimen di sini gitu ya Oke kita Bali oh ya ada satu lagi ya Yang kayaknya kita ketinggalan eh adalah data respon dari sendit ya sendit datanya kita belum simpan kan eh Jadi kan ketika ngit kayak gini kita perlu nyimpan qis qr-nya juga ya ee apa curiis-nya Jadi kita bisa juga simpan data ini ya satu gelondongan ini kita bisa simen semua untuk memudahkan dengan cara atau mungkin sementara kita simen QR nya dulu lah ya qr-nya kita simpan berarti di transaction curiis data gitu aja ini string ini request id-nya ini quries datanya jadi qr-nya ya Oke kita balik ketika dia masuk ke halaman apa namanya ini sebentar kita cek halaman Quis nah ini ya harusnya nanti dia ketika ke halaman ini kita sifatnya eh dia enggak bisa balik ya enggak bisa balik Jadi kan Lucu ya Kalau udah ke grade transaksi kan datanya kosong di halaman sebelumnya maka ke halaman sini kita ketika halaman ini dibuka kita create transaksi ng-hit api dapat curies-nya munculin curies-nya tapi nanti ketika klik back ya ketika tombol back diklik itu kembalinya Enggak di sini ya kita langsung ee apa ketika diklik back itu dia baliknya ke halaman transaksi harusnya Oke jadi ini Mungkin tombol back-nya saya ganti aja kita close terus saat ke sini mana nihis atau ada ide yang lebih enak enggak ya oke gini aja jadi ketika di halaman payment method kita langsung ngit api aja ya jadi curi Terus dapat id-nya baru dilempar sana saya kepikirannya ini bakal kepakai juga ketika dari halaman ini mana kemarin payment Mat detail ya payment transtion betil mana Nah ini nah dia klik bayar dia juga akan ke halaman cries juga kan Jadi mungkin di payment method aja kita akan ketika dia apa ketika dia klik curiis ya kita ini curiis jangan navigate dulu tapi dia langsung eh ngebuka nge-heit api nyimpan ya jadi add update APP state langsung data transaksinya kita simpan dulu aja ya kita add tulis datanya adalah transaction total price kita ngambil dari appstate ya Calculate total ya Calculate total card ini dari appstate card list oke terus payment method-nya quies QR card list ngambil dari appstate card list terus cash return enggak kita pakai karena Tipenya apa enggak kita pakai ya statusnya UNP belum terbayar terus date-nya pakai Global properties current [Musik] time Eh P amount Harusnya sama cuma belum ya kalau untuk ID kita ngambil ini aja ee Apa nama dat time from unix ya kita ambil miliscond [Musik] Oke Kok enggak mau ya sebentar parentime oke lalu nah ini enggak Belum ada datanya ya belum ada datanya kita update oke oke tapi enaknya sepertinya ini simpan kita nge-hit api dulu aja ya nge-hit api atau generate dulu enaknya nih sepertinya lebih menarik kalau eh generate curies dulu ya Jadi nanti langsung sekalian ee apa namanya di sini kita simpan ini ada tiga ya curious request tadi Curious datanya langsung bisa kita update sekalian aja Oke deh berarti kita close dulu kita lanjut eh implementasi api key dulu deh nah ini kita dimasuk ke menu api kita bisa pilih create api call create is ini metodennya post Nah kita samakan ini ya close fix amount diketik copy gini Terus eh kita butuh header ya ada namanya athorization ini authorization.tik2 sama eh bearer token jadi ini adalah tokennya cuma nanti tokennya kita eh ngambil dari variabel ya jadi nanti kita bikin namanya variabel token setnya ini call kayak gini kurang lebih ada variabel terus bodinya json sessionnya kita ngambil dari sini ya body ya ini bodinya kita copy oke nah yang akan kita rubah hanya amount ya Jadi kita bikin variabel namanya amount tipenya er body amount ini ya oke save lalu kita mau coba tes misal amount-nya 500 ini kalau kita TES API call maka dia akan error ya karena tokennya kosong Dia ee butuh token Nah tokennya itu ee kalau di sini kan kita bentuknya username ini enggak bisa dicopy ya harus di-convert ke base 64 dulu nah cuma untuk UJ Coba kita diheer ini bisa buka ya datanya kayak apa Oke sebentar ini kok enggak mau ya Mana tadi kok kepala nah ini ya Oh ini basic Oh sorry ya namanya basic Kita uji coba dulu ininya bukan di header Bukan tapi basic ini tokennya kita kasih sini ya kita tes f call Nah kita dapat apa nih PR sama qr-nya ya ini QR dana ini ya string n yang kita butuhin adalah ID untuk ngecek statusnya lalu kita juga butuh QR string untuk kita simpan jadi yang butuh ya kita kita butuh Hanya dua itu maka ini ada ID Kita adjason PAD kita cari lagi yang QR QR stringnya ini ya QR string nah ini kita mungkin QR request ID namanya ini QR data Oke kita simpan nah ini pr-nya adalah gimana menggenerate token ya Nah untuk bikin token ini kita eh harus bikin custom function kita bikin function generate jadi define-nya adalah username oke ya sama password lalu kita generate base 64 Oke e generate bas 64 from parameter username user for authorization basic Oke kayak gini ya username password and code base 64 string Oke kita copy function kita save function-nya ini ada cod-nya perlu kita rubah dikit ya Ee ini harusnya atau atau kita biarin aja ya Eh 0 N0 jika ini e gini aja karena ada kemungkinan password-nya kan kosong ya kita cuma butuh username aja oke oke kita lanjut ke sini Jadi sebelum update state kita akan http request dulu call ya F call kita manggil grade curies variabelnya yang pertama adalah eh amount amount kita ambil dari Calculate ya total card daristate card list Nah yang kedua adalah token tokennya kita ambil dari generate bas4 username-nya ada isinya kita ngambil dari appstate sended ap IQ password-nya kosong Oh ya dia harus diisi Oke ber kalau harus diisi kita rubah dulu cod-nya ya berarti password-nya dihapus ini Nul ya Nah kayak gini Oke kita coba simpan J cuma a username password-nya kosong Jadi kayak yang di poman tadi ya kita cuma isi username kita tunggu dulu Ben Kok lama ya n udah sudahah sukses kayaknya oke Ya sudah sukses kita balik lagi ke sini C ini token bisa custom function generate base 64 username-nya dari appstate send it a confirm Oke ya Terus update state saya Cut pindah true oke ya Jadi kalau sukses aja api-nyaung Update lalu kita lempar ke mana nih ini ya ada dua data pertama adalah Kis payment ID cis data payment id-nya ngambil dari action output api yang Jason body redefine pad request ID nah Datanya ada Adah action output api result Jason body yang quries data Oke confirm jadi kita udah ng-hit api sukses dapat quies-nya kita simpan datanya e gitu ya apa namanya nanti kesimpan datanya ya oke terus habis itu ngapain nih dia harusnya buka halaman ini ya buka halaman transaksi ya harusnya nge-close buka halaman transaksi Oke atau langsung ke halaman cries aja ya Navigate to payment page nah cuma ini kita butuh ini ya apa namanya sebentar kita coba mungkin sementara kita lempar ke halaman transaksi dulu deh transaction page tapi replace root ya jadi enggak enggak bisa ng-pack Kita tes dulu apakah datanya masuk atau enggak terus ada yang tanya Mas nih kalau apk-nya dieverse datanya aman Atau enggak ya aman aja ya soalnya kan datanya disimpan di hp-nya masing-masing kan misalp dia reverse ya dia cuma bisa ngedit datanya dia sendiri kan enggak bisa ngedit karena sendit-nya kan dietting manual di user masing-masing karena ini kasusnya eh offline kan ya gitu harusnya Enggak ada masalah dia dia enggak bisa ngambil datanya orang lain Oke kita coba ee pos ya ini pembayaran curiis nah udah masuk ya curiis terus kita cek datanya coba di appstate Oh ya cardnya Harusnya kita hapus juga ya total price card list item pay Pon QR Iya payment amount nah ini masih S random QR string ya Oke berarti ini udah ini Nah nanti ketika kita klik dia redirect ke halaman CY harusnya ya kita mau fokus di sini dulu oke kita balik cuma tadi enggak ada halaman loadingnya ya Oh ya sambah harus nge-clear ya datanya kita clear ketika klik is sebelum navigate kita clear dulu update appstate card list-nya kita clear value-nya oke ya dan di halaman yang lain ketika dia Kosong harusnya diedirect ya jadi kayak misalnya halaman kalau card kan kita udah ada ya Ee Jadi kalau kosong dia harusnya redirect balik ke hal halaman pos Nah mungkin untuk yang halaman payment method yang lain harus kita validasi Ya intinya halaman ini enggak bisa dibuka ketika cardnya kosong Oke kita lanjut ke sini dulu Ini udah ketika diklik bayar dia akan ke halaman cis oke ya dia akan halaman curis simpelnya Saya butuh parameter indeks ya indeks integer confirm nah ini ketika diklik maka Navigate to curies lemparp ngambil data indeks dari transaction data structure field atau datanya langsung kita lempar aja ya mungkin ya lebih enak jadi enggak perlu ngulang ee oke sebentar berarti kita ke cuies payment page dia butuh data transaction kita type Oke balik ke transaction detail define Oh Cak kepencet [Musik] ini plus transaction value-nya transaction ya confirm lalu ke gaman cis ini ini kita icon kita replace Oke Ir nah ini ada barcode ya diganti Toi barcode Kita pindah ke sini di bawahnya ini Mana tadi oke oke datanya becode value-nya ngambil dari transaction data structure keis data oke terus jumlah pesanan subtotal ee sama ya ini ngambil data dari dari transaction berarti card list diambil F number of item ini tek kan ya transaction data structure C list number of item defaultnya no0 subtotal ngambil dari transaction data structure total price Rp0 Pajek diskon estimasi Ini sama [Musik] ini price Oh iya saya lupa ya ini harusnya dikasih number format desimal Rp juga sama transaction total price [Musik] desimal Rp oke ya Nah terus kita akan ada sebuah proses di mana cek status pembayaran ya cek status pembayan eh jika kita klik maka dia nghit psendit Apakah ngecek cis-nya itu sudah Ee terbayar atau belum jadi ini saya kasih statusnya saya combine teks aja ya sama cis ini ini statusnya adalah transaction data status dia unpaid ya nanti kalau udah kep paid otomatis kita mungkin Qur sudah terbayar statusnya jadi paid lalu balik ke halaman transaksinya ini transaction bayar Oh kok enggak muncul cis-nya kuris datanya MT Ohh sebentar kita cek ya E nah ini ada ya kiris a data transaction kita lempar Oke cis data Oke klik bayar nah ini kok enggak kelempar ya cur payment request ID sama cis datanya parameternya kosong Coba kita cek Apakah ada kesalahan saat di payment transction detail Oh sor ya ya ini create data kosong harusnya dari pagech parameter ya maaf-maaf kita transaction Makanya kok datanya kosong Oke ter section QR bayar nah ini qr-nya ya Oke unpid kita akan coba ee bikin api untuk ngecek payment jadi kan kalau dia ngecek itu pakainya ini Ya Send It payment request ID Oke kita balik ke sini ke Ipi call cek payment status Oke ini ada parameternya ya Nah cuma dia pakainya ID kayak gini kurungnya kurung siku variabelnya request ID ya namanya request id jadi ini harus sama dengan ini ya ini string lalu headernya authorization basic token sama kayak yang tadi ada variabel token string add call kita coba tes e tokennya minta sini dulu ya Ee token nah ini kalau request id-nya diisi kan dia ada belakangnya Ini ya id-nya masuk kita coba yang sini ya request id-nya berapa nih Nah ini ya kita copy kita tes ap I call Hm enggak ada datanya invalet ID Oke Oh ini masih yang pakai harusnya pakai header yang ini ya eh maaf Oke dapat Nah itu ada statusnya adalah status pending ya Nah kita cuma tertarik sama data status aja jadi ini status terus spending add Data Type ya tadi ya saya add data type saya namain status Kita uji coba kalau ee apa namanya saya lupa jangan lupa save dulu kalau kita simulate payment ya simulate payment eh Oke kita butuh payment request id-nya tadi TP call eh enggak enggak kesimpan ya sebentar Oh iya enggak kesimpan cek payment status kita ulang ya ini kalau variabel pakainya ini ya Eh kurung siku auutorization basic kan variabelnya ada dua request ID dan token ni string juga add call responnya akan saya ngambil dari sini aja basic request ID ngambil dari sini ya [Musik] H tulisan autorisationnya Kayaknya salah tadi Oh iya iya auto Iya autorization nah oke save t call oke ya ini masih pending kita tertarik datanya hanya status ini Kita adjason PAD status save dulu biar enggak hilang Kita uji coba ee Ini ada PM ini kita copy ini ya kita simulate payment Hah Apa nih incorrect amount Oh bayarnya harus disesuaiin ya set Oke Harusnya sekarang kalau dites api call dia succeed Oke jadi kalau pending berarti masih enggak masih belum dibayar kalau suced dia sudah dibayar ya Oke kita balik ke halaman C nah ketika ini diklik e berarti kita melakukan api call yang cek payment status ada dua variabel pertama token kita dari generate bas 64 username daristateq ya terus Terus yang kedua request id-nya ngambil dari transaction page parameter yang request uris request payment request ID ya oke di mana kalau sukses kita akan cek conditional eh Jika ternyata action output-nya itu sebentar jadi kan kita pengin lihat eh si binya ya data bodynya itu jika bentar mana tadi action output respon option kok enggak ada binya Ini Jason body predefine pad status Jika ternyata equ to misalnya e tadi Apa sih teksnya suaked ya kita coba tadi Oh [Musik] saksi ini ya tulisannya ya tadi ya Oh lupa benar enggak sih bahasa Inggrisnya gini ini Nah kalau suced nah ini ya succeed berarti dia ee sukses pembayarannya tapi kalau enggak berarti kan false berarti kita kasih eh information dialog kiris belum dibayar Nah kalau udah kita kasih information dialog juga Nah kita update upstate-nya ya update upstate transaction list update index at index indeknya ngambil dari transaction parameter kita ambil Oh iya ya ini kita enggak dapat buat enggak dikirimi indeksnya Ya misalnya kan kita butuh indeksnya untuk ngupdate ya Oke berarti harus kita butuh indeksnya di sini karena minta dilempari data indeksnya indekser [Musik] lalu di cas berarti di transaction detail juga butuh indekure lalu di transaction page mana Oke ini ketika buka dip satu lagi indeksnya ya indeksnya adalah transaction item indexar dia ar ke transaction detail ketika bayar dia juga harus melempar data indeksnya indeksnya jika ngambil dari parameter indeks Oke jadi nanti diqis ketika ini diklik update ini ya buttonnya Mana ketutupan kita bisa update kita bisa indeksnya dari page parameter yang di-update update field adalah statusnya paid lalu navigate back Oke request id-nya ngambil dari Oh ini yang ini ya with api transacction data structure request ID token udah Udah oh kok masih merah transtion index sudah benar Oh ini transaction-nya Oh sor Sor transction index [Musik] transacction Masih error kenapa ini variable value config in for epical call akan Udah kok ini masih keet yaction [Musik] dan nol gu ya Oh harus dikasih value kalau gini mau enggak Oh mau juga aneh nih kita coba ya harusnya dia karena Statusnya sekarang sudah paid bisa keupdate statusnya ya oke posos section ini masih unpid bayar cek status pembayaran Irus sudah dibayar back Nah gini ya Ca Kok dia harusnya belum keupdate datanya ya Karena kan dia ngambil datanya dari sini ya di parsing Oke kurang lebih itu berarti udah kita coba pakai cur benaran ya saya coba APK sended-nya pakai yang real tadi Lupa saya san kodenya aturan fq coba Kus enggak kepakai ya kita bikin lagi right n nan nan ini saya copy ya Oke kita coba masukin simpan posos Oke pilih pembayaran Yuris ini harusnya ada loading ya Nah ini unpid layar ini curies-nya Real Nih coba saya scan Makanya kurang besar ya kelihatan enggak nih Oh bisa oke sudah saya bayar cek status pembayaran Oke ini harusnya cuma ee apa datanya yang keupdate di sini ya harusnya dia ngambil juga di situ oke Ini udah bayar kita cek di dashboard eh transaksi nah ini ya transaksi 100 barusan Oke ini kita berarti udah sukses ya yang mau masuk ini 100 nah ini kalau yang e skemanya offline ya Jadi emang orang harus daftar send dulu dapat apk-nya nanti dia setting sendiri di sini di halaman setting nanti baru bisa jalan nah ini ada yang pertanyaan kalau datanya online gimana misal di reverse engineering pun eh berarti balik lagi ke api backend kita yang harus diamankan karena kalau aman ya dia cuma bisa seolah-olah ya kalau misal dari R engineer ya dia cuma bisa ngambil data-data apa sih Eh token login ending-nya juga enggak ada masalah aplikasi gojek kalau saya R engineering Ya saya bisa dapat tokennya dapat macam-macam fi-nya saya hit Akhirnya saya bisa tahu Oh username password ini itu eh saldonya berapa itu saya bisa tapi kan artinya dia tetap hanya bisa ngakses data dia sendiri gitu kan enggak bisa ngakses data orang lain Nah kalau masalah itu lebih kalau online berarti e sisi pengamanannya yang lebih ketat adalah di sisi back end-nya kurang lebih kayak gitu ya Oke ini Udah Ee udah bisa jalan ya Secara umum Garis besarnya kayak gitu home total penjualan total transaksi ini kita bisa edit berarti kan kalau total transaksi di halaman home ini kita bisa pakai apa appstate transaction list number of item number format eh desimal gitu ya terus total penjualan juga sama nah ini cuma enggak bisa ya kalau di totalin kita butuh eh function ya Eh parameternya adalah transaction list yang kirikir adalah data type transaction is list ya benar terus return-nya adalah number integer get total transaction value oke eh sum total semua total press transaction dan dikembaliin ya pastikan yang dilempar adalah data Lis Oke kita lihat Oke transaction total price return total oke Kayak udah oke sih kita simpan save function Oke kita balik lagi sini sum total transaction ngambil dari appstate transaction list format desimal automatic display as currency Rp nah cuma harusnya dikasih filter juga ya harusnya Dit yang tambahin yang statusnya k paid tuang ya ini kan berarti yang unpid juga kehitung ya tapi kita coba dulu aja Oke ee Datanya ada yang apa nih kemungkinan ada yang null ya datanya kita cek return-nya kita bikin enggak n label aja Oke kita Fin sama kita kasih default value biasanya biar enggak error ya default value-nya 0 total transaksi default [Musik] value-nya nol coba lagi oke Ya sudah sukses ya ada dua transaksi total penjualan Nah mungkin kalau kita pengin edit hanya yang statusnya paid kita bisa tambahin ya Di cod-nya all total price only with status p Oke dia ngeceknya kalau transaction oke nah ini kayaknya cod-nya agak bermasalah nih coba dulu deh di transaction Oh dia strucknya di transaction status ya oke deh oke Enum Oke aman kita coba lagi nah ini harusnya kalau yang logic-logic kayak gini biasanya e ada di backend ya kita coba pos tambah pembayaran cis harusnya diketik klicklist roading dulu gitu ya ini Unpad ada 100 100 100 seharusnya enggak nambah ya total transaksi juga Sama ya mungkin harus nanti kita filter hanya yang paid aja gitu kan atau mungkin di sini malah dikasih filter semua paid unpaid gitu ya ya kayak gitu nanti kita kasih filter juga di sini oke Ini pos ini produk ter next mungkin besok pertemuan berikutnya kita coba printer ya printer buat nycan Nah itu ee apa Nanti kita rapikan lagi [Musik] ininya setelah itu habis printer Oke karena ini datanya lokal ee printernya Pakai printer thermal ya nanti ya yang printer bluetooth thermal itu nanti saya share dulu ya yang EE jenisnya Kayaknya ada yang harga rp100.000-an kok Nah habis itu kita coba nanti mobile deployment ee ee deploy ini ke aplikasinya di Play Store sama App Store ya yang iOS gu cuma yang iOS kayaknya bluetooth-nya mungkin perlu effort lebih jadi nanti kita dicoba di apa di Android dulu Nah kalau ini udah beres next kita baru eh Belajar bikin backend-nya setelah itu back end habis backend-nya oke kita implementasinya kasirnya full semuanya dari api jadi ggak ada itu ngit api apa S ya api Dili itu gak ada karena nanti yang handle itu harus di sisi backendnya jadi di sini akan lebih banyak api call kayak nambahuk edit l terusuk yang check out nah semuanya ada di sini dan nanti kita ee belajar juga Biar dari sini itu ada webhook ya jadi webhook-nya ngabarin ee setiap ada transaksi di sini itu ngabarin kita gitu kita ngabar dapat kabar Kalau ada transaksi gitu oke Ada pertanyaan dulu enggak ya untuk materi malam ini sejauh ini sampai barusan kita implementasi sendit-nya yang backend-nya nanti setelah ini setelah yang printer ya kita fokus offline-nya yang offline-nya selesai dulu habis itu kita lanjut materi yang backend plus integrasi fi-nya Jadi mungkin masih ada beberapa pertemuan ke depannya setelah yang ini back end-nya nanti cara saya pakai yang simpel aja sih antara saya buatkan simpel ada cor-nya juga atau versi enggak ngodingnya sih atau nanti siapa tahu ada beberapa open source yang tinggal pakai ya bisa di dipakai saya nemu sih beberapa gitu ya printer dulu ya jadi habis ini besok Jumat Insyaallah kita bahas printer dulu ya Jadi kalau ah printer kan ini aplikasinya Udah beres nih yang aplikasi offline-nya udah bisa nyimpan data sudah bisa bayar tunai sudah bisa bayar cis terus bisa untuk eh nge-print dulu itu kan sebenarnya diownload APK pun misal enggak kita rilis sudah bisa dipakai internal Nanti kalau udah rilis kan sekalian nah habis itu kita baru bahas yang versi online ya backend sama integrasi api-nya siaplah nanti saya share ya Fi yang eh open source Sebenarnya ada juga ini saya ee udah pernah bikin ee apa namanya ini warung ayo cuma enggak open source sih ini udah bisa sebenarnya udah bisa nyambung ke payment gateway-nya banyak banget ada banyak ya sendit macam-macam cuma nanti mungkin saya antara bikin kayak gini tapi versi simpelnya kita yang enggak ngoding gitu ya atau yang lainlah nanti saya siapin gitu nanti cari yang back yang simpel-simpel aja L Yang penting kan kasirnya jalan ya atau bahkan mungkin datanya kesimpan di Google spreadsheet atau supabase nanti kita bahas lebih lanjut yang penting eh kita fokus ini bisa rilis dulu bisa nyetak printer udah oke kan sudah kayak eh udah aplikasi kayak kasir beneran bisa rilis Android sama App Store iOS baru kita bahas yang versi online-nya gitu dan menariknya adalah kalau teman-teman belajar versi moding offline dulu terus baru belajar versi online itu nanti ke depan kepakai itu versi offline-nya JAdi misal ee aplikasi itu bisa jalan online offline gitu jadi ketika enggak ada internet dia tetap bisa nyimpen transaksi gitu kan Nanti ketika online beri sinkron Nah itu kan berarti datanya sementara disimpan di lokal Dulu ketika ada koneksi internet dia baru ngesinkron gitu gitu Nah itu ilmunya ini kepakai sih gitu ya oke mungkin itu dulu ee ada lagi pertanyaan kalau enggak kita sudahi dulu ya malam ini Alhamdulillah sudah bisa sampai bikin quries integrasi kita ketemu lagi Insyaallah besok hari Jumat kita belajar bikin custom action ya custom action untuk integrasi dengan printer bluetooth di Android tentunya ya Nah itu pastikan nanti pakai akunnya harus Pro karena kalau pakai yang free kan enggak bisa karena cuma bisa web ya kalau di Pro kan kita harus ee printer mau enggak mau harus di apa jalan di HP akses bluetooth dan sebagainya di android langsung jadi nanti kita wajib pakai akun Pro Oke mungkin itu dulu materi malam ini dari saya terima kasih asalamualaikum warahmatullahi wabarakatuhumsalam