Midtrans Snap
Midtrans snap merupakan salah satu Payment Gateway yang dapat digunakan pada SWIFT. Pelanggan dapat melakukan berbagai macam pembayaran secara langsung saat berbelanja di web magento dimana web akan mengarahkan pelanggan ke pop-up dialog midtrans. Untuk mendapatkan credential snap dapat dilihat pada dokumen snap ini.
Snap Base
Pada metode pembayaran ini memuat beberapa konfigurasi basic dari yang terdapat pada Snap, seperti API credentials. Metode pembayaran ini biasanya tidak di enable untuk dimunculkan pada halaman Frontend website, melainkan untuk melakukan konfigurasi basic dari Snap saja.
Jika memang dibutuhkan, metode pembayaran ini dapat dibuat menjadi Enable. Sebagai contoh yaitu untuk menampilkan semua metode pembayarannya Snap dalam satu popup yang sama, di halaman checkout Swift cukup menampilkan 1 opsi metode pembayaran general, misalkan diberi nama “Snap Base” (atau bisa yang lainnya).
Konfigurasi Snap Swift oleh Admin
Magento Backoffice > Store > Configuration
Gambar 1. Tampilan menu pada admin backoffice.
Sales > Payment Method > Base Snap Configuration
Gambar 2. Tampilan Base snap pada payment method
Bagian-bagian Base Snap Configuration
Gambar 3. Tampilan konfigurasi bagian Base snap
Enable : Set enable Yes hanya jika diperlukan untuk menampilkan semua metode Snap dalam 1 popup.
Server Key : Adalah API Key yang akan digunakan untuk otorisasi saat memanggil API Midtrans server Key
Client Key : Adalah API Key yang akan digunakan untuk otorisasi pada saat memanggil API midtrans.
Payment Success URL : Adalah URL dimana pelanggan akan diarahkan ketika proses order berjalan Success
Payment Failure URL : Adalah URL dimana pelanggan akan diarahkan ketika proses order tidak berjalan atau Gagal
Is Production : Adalah pengaturan penggunaan Base snap payment set YES jika akan digunakan di production, set NO jika tidak digunakan pada production.
Enable 3D Secure : Adalah untuk aktivasi tingkat keamanan transaksi kartu.
Prefix : Menambahkan prefix di awal order.
Merchant ID : Adalah kode unique yang didapat pada akun midtrans untuk memproses pembayaran
Payment from Applicable Countries : Adalah pengaturan untuk akses pembayaran Pembayaran
dari Negara yang Berlaku, Set pada All Allowed Countries jika ingin menerapkan metode pembayaran Base Snap Payment di seluruh negara, set Specific Countries Jika hanya ingin menerapkan di beberapa negara saja.
Payment from Specific Countries : Pilihan untuk negara yang dapat menggunakan metode
pembayaran Base Snap Payment setelah memilih opsi Specific Countries pada Payment from Applicable Countries
Instruction : Pesan yang akan dimunculkan pada pelanggan saat melakukan pembayaran pada pop up midtrans.
Snap List Enable Payment : Adalah List payment yang available dan dapat digunakan serta dimunculkan pada website.
Tampilan Snap Base Pada Frontend (Jika Enable)
Ketika memilih metode Snap Base maka pelanggan akan diarahkan pada pop up snap yang didalamnya terdapat beberapa layanan pembayaran yang disupport oleh midtrans. Sebagai contoh berikut dilakukan pembayaran menggunakan snap Base ATM/Bank Transfer dengan memilih BNI.

Gambar 5. Tampilan Pop up snap base dengan memilih ATM / Bank transfer BNI

Gambar 6. Tampilan Pop up snap Base Account Number BNI
Snap Bank Transfer
Layanan pembayaran yg menggunakan seluruh virtual account (VA) yang tersedia di Midtrans
Konfigurasi Snap Bank Transfer oleh Admin
Magento Backoffice > Store > Configuration
Gambar 7. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Bank Transfer
Gambar 8. Tampilan konfigurasi bagian Snap Bank Transfer
Bagian-bagian Snap Bank Transfer
Enable : Set Yes untuk mengaktifkan Snap Bank Transfer pada front end.
Title : Adalah nama yang akan muncul untuk snap Bank Transfer pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Bank Transfer VA Expiry Duration : Waktu di mana VA kadaluarsa dan tidak dapat lagi dibayarkan. Pembayaran yang dilakukan setelah tanggal kadaluarsa akan ditolak.
Bank Transfer VA Expiry Unit : Satuan yang digunakan untuk Expiry duration
Custom VA Number : Opsi untuk menggunakan Custom VA Number. Jika set YES Maka custom VA number akan menggunakan Nomor telepon yang digunakan untuk shipping
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Base Pada Frontend
Gambar 9. Tampilan Pop up snap bank transfer pada Frontend
Credit Card
Metode pembayaran kartu kredit dengan Midtrans mengakomodasi & menerima semua kartu kredit dan kartu debit berlogo Visa, Mastercard, JCB dan Amex. Ini termasuk semua kartu yang diterbitkan oleh bank Indonesia dan asing. Pada SWIFT metode pembayaran ini telah dapat digunakan.
Flowchart
Gambar 10. Flowchart Credit Card
Snap Credit Card
SWIFT juga melayani pembayaran menggunakan Credit card yang dikeluarkan oleh beberapa bank di indonesia, yang diantaranya adalah :
Credit Card BNI
Credit Card Mandiri
Credit Card Mega
Credit Card CIMB
Credit Card BCA
Credit Card BRI
Credit Card Maybank
Konfigurasi Snap Credit Card oleh Admin
Magento Backoffice > Store > Configuration
Gambar 11. Tampilan menu Store pada admin backoffice.
Sales > Payment Method > Snap Credit Card
Gambar 12. Tampilan konfigurasi bagian Snap Credit card.
Bagian-bagian Snap Credit card
Enable: Set Yes untuk mengaktifkan Snap Credit Card pada front end.
Save Credit Card : Adalah opsi untuk menyimpan Credit Card pada Website
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
New order Status : Adalah opsi untuk status order yang baru dilakukan.
Credit Card Acquiring Bank : Adalah Bank Pengakuisisi Kartu Kredit Contoh: bni / mandiri / cimb / bca / bri / maybank.
Credit Card Channel : adalah Saluran Kartu Kredit. Contoh: migs
Sort Order : Adalah Mengurutkan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Payment Action : Adalah pilihan untuk tindakan pembayaran. Set pada Authorize and Capture
Tampilan Snap Credit Card Pada Frontend
Gambar 13. Tampilan Snap Credit card with Pre Auth
Snap Credit Card Mega
Adalah layanan pembayaran menggunakan Snap Credit Card Mega
Konfigurasi Snap Credit Card Mega oleh Admin
Magento Backoffice > Store > Configuration
Gambar 14. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Credit Card Mega
Gambar 15. Tampilan konfigurasi bagian Snap Credit Card Mega
Bagian-bagian Snap Credit Card Mega
Enable : Set Yes untuk mengaktifkan Snap Credit Card Mega pada front end.
Save Credit Card : Adalah opsi untuk menyimpan Snap Credit Card Mega pada Website
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Credit Card Mega
Gambar 16. Tampilan Snap payment Pada Frontend
Snap Credit Card BNI
Adalah layanan pembayaran menggunakan Snap Credit Card BNI
Konfigurasi Snap Credit Card BNI oleh Admin
Magento Backoffice > Store > Configuration
Gambar 17. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Credit Card BNI
Gambar 18. Tampilan konfigurasi bagian Snap Credit Card BNI
Bagian-bagian Snap Credit Card BNI
Enable : Set Yes untuk mengaktifkan Snap Credit Card BNI pada front end.
Save Credit Card : Adalah opsi untuk menyimpan Snap Credit Card BNI pada Website
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Credit Card BNI
Gambar 19. Tampilan Snap payment Pada Frontend
Snap Credit Card Mandiri
Adalah layanan pembayaran menggunakan Snap Credit Card Mandiri.
Konfigurasi Snap Credit Card Mandiri oleh Admin
Magento Backoffice > Store > Configuration
Gambar 20. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Credit Card Mandiri
Gambar 21. Tampilan konfigurasi bagian Snap Credit Card Mandiri
Bagian-bagian Snap Credit Card Mandiri
Enable : Set Yes untuk mengaktifkan Snap Credit Card Mandiri pada front end.
Save Credit Card : Adalah opsi untuk menyimpan Snap Credit Card Mandiri pada Website
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Credit Card Mandiri
Gambar 22. Tampilan Snap payment Pada Frontend
Snap Credit Card With BIN
Adalah layanan pembayaran menggunakan Snap Credit Card dengan kode BIN. BIN merupakan Identification Number penerbit (IIN) atau Nomor Identifikasi Bank (BIN) adalah 6 digit pertama pada kartu kredit. Angka-angka ini memungkinkan untuk mengetahui dimana bank penerbit kartu kredit. Perbedaan dengan credit card yang lain adalah jika menggunakan BIN maka akan dilakukan Filter terhadap number identification bank apa saja yang bisa dilakukan transaksi. sebagai contoh Jika memasukkan number identification tertentu maka yang dapat melakukan transaksi hanya dengan Kode BIN yang sesuai dengan yang dimasukkan. selain dari kode BIN yang diinputkan maka transaksi tidak akan dapat dilanjutkan ke proses selanjutnya.
Konfigurasi Snap Credit Card dengan BIN oleh Admin
Magento Backoffice > Store > Configuration
Gambar 23. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Credit Card with BIN
Gambar 24. Tampilan konfigurasi bagian Snap Credit Card with BIN
Bagian-bagian Snap Credit Card with BIN
Enable : Set Yes untuk mengaktifkan Snap Credit Card with BIN pada front end.
Save Credit Card : Adalah opsi untuk menyimpan Snap Credit Card with BIN pada Website
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Credit Card with BIN
Gambar 25. Tampilan konfigurasi bagian Snap Credit Card with BIN
Virtual Account
Adalah layanan pembayaran menggunakan Midtrans Virtual Account berupa Nomor Virtual Account dalam membantu transaksi sehingga transaksi lebih mudah dan cepat. Setelah pembayaran dilakukan oleh pembeli, status pembayaran secara otomatis terkonfirmasi & berubah menjadi terbayar.
Snap Virtual Account
VA yang sudah dapat digunakan pada SWIFT antara lain :
VA Permata
VA BNI
VA BCA
VA BRI
VA Mandiri
Flowchart
Gambar 26. Flowchart Snap VA
Konfigurasi Snap VA oleh Admin
Magento Backoffice > Store > Configuration
Gambar 27. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap VA
Gambar 28. Tampilan konfigurasi bagian Snap Permata VA
Expand pada masing-masing VA yang akan digunakan
Gambar 29. Tampilan konfigurasi bagian Snap Permata VA
Bagian-bagian Snap VA
Enable : Set Yes untuk mengaktifkan Snap Permata VA pada front end.
Title : Adalah nama yang akan muncul untuk Permata VA pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Permata VA Expiry Duration : Waktu di mana VA kedaluwarsa dan tidak dapat lagi dibayarkan. Pembayaran yang dilakukan setelah tanggal kadaluarsa akan ditolak.
Permata VA Expiry Unit : Satuan yang digunakan untuk Expiry duration
Custom VA Number : Opsi untuk menggunakan Custom VA Number. Jika set YES Maka custom VA number akan menggunakan Nomor telepon yang digunakan untuk shipping
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap VA
Gambar 30. Tampilan Snap payment Pada Frontend
E- Money
Jenis pembayaran yang mengakomodasi planggan dalam emenggunakan pembayaran non tunai melalui Gopay dan ShopeePay
Flowchart
Gambar 31. Flowchart E-money
Snap GO-Pay
Adalah metode pembayaran menggunakan Snap GO-Pay. Pembayaran menggunakan mobile device atau platform seluler, akan dialihkan secara otomatis ke dalam aplikasi Gopay yang telah terdaftar dengan akun pengguna.
Konfigurasi Snap GO-Pay oleh Admin
Magento Backoffice > Store > Configuration
Gambar 32. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap GO-Pay
Gambar 33. Tampilan konfigurasi bagian Snap GO-Pay
Bagian-bagian Snap GO-Pay
Enable : Set Yes untuk mengaktifkan Snap GO-Pay pada front end.
Title : Adalah nama yang akan muncul untuk Snap GO-Pay pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
GO-Pay Expiry Duration : Waktu di mana VA kadaluarsa dan tidak dapat lagi dibayarkan. Pembayaran yang dilakukan setelah tanggal kadaluarsa akan ditolak.
GO-Pay Expiry Unit : Satuan yang digunakan untuk Expiry duration
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap GO-Pay
Gambar 34. Snap Gopay
Di platform seluler, akan dialihkan secara otomatis ke apps Gopay.
Gambar 35. Tampilan Snap payment Gopay pada Frontend Desktop
Gambar 36. Tampilan Snap payment Gopay pada Frontend Desktop
Gambar 37. Tampilan Email payment confirmation menggunakan Gopay dah ShopeePay pada customers
Snap Shopee Pay
Adalah metode pembayaran menggunakan Online Payment yang terintegrasi dengan Shopee Pay
Konfigurasi Snap Shopee Pay oleh Admin
Magento Backoffice > Store > Configuration
Gambar 38. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Shopee Pay
Gambar 39. Tampilan konfigurasi bagian Shopee Pay
Bagian-bagian ShopeePay
Enable : Set Yes untuk mengaktifkan Snap Credit Card Mega pada front end.
Title : Adalah nama yang akan muncul untuk snap credit card pada frontend.
New Order Status : Status pesanan yang baru dibuat
Shopee Pay Expiry Duration : Durasi waktu pembayaran
Shopee Pay Expiry Unit : Satuan waktu batas waktu pembayaran
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Shopee Pay
Gambar 40. Tampilan Shopee Pay pada Payment di Checkout page
C-Store
Memberikan kemudahan kepada pelanggan dengan melakukan pembayaran melalui Indomaret & Alfamart yang tersebar luas di Indonesia
Flowchart
Gambar 41. Flowchart C-Store
Snap Alfamart
Adalah metode pembayaran dimana customer perlu untuk membayar melalui alfamart terdekat.
Konfigurasi Snap Alfamart oleh Admin
Magento Backoffice > Store > Configuration
Gambar 42. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Alfamart
Gambar 43. Tampilan konfigurasi bagian Snap Alfamart
Bagian-bagian Snap Alfamart
Enable : Set Yes untuk mengaktifkan Snap Alfamart pada front end.
Title : Adalah nama yang akan muncul untuk Snap Alfamart pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Alfamart
Gambar 44. Tampilan konfigurasi bagian Snap Alfamart
Snap Indomaret
Adalah metode pembayaran dimana customer perlu untuk melakukan pembayaran melalui Indomaret terdekat.
Konfigurasi Snap Indomaret oleh Admin
Magento Backoffice > Store > Configuration
Gambar 45. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Indomaret
Gambar 46. Tampilan konfigurasi bagian Snap Indomaret
Bagian-bagian Snap Indomaret
Enable : Set Yes untuk mengaktifkan Snap Indomaret pada front end.
Title : Adalah nama yang akan muncul untuk Snap Indomaret pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Indomaret Expiry Duration : Waktu di mana VA kadaluarsa dan tidak dapat lagi dibayarkan. Pembayaran yang dilakukan setelah tanggal kadaluarsa akan ditolak.
Indomaret Expiry Unit : Satuan yang digunakan untuk Expiry duration
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Indomaret
Gambar 47. Tampilan konfigurasi bagian Snap Indomaret
Direct Debit
Pada SWIFT tersedia layanan dengan menggunakan Direct Debit, serta dapat menerima pembayaran melalui online banking yang dilakukan melalui Aplikasi Bank seperti BCA Klikpay atau Octo Clicks
Flowchart

Gambar 48. Flowchart Direct Debit
Snap Octo Click
Adalah metode pembayaran menggunakan snap CIMB Click
Konfigurasi Snap Octo Click oleh Admin
Magento Backoffice > Store > Configuration
Gambar 49. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Octo Click
Gambar 50. Tampilan konfigurasi bagian Snap Octo Click
Bagian-bagian Snap Octo Click
Enable : Set Yes untuk mengaktifkan Snap Octo Click pada front end.
Title : Adalah nama yang akan muncul untuk snap Octo Click pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Octo Click


Gambar 51. Tampilan Snap payment Pada Frontend
Snap BCA Klikpay
Adalah layanan pembayaran menggunakan BCA Klikpay
Konfigurasi Snap BCA Klikpay oleh Admin
Magento Backoffice > Store > Configuration
Gambar 52. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap BCA Klikpay

Gambar 53. Tampilan konfigurasi bagian Snap BCA Klikpay
Bagian-bagian Snap BCA Klikpay
Enable : Set Yes untuk mengaktifkan Snap BCA Klikpay pada front end.
Title : Adalah nama yang akan muncul untuk Snap BCA Klikpay pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap BCA Klikpay


Gambar 54. Tampilan Snap payment Pada Frontend
Snap BRI Epay
Adalah layanan pembayaran menggunakan snap BRI Epay. e-Pay BRI merupakan bagian dari layanan BRI Internet Banking. Jika BRI hanya bisa digunakan melalui Virtual account dan Bank transfer, maka BRI Epay tetapi jauh lebih praktis dengan menggunakan transaksi E Money.
Konfigurasi Snap BRI Epay oleh Admin
Magento Backoffice > Store > Configuration
Gambar 55. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap BRI Epay

Gambar 56. Tampilan konfigurasi bagian Snap BRI Epay
Snap Klik BCA
Adalah layanan pembayaran menggunakan Klik BCA
Konfigurasi Snap Klik BCA oleh Admin
Magento Backoffice > Store > Configuration
Gambar 57. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Klik BCA
Gambar 58. Tampilan konfigurasi bagian Snap Klik BCA
Bagian-bagian Snap Klik BCA
Enable : Set Yes untuk mengaktifkan Snap Klik BCA pada front end.
Title : Adalah nama yang akan muncul untuk Snap Klik BCA pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Klik BCA
Gambar 59. Tampilan Snap payment Pada Frontend
Snap Mandiri ECash
Adalah layanan pembayaran menggunakan snap Mandiri Cash
Konfigurasi Snap Mandiri ECash oleh Admin
Magento Backoffice > Store > Configuration
Gambar 60. Tampilan menu pada admin backoffice.
Sales > Payment Method > Snap Mandiri ECash
Gambar 61. Tampilan konfigurasi bagian Snap Mandiri Cash
Bagian-bagian Snap Mandiri Cash
Enable : Set Yes untuk mengaktifkan Snap Mandiri Cash pada front end.
Title : Adalah nama yang akan muncul untuk Snap Mandiri Cash pada frontend.
New Order Status : Adalah opsi untuk status order yang baru dilakukan.
Instructions : Adalah perintah yang akan muncul pada frontend
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Mandiri E Cash
Gambar 62. Tampilan Snap payment Pada Frontend
Cardless Debit
Merupakan layanan bagi pelanggan membayar dengan cicilan. Untuk saat ini hanya dengan Akulaku. Pelanggan kami dapat membelanjakan dalam batas kredit Akulaku mereka.
Flowchart
Gambar 63. Flowchart Cardless Debit
Akulaku
Akulaku merupakan sebuah platform finansial untuk memudahkan pengguna dalam melakukan sebuah transaksi sebagai alat pembayaran. Di dalam Swift Akulaku sebagai extention agar customers dapat menggunakan Akulaku sebagai media pembayaran ketika melakukan proses pemesanan produk.
Konfigurasi Akulaku Oleh Admin
Magento Backoffice > Store > Configuration
Gambar 64. Tampilan pada menu Stores bagian Settings
Backoffice/Admin > Stores > Configuration > Sales > Akulaku
Gambar 65. Tampilan pada modul Akulaku
Bagian-bagian Snap Akulaku
Enable : Set Yes untuk mengaktifkan Snap Akulaku pada front end.
Title : Adalah nama yang akan muncul untuk snap Akulaku pada frontend.
New Order Status : Status pesanan yang baru dibuat
Akulaku Expiry Duration : Durasi waktu pembayaran
Akulaku Expiry Unit : Satuan waktu batas waktu pembayaran
Sort Order : Adalah pengurutan tampilan, Inputkan 0 atau kosongkan jika tidak diperlukan
Tampilan Snap Akulaku
Gambar 66. Tampilan pada halaman Checkout di frontend
Payment akulaku setelah di klik Pay Now, akan direck ke dashboard Akulaku. Sebagai contoh berikut adalah dashboard simulasi Akulaku pada Midtrans.
Gambar 67. Tampilan pada halaman Checkout di frontend