Midtrans merupakan salah satu payment gateways yang bisa Anda gunakan untuk menyediakan pembayaran otomatis. Dengan menggunakan payment gateways Anda dapat memberikan opsi pembayaran yang lebih lengkap mulai dari transfer bank, minimarket, dompet digital hingga kartu kredit.

Sebelum mengikuti tutorial instalasi Midtrans di WooCommerce sampai selesai, pastikan saat ini Anda telah memiliki akun Midtrans. Jika belum, silakan melakukan pendaftaran terlebih dahulu, lihat syarat pendaftaran akun Midtrans.

Proses instalasi Midtrans di WooCommerce di bagi menjadi 2 tahap seperti berikut:

1. Setting kebutuhan toko dari Dashboard admin Midtrans
2. Setting metode pembayaran Midtrans di WooCommerce dengan menggunakan plugin Midtrans.

Yuk simak penjelasan detailnya hingga selesai.

Setting Akun Midtrans

Midtrans menyediakan dua opsi Environment yang bisa Anda pilih pertama Environment Production dan Sandbox. Sandbox merupakan Environment yang digunakan untuk melakukan testing saat website Anda dalam proses integrasi dengan layanan Midtrans.

Pada tutorial kali ini kita akan menggunakan Environment Sandbox terlebih dahulu, untuk memastikan proses pemesanan berjalan dengan baik.

Untuk setting akun Midtrans Sandbox, silahkan ikuti langkah-langkah berikut:

1. Masuk halaman admin Midtrans
2. Pada bagian Environment di pojok kiri atas, ganti dengan Sandbox

3. Buka halaman Settings > Configuration

Pada bagian Redirect Settings, isikan kolom sesuai dengan daftar url pada tabel dibawah. Sesuaikan nama domain dengan domain yang Anda miliki.

Setting Plugins Midtrans di WooCommerce

Untuk menggunakan Midtrans di WooCommerce, ikuti langkah-langkah berikut:

1. Dari halaman admin, navigasi ke menu Plugins > Add new
2. Pada kolom pencarian ketikan “midtrans”
3. Instal dan aktifkan plugin Midtrans-WooCommerce

4. Navigasi ke menu WooCommerce > Settings, klik tab Payments.
5. Pada bagian Midtrans, Klik Manage.

Buka kembali halaman dashboard Midtrans untuk melihat Merchant ID, Client Key dan Server Key melalui menu Settings > Access Keys.

Copy paste sesuai dengan opsi yang ada di settingan WooCommerce.

6. Enable/Disable: Centang opsi Enable Midtrans Payment
7. Merchant ID: Masukan Merchant ID
8. Environment: Pilih Sandbox
9. Client Key – Sandbox: Masukkan Client Key Sandbox Midtrans Anda
10. Server Key – Sandbox: Masukkan Server Key Sandbox Midtrans Anda

11. Button Title: Tulis nama metode pembayaran yang akan ditampilkan saat checkout.
12. Button Title: Tulis nama metode pembayaran yang akan ditampilkan saat checkout.
13. Button Description: Tulis deskripsi yang ditampilkan saat pelanggan memilih metode Midtrans.

11. WC Order Status On Payment: Pilih status pesanan di WooCommerce ketika pelanggan sukses melakukan pembayaran.
12. Klik Save changes untuk menyimpan pengaturan.

Secara default, status pesanan jika pelanggan sukses melakukan pembayaran menggunakan Midtrans adalah Process. Status ini merupakan status yang umum digunakan jika Anda menjual produk fisik, karena status Completed merupakan status pesanan saat barang sudah dikirim.

Jika Anda menjual produk digital, Anda bisa mengganti opsi ini langsung ke status Completed, agar file produk otomatis dikirim ke email pelanggan saat proses pembayaran selesai.

Percobaan Melakukan Pemesanan Dengan Midtrans

Setelah proses instalasi Midtrans di WooCommerce, sekarang saatnya untuk melakukan uji coba pesanan menggunakan Midtrans.

Untuk melakukan uji coba metode pembayaran Midtrans di WooCommerce, ikuti langkah-langkah berikut:

1. Logout dari halaman admin WordPress.
2. Lakukan pembelian produk yang Anda miliki.
3. Di halaman checkout, pilih metode Midtrans.
4. Klik Place order untuk menyelesaikan pesanan.

5. Anda akan diarahkan ke halaman pembayaran yang menampilkan pop up Midtrans .
6. Pilih salah satu metode pembayaran yang ingin digunakan.

Jika Anda ingin melakukan uji coba dengan menggunakan kartu kredit, silakan gunakan data kartu kredit dummy di bawah ini.

Jika pembayaran berhasil dilakukan, Anda akan mendapatkan informasi seperti dibawah ini.

Daftar pesanan di halaman admin WooCommerce, navigasi ke menu WooCommerce > Order.

Cek juga daftar transaksi di dashboard Midtrans pada menu Transaksi.

Jika transaksi sudah tercatat di dashboard Midtrans, artinya proses intergrasi WooCommerce dan Midtrans berhasil dilakukan.

Ganti Environment Midtrans dari Sandbox Ke Production

Pada bagian production pada dasarnya Anda hanya perlu mengulang langkah-langkah yang sebelumnya sudah dilakukan pada Sandbox. Anda hanya perlu mengganti Access key pada settingan Midtrans di WooCommerce.

Untuk setting akun Midtrans Production, ikuti langkah-langkah berikut:

1. Masuk halaman admin Midtrans
2. Pada bagian Environment, ganti dengan Production
3. Buka halaman Settings > General Settings, isi informasi merchant.
4. Buka halaman Settings > Configuration, masukan url redirect seperti Sandbox sebelumnya.
5. Klik Save Changes untuk menyimpan perubahan.

Buka kembali halaman dashboard Midtrans untuk melihat Merchant ID, Client Key dan Server Key melalui menu Settings > Access Keys.

Menambahkan Logo dan Nama Toko Pada Pilihan Pembayaran

Untuk menambahkan logo dan mengganti nama toko pada tampilan Snap Midtrans, ikuti langkah-langkah berikut:

1. Dari halaman admin Midtrans, navigasi ke menu Settings > Snap Preferences
2. Klik tab Theme and Logo
3. Display Name: Masukan nama toko Anda.
4. Logo: Masukan logo toko atau brand Anda.
5. Theme Color: Pilih warna Snap.
6. Language: Pilih bahasa yang ingin digunakan.

Pilhan Pembayaran Tidak Muncul Saat Proses Checkout

Jika pilihan pembayaran atau Midtrans Snap tidak muncul setelah melakukan pemesanan, silakan aktifkan opsi Redirect payment mode dari halaman setting Midtrans di WooCommerce.

Kesimpulan

Menggunakan payment gateways seperti Midtrans sangat membantu Anda mengelolah pembayaran dari berbagai metode pembayaran. Tapi perlu dicatat, Midtrans memberikan potongan biaya untuk setiap transaksinya.

Pastikan biaya potongan per transaksi ini sudah Anda hitung agar penjualan toko Anda tetap mendapatkan profit atau keuntungan.

Demikian tutorial intergrasi Midtrans di WooCommerce, jika Anda memiliki pertanyaan atau kendala yang berhubungan dengan tutorial ini, silakan tinggalkan pesan dikolom komentar.