Intro
Plugin Konfirmasi Pembayaran adalah plugin yang berfungsi untuk membuat halaman konfirmasi pembayaran bagi pelanggan yang telah melakukan pembelian di website kita. Pelanggan meng-upload bukti pembayaran di halaman konfirmasi, kemudian pemilik website akan menerima email pemberitahuan bahwa terdapat konsumen yang melakukan konfirmasi pembayaran.
Plugin Konfirmasi Pembayaran adalah ekstensi dari plugin WooCommerce. Jadi Plugin Konfirmasi Pembayaran hanya bisa berjalan di website WordPress yang sudah terinstal plugin WooCommerce.
Dalam panduan ini akan dijelaskan secara rinci mengenai fitur Plugin Konfirmasi Pembayaran mulai dari cara memunculkan fitur ini pada website Anda sampai dengan pengaturannya.
Instalasi
Dashboard WordPress
Cara menginstal plugin Plugin Konfirmasi Pembayaran melalui dashboard WordPress.
- Masuk ke dashboard lalu arahkan ke Plugin> Add new.
- Klik pada tombol “Upload Plugin” di bagian atas.
- Klik pada Pilih File dan pilih file “plugin-konfirmasi.zip”, lalu tekan tombol Install Now.
- Setelah mengunggah, Anda akan melihat notifikasi “plugin berhasil dipasang”, lalu tekan tombol “Aktifkan Plugin”.
Menggunakan FTP
Untuk menginstal plugin konfirmasi lewat FTP, Anda dapat menggunakan file manager dari cPanel atau software FTP apapun. Beberapa software FTP yang bagus adalah:
- FileZilla untuk Linux / windows.
- Cyberduck untuk Mac
Setelah aplikasi FTP berhasil diinstal, ikuti langkah berikut:
- Ekstrak file zip yang telah Anda download dari tonjoostudio.com.
- Buka folder yang diekstrak dan ekstrak file “plugin-konfirmasi.zip”, setelah ekstrak Anda harus melihat folder “plugin-konfirmasi”.
- Hubungkan ke server Anda dengan aplikasi FTP lalu navigasikan ke / wp-content / plugins /.
- Upload folder “plugin-konfirmasi” yang sudah diekstrak.
- Masuk ke area admin WordPress Anda dan arahkan ke halaman Plugins, lalu klik ‘Activate’ di bawah Tonjoo Payment Confirmation.
Aktivasi Lisensi
Jika sukses aktivasi Plugin Konfirmasi Pembayaran, maka akan ada menu baru di dalam menu Plugins di dashboard WordPress Anda. Silakan arahkan ke menu Plugins lalu klik sub-menu Tonjoo License Manager.
Halaman ini akan menampilkan daftar plugin TonjooStudio yang terinstal di website Anda.
Tonjoo License Manager
Masukkan lisensi ke dalam form Your license code. Untuk mendapatkan nomor lisensi silakan kunjungi halaman manage plugin.
Pengaturan
Membuat Form Konfirmasi
Untuk membuat form konfirmasi pembayaran, Plugin Konfirmasi Pembayaran menggunakan shortcode. Shortcode adalah fungsi khusus yang akan sering kita gunakan pada WordPress kita, sehingga kita tidak perlu mengulang-ulang prosesnya setiap kali kita membutuhkannya. Shortcode ini bisa dipasang di pos atau halaman. Akan tetapi untuk membuat halaman form konfirmasi lebih disarankan dipasang di halaman.
Shortcode yang digunakan dalam Plugin Konfirmasi Pembayaran adalah [payment-confirmation].
Berikut merupakan contoh halaman konfirmasi pembayaran pada sebuah situs web:
Menambahkan form Konfirmasi Pembayaran pada website WooCommerce sangat mudah. Berikut adalah langkah demi langkah membuat halaman konfirmasi pembayaran:
1. Login ke area back-end website Anda: namawebsite.com/wp-admin/
2. Silakan menuju menu Confirmations->Settings
3. Pada tab General, Klik Generate Page
Dengan menekan tombol Generate Page, maka sistem akan membuat sebuah Page baru. Anda bisa merubah judul, permalink atau menambahkan konten tambahan ke Page tersebut selayaknya Page biasa. Untuk melakukannya, cukup menekan tombol Edit Page maka Anda akan diarahkan ke halaman edit post.
Jika Anda tidak ingin membuat sebuah Page baru, dan ingin menambahkan form konfirmasi ke Page yang sudah ada, maka Anda cukup memasang shortcode [payment-confirmation] ke page Anda tersebut.
Selanjutnya jika ingin menampilkan halaman konfirmasi pembayaran di menu, ikuti langkah berikut:
1. pada menu ‘Appearance’ klik ‘Menus’.
2. Pada kolom Pages akan terlihat pilihan ‘Payment Confirmation’ yang telah Anda buat tadi. Centang kolom ‘Payment Confirmation’ tersebut lalu klik ‘Add to Menu’.
3. Menu ‘Payment Confirmation’ telah muncul di Menu Structure (seperti pada gambar di bawah). Klik ‘Save Menu’ untuk memunculkan menu ini pada halaman front-end website Anda.
4. Selesai! Menu Konfirmasi Pembayaran telah berhasil ditampilkan pada website Anda.
Menu halaman konfirmasi pembayaran juga dapat diakses oleh pengunjung website Anda dari halaman Orders yang ada di dalam menu My Account.
Field Editor
Form konfirmasi pada Plugin Konfirmasi Pembayaran memiliki berbagai field yang bisa Anda gunakan. Field-field tersebut antara lain:
- Order ID – untuk memasukkan nomor pesanan.
- Customer Email – untuk memasukkan alamat email pelanggan.
- Customer Name – untuk memasukkan nama pelanggan.
- Transfer Date – untuk memasukkan tanggal transfer.
- Transfer Amount – untuk memasukkan jumlah transfer.
- Bank – untuk memilih nama bank tujuan transfer.
- Customer Bank – untuk memasukkan nama bank pelanggan (asal transfer).
- Customer Bank Account – untuk memasukkan nama rekening bank pelanggan.
- Attached Photo – untuk melampirkan bukti transfer berupa foto.
- Note – untuk menambahkan catatan dari pelanggan (jika ada).
- ReCaptcha v2 – untuk menambahkan integrasi checklist ReCaptcha v2 kedalam form.
Untuk field Order ID dan Customer Email, wajib harus Anda pakai di dalam form konfirmasi karena kedua field tersebut digunakan oleh sistem untuk mencari pesanan dan memastikan pesanan tersebut dilakukan oleh pelanggan yang bersangkutan dengan mencocokkan alamat email pelanggan dengan alamat email yang digunakan pada saat melakukan pesanan. Selain kedua field tersebut, Anda bebas untuk menggunakan field ke dalam form atau tidak.
Untuk mengatur tampilan form konfirmasi Anda, buka menu Confirmations > Settings lalu pilih tab Form.
Di dalam field editor, Anda dapat mengatur tampilan form dengan merubah struktur html agar dapat disesuaikan dengan tampilan website Anda.
Untuk menambahkan field ke dalam form, yang perlu Anda lakukan adalah dengan mengarahkan kursor ke posisi yang Anda inginkan di dalam field editor. Lalu klik salah satu tombol yang ada pada pilihan field. Maka sebuah shortcode akan ditambahkan ke dalam form. Shortcode ini nantinya akan berubah menjadi field ketika halaman konfirmasi diakses oleh pengunjung.
Anda bisa memindahkan posisi shortcode tersebut ke manapun asalkan tidak merubah isi shortcode. Serta setiap field hanya dapat Anda gunakan sekali pada form.
Untuk menghapus field, cukup dengan menghapus shortcode dari field editor.
Setiap field dapat Anda atur apakah field tersebut wajib diisi oleh pelanggan atau tidak, untuk menambahkan class tambahan kedalam field atau untuk menambahkan placeholder ke dalam field. Untuk mengatur hal-hal tersebut, Anda dapat melakukannya di Field Setting.
Beberapa field memiliki pengaturan tambahan, antara lain ada field:
- Bank – terdapat pengaturan pilihan bank yang dapat dipilih oleh pelanggan. Untuk memasukkan pilihan, cukup ketikkan beberapa nama bank yang dipisahkan oleh tanda koma (,) ke dalam kolom pengaturan Bank options.
- Attached Photo – terdapat pengaturan untuk mengatur ukuran maksimal berkas yang dapat diunggah oleh pelanggan. Pengaturan ini dapat membantu Anda dalam menghemat space pada hosting.
- Recaptcha V2 – field ni digunakan jika Anda ingin mengintegrasikan recaptcha ke dalam form konfirmasi Anda. Tentu field ini akan membantu website Anda dari serangan spam dari bot yang tidak diinginkan. Untuk melakukan integrasi tersebut, dibutuhkan Site Key dan Secret Key yang bisa Anda dapatkan dari console recaptcha. Anda dapat memasukkan kedua key tersebut ke pengaturan field ini.
Untuk menambah kustomisasi agar tampilan form sesuai dengan tampilan tema web Anda, kami juga menyediakan field Custom CSS yang bisa Anda gunakan untuk menambah style tambahan ke dalam form.
Pengaturan Umum
Plugin Konfimasi Pembayaran memiliki beberapa pengaturan secara umum yang dapat diakses di menu Confirmations > Settings. Pengaturan tersebut antara lain:
Payment Methods
Karena tidak semua metode pembayaran membutuhkan konfirmasi dari admin, maka Anda perlu mengatur metode pembayaran apa saja yang membutuhkan konfirmasi dengan memberi centang pada pilihan.
Confirmed & Rejected Order Status
Opsi ini untuk menentukan status order setelah admin mengonfirmasi ataupun menolak pembayaran.
Make The Form Only Accessible to Logged In Users
Aktifkan fitur ini jika Anda ingin membatasi yang dapat mengakses halaman konfirmasi hanyalah user yang sudah login.
Submission Limit
User dapat mengirimkan konfirmasi berkali-kali untuk setiap pesanan. Ini dimaksudkan agar user dapat mengirimkan ‘koreksi’ jika sebelumnya user tersebut salah dalam menginputkan data. Namun jika Anda ingin membatasi jumlah berapa kali setiap user dapat mengirimkan konfirmasi dalam setiap pesanan, maka Anda dapat dengan mengisi opsi ini.
Redirect After Submission
Jika Anda ingin mengarahkan user ke halaman lain setelah user sukses mengirim konfirmasi, Anda dapat mengisikan url kustom ke opsi ini.
Thankyou Page Content
Dengan menambahkan pesan di halaman thankyou (setelah checkout), Anda dapat memberi tahu pelanggan untuk melakukan konfirmasi pembayaran setelah mereka melakukan pembelian. Pesan ini hanya akan muncul jika pelanggan memilih metode pembayaran yang membutuhkan konfirmasi pembayaran.
Report Columns
Jika Anda menggunakan report sebagai rekap pembayaran mungkin Anda akan membutuhkan opsi ini untuk menentukan kolom apa saja yang ditampilkan di tabel laporan.
Pengaturan Pesan
Anda dapat mengustomisasi pesan sukses ataupun pesan error pada form konfirmasi. Pengaturan ini dapat diakses melalui menu Confirmations > Settings, lalu pilih tab Messages.
Pengaturan Email
Plugin Konfirmasi Pembayaran memiliki 3 jenis email notifikasi. 1 email akan dikirim ke admin sebagai notifikasi tiap kali ada pelanggan yang mengirim konfirmasi pembayaran. Sedangkan 2 email akan dikirim ke pelanggan yaitu ketika admin mengonfirmasi pembayaran dan ketika admin menolak pembayaran dari pelanggan.
Anda dapat mengubah tujuan email, subject email, judul email, serta konten tambahan ada email dengan mengunjungin menu WooCoommerce > Settings, lalu pilih tab Emails. Maka akan terdapat 3 email terkait plugin konfirmasi pembayaran:
- New payment confirmation – dikirim ke admin
- Confirmed payment – dikirim ke pelanggan
- Rejected payment – dikirim ke pelanggan
Klik pada salah satu email untuk melakukan kustomisasi.
- Enable/Disable – digunakan untuk mengaktifkan/menonaktifkan notifikasi email tersebut.
- Recipient(s) – digunakan untuk mengatur penerima notifikasi, jika penerima lebih dari satu maka isikan beberapa alamat email yang dipisahkan dengan koma.
- Subject – digunakan untuk menentukan subject email.
- Email Heading – digunakan untuk menentukan judul email.
- Additional content – digunakan untuk menambahkan konten tambahan pada email.
Selain beberapa opsi tersebut, Anda juga bisa meng-override template email dengan meng-copy file template email ke dalam theme yang Anda gunakan. Caranya cukup dengan menekan tombol Copy file to theme. Maka dengan itu, Anda bebas mengubah template email tanpa perlu mengubah file di dalam plugin.
Anda juga dapat menambahkan pesan tambahan ke email on-hold. Dimana email ini dikirim ke pelanggan sesaat pelanggan melakukan pembelian. Dengan opsi ini Anda dapat memberi tahu pelanggan untuk melakukan konfirmasi pembayaran. Opsi ini dapat ditemukan pada menu Confirmations > Settings lalu pilih tab Email.
Konfirmasi
Customer
Plugin Konfirmasi Pembayaran berfungsi untuk mempermudah customer Anda dalam melakukan konfirmasi bukti pembayaran. Berikut ini adalah langkah-langkah yang dapat Anda arahkan pada customer setelah mereka melakukan pembayaran.
1. Pada halaman website, pilih menu ‘Payment Confirmation’. Apabila pada website Anda belum tersedia menu ini, silakan baca tutorial berikut: Cara Membuat Form Konfirmasi Pembayaran
2. Isi form Payment Confirmation dengan lengkap dan benar.
3. Pengisian form harus dilakukan dengan benar agar form dapat terkirim. Kolom ‘Order Number’ diisi dengan nomor order yang didapatkan oleh customer ketika ia membeli barang (seperti yang terdapat pada kotak merah di bawah ini). Jika order number tidak sesuai dengan order number si pelanggan, maka form tidak akan terkirim.
Bagi customer yang pada saat mengisi form belum melakukan login, maka pada field Nomor Order customer harus menginputkan nomor order. Namun buat customer yang sudah login, mereka cukup memilih order dari pilihan order berupa dropdown.
Sedangkan untuk field Email, customer harus mengisi alamat email yang digunakan sebagai Billing Email ketika membuat order.
4. Setelah form diisi dengan lengkap dan bukti pembayaran telah diunggah, klik ‘SUBMIT’.
5. Apabila customer telah berhasil melakukan konfirmasi pembayaran, akan muncul notifikasi seperti berikut (isi pesan notifikasi bisa Anda ganti):
6. Selesai! Sesaat setelah customer mengirimkan konfirmasi, admin akan menerima email notifikasi dari sistem.
Admin
Setelah customer melakukan konfirmasi pembayaran, status order-nya pada back-end area website Anda akan berubah menjadi ‘Waiting Confirmation’. Maksud dari status ‘Waiting Confirmation’ yaitu sistem sedang menunggu admin untuk mengonfirmasi pembayaran dari customer.
Anda bisa melihat ada berapa order yang butuh konfirmasi dari admin dengan melihat menu Confirmations seperti berikut ini:
Untuk melakukan konfirmasi, buka menu Confirmations > Orders. Menu ini sebenarnya hanya sebuah shortcut ke halaman Orders hanya saja dengan filter status Waiting Confirmation. Maka Anda akan dibawa ke halaman yang menampilkan daftar pesanan yang menunggu konfirmasi dari admin.
Dari daftar pesanan tersebut, admin bisa mengonfirmasi pembayaran dari customer ataupun menolaknya. Untuk melakukan hal tersebut, setidaknya ada 3 cara:
1. Melalui Bulk Actions
Ini adalah cara tercepat untuk mengonfirmasi pembayaran dari beberapa order sekaligus. Caranya adalah dengan memberi ‘centang’ pada beberapa order yang ingin Anda konfirmasi atau tolak, lalu pada opsi Bulk Options pilih Confirm payment untuk mengonfirmasi atau Reject payment untuk menolak. Lalu klik Apply untuk menerapkan aksi.
2. Melalui Quick View
Dari halaman Orders, Anda bisa mengklik icon ‘mata’ atau tombol Quick View untuk menampilkan popup isi pesanan.
Popup yang muncul akan menampilkan isi konfirmasi dari customer serta isi pesanan keseluruhan. Anda bisa langsung mengonfirmasi atau menolak pembayaran dengan menekan tombol yang berada di bagian bawah popup.
3. Melalui Edit Order
Cara yang terakhir adalah dengan membuka order di Edit Order. Pada sidebar halaman ini akan muncul informasi konfirmsi pembayaran.
Seperti halnya pada cara kedua, pada cara in Anda juga tinggal mengklik Confirm untuk mengonfirmasi atau Reject untuk menolak. Hanya bedanya jika Anda menolak dengan cara ini, maka akan muncul popup untuk menginputkan alasan kenapa admin menolak pembayaran yang dilakukan customer.
Dengan cara ini admin juga bisa mengubah informasi mengenai konfirmasi pembayaran. Hal ini berguna jika pada suatu kondisi khusus dimana customer melakukan konfirmasi diluar lewat website (misal: via whatsapp) sedangkan Anda tetap ingin mencatat konfirmasi tersebut pada website sebagai pembukuan.
Cara Konfirmasi yang Tidak Disarankan
Kami menyarankan untuk tidak melakukan konfirmasi pembayaran dengan langsung merubah status Order. Karena dengan cara ini fungsi-fungsi seperti notifikasi email dan log menjadi tidak berjalan dengan semestinya.
Untuk Developer
Hooks
Filter data konfirmasi sebelum disimpan
/**
* @param array $save_data Customer's confirmation data.
*/
function your_function( $save_data ) {
// do your magic.
return $save_data;
}
add_filter( 'tpc_before_submit_confirmation', 'your_function', 10 );
Action ketika customer mengirim konfirmasi
/**
* @param integer $order_id Order ID.
* @param array $save_data Customer's submit data.
*/
function your_function( $order_id, $save_data ) {
// do your magic.
}
add_action( 'tpc_submit_confirmation', 'your_function', 10, 2 );
Action ketika admin mengonfirmasi pembayaran
/**
* @param integer $order_id Order ID.
* @param object $order Order object.
*/
function your_function( $order_id, $order ) {
// do your magic.
}
add_action( 'tpc_confirmed_payment', 'your_function', 10, 2 );
Action ketika admin menolak pembayaran
/**
* @param integer $order_id Order ID.
* @param object $order Order object.
*/
function your_function( $order_id, $order ) {
// do your magic.
}
add_action( 'tpc_rejected_payment', 'your_function', 10, 2 );
Action saat metabox payment confirmation ditampilkan
/**
* @param array $confirm Array Confirmation data
* @param object $order Order Object
*/
function your_function( $confirm, $order ) {
// do something here
}
add_action( 'tpc_metabox_order_view', 'your_function' , 10, 2);
Action saat metabox payment confirmation edit form ditampilkan
/**
* @param array $confirm Array Confirmation data
* @param object $order Order Object
*/
function your_function( $confirm, $order ) {
// do something here
}
add_action( 'tpc_metabox_order_edit', 'your_function' , 10, 2 );
Action sebelum tampilan section form setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_form_setting_start', 'your_function' );
Action sesudah tampilan section form setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_form_setting_end', 'your_function' );
Action sebelum tampilan section general setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_general_setting_start', 'your_function' );
Action setelah tampilan section general setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_general_setting_end', 'your_function' );
Action sebelum tampilan section message setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_messages_setting_start', 'your_function' );
Action setelah tampilan section message setting
/**
* @param object $setting TPC_Setting
*/
function your_function( $setting ) {
// do something here
}
add_action( 'tpc_messages_setting_end', 'your_function' );
Troubleshoot
Jika Anda menemui kesulitan dan tidak bisa ditemukan dalam halaman dokumentasi ini, silakan ajukan pertanyaan Anda lewat forum Tonjoo di https://forum.tonjoostudio.com.