MENU CONTENT

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.

  1. Masuk ke dashboard lalu arahkan ke Plugin> Add new.
  2. Klik pada tombol “Upload Plugin” di bagian atas.
  3. Klik pada Pilih File dan pilih file “plugin-konfirmasi.zip”, lalu tekan tombol Install Now.
  4. 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:

  1. Ekstrak file zip yang telah Anda download dari tonjoostudio.com.
  2. Buka folder yang diekstrak dan ekstrak file “plugin-konfirmasi.zip”, setelah ekstrak Anda harus melihat folder “plugin-konfirmasi”.
  3. Hubungkan ke server Anda dengan aplikasi FTP lalu navigasikan ke / wp-content / plugins /.
  4. Upload folder “plugin-konfirmasi” yang sudah diekstrak.
  5. 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

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:

0

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

Screenshot_27

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’.

6

 

2. Pada kolom Pages akan terlihat pilihan ‘Payment Confirmation’ yang telah Anda buat tadi. Centang kolom ‘Payment Confirmation’ tersebut lalu klik ‘Add to Menu’.

7

 

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.

8

 

4. Selesai! Menu Konfirmasi Pembayaran telah berhasil ditampilkan pada website Anda.

9

Menu halaman konfirmasi pembayaran juga dapat diakses oleh pengunjung website Anda dari halaman Orders yang ada di dalam menu My Account.

Screenshot_28

 

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.

 

Screenshot_29

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.

Screenshot_30

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.

Screenshot_31

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.

Screenshot_32

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.

Screenshot_33

Confirmed & Rejected Order Status

Opsi ini untuk menentukan status order setelah admin mengonfirmasi ataupun menolak pembayaran.

Screenshot_34

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.

Screenshot_35

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.

Screenshot_36

Redirect After Submission

Jika Anda ingin mengarahkan user ke halaman lain setelah user sukses mengirim konfirmasi, Anda dapat mengisikan url kustom ke opsi ini.

Screenshot_37

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.

Screenshot_38

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.

Screenshot_39

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.

Screenshot_40

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.

Screenshot_41

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.

Screenshot_42

  • 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.

 

Screenshot_43

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.

Screenshot_44

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

1

 

2. Isi form Payment Confirmation dengan lengkap dan benar.

Screenshot_46

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.

3

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):

Screenshot_47

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:

Screenshot_48

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.

Screenshot_49

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.

Screenshot_51

2. Melalui Quick View

Dari halaman Orders, Anda bisa mengklik icon ‘mata’ atau tombol Quick View untuk menampilkan popup isi pesanan.

Screenshot_53

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.

Screenshot_54

3. Melalui Edit Order

Cara yang terakhir adalah dengan membuka order di Edit Order. Pada sidebar halaman ini akan muncul informasi konfirmsi pembayaran.

Screenshot_55

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.

Screenshot_56

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 );

 

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.