Pada artikel ini, kita akan membahas cara menambahkan custom payment gateway manual di WooCommerce. Dengan menggunakan script PHP yang diberikan, kita dapat menambahkan dua metode pembayaran baru: Virtual Account dan GoPay. Selain itu, kita akan menjelaskan cara menampilkan pesan terima kasih yang lebih spesifik menggunakan OceanWP Library.
Kegunaan Custom Payment Gateway Manual
- Fleksibilitas Pembayaran: Menambahkan metode pembayaran baru memberikan lebih banyak pilihan kepada pelanggan, meningkatkan kepuasan dan tingkat konversi.
- Integrasi dengan Sistem Pembayaran Lokal: Metode pembayaran seperti Virtual Account dan GoPay sangat relevan di Indonesia, memudahkan pelanggan untuk melakukan transaksi.
- Meningkatkan Kepercayaan Pelanggan: Menyediakan berbagai opsi pembayaran yang familiar dan aman meningkatkan kepercayaan pelanggan terhadap toko online Anda.
Script (PHP)
add_filter('woocommerce_payment_gateways', 'add_custom_payment_gateways');
function add_custom_payment_gateways($gateways) {
$gateways[] = 'WC_Virtual_Account_Gateway';
$gateways[] = 'WC_GoPay_Gateway';
return $gateways;
}
add_action('plugins_loaded', 'init_custom_payment_gateways');
function init_custom_payment_gateways() {
class WC_Virtual_Account_Gateway extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'virtual_account_gateway';
$this->method_title = 'Virtual Account';
$this->method_description = 'Pay using Virtual Account';
$this->has_fields = true;
$this->init_form_fields();
$this->init_settings();
$this->title = $this->get_option('title');
$this->description = $this->get_option('description');
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
}
public function init_form_fields() {
$this->form_fields = array(
'title' => array(
'title' => __('Title', 'woocommerce'),
'type' => 'text',
'description' => __('This controls the title displayed during checkout.', 'woocommerce'),
'default' => __('Virtual Account', 'woocommerce'),
'desc_tip' => true,
),
'description' => array(
'title' => __('Description', 'woocommerce'),
'type' => 'textarea',
'description' => __('This controls the description displayed during checkout.', 'woocommerce'),
'default' => __('Pay using Virtual Account.', 'woocommerce'),
'desc_tip' => true,
),
);
}
public function process_payment($order_id) {
global $woocommerce;
$order = wc_get_order($order_id);
$order->update_status('on-hold', __('Awaiting virtual account payment', 'woocommerce'));
wc_reduce_stock_levels($order_id);
$woocommerce->cart->empty_cart();
return array(
'result' => 'success',
'redirect' => $this->get_return_url($order),
);
}
public function payment_fields() {
echo '<p>' . __('Please pay using Virtual Account.', 'woocommerce') . '</p>';
}
public function validate_fields() {
return true;
}
}
class WC_GoPay_Gateway extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'gopay_gateway';
$this->method_title = 'GoPay';
$this->method_description = 'Pay using GoPay';
$this->has_fields = true;
$this->init_form_fields();
$this->init_settings();
$this->title = $this->get_option('title');
$this->description = $this->get_option('description');
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
}
public function init_form_fields() {
$this->form_fields = array(
'title' => array(
'title' => __('Title', 'woocommerce'),
'type' => 'text',
'description' => __('This controls the title displayed during checkout.', 'woocommerce'),
'default' => __('GoPay', 'woocommerce'),
'desc_tip' => true,
),
'description' => array(
'title' => __('Description', 'woocommerce'),
'type' => 'textarea',
'description' => __('This controls the description displayed during checkout.', 'woocommerce'),
'default' => __('Pay using GoPay.', 'woocommerce'),
'desc_tip' => true,
),
);
}
public function process_payment($order_id) {
global $woocommerce;
$order = wc_get_order($order_id);
$order->update_status('on-hold', __('Awaiting GoPay payment', 'woocommerce'));
wc_reduce_stock_levels($order_id);
$woocommerce->cart->empty_cart();
return array(
'result' => 'success',
'redirect' => $this->get_return_url($order),
);
}
public function payment_fields() {
echo '<p>' . __('Please pay using GoPay.', 'woocommerce') . '</p>';
}
public function validate_fields() {
return true;
}
}
}
add_action('woocommerce_before_thankyou', 'custom_thankyou_message', 5);
function custom_thankyou_message($order_id) {
if (!$order_id) {
return;
}
$order = wc_get_order($order_id);
$payment_method = $order->get_payment_method();
if ($payment_method == 'virtual_account_gateway') {
echo '<p>ABC</p>';
} elseif ($payment_method == 'gopay_gateway') {
echo '<p></p>';
}
}
Cara Kerja Custom Payment Gateway Manual
Penambahan Gateway Pembayaran
Script ini dimulai dengan menambahkan dua gateway pembayaran baru ke WooCommerce. Metode pembayaran ini adalah WC_Virtual_Account_Gateway
dan WC_GoPay_Gateway
.
Inisialisasi Gateway Pembayaran
Setelah gateway pembayaran ditambahkan, script menginisialisasi kedua kelas gateway pembayaran ketika plugin WooCommerce dimuat. Kelas ini bertugas mengatur konfigurasi, menampilkan formulir pembayaran, dan memproses pembayaran.
Kelas WC_Virtual_Account_Gateway
- Konfigurasi Gateway: Mengatur ID, judul, dan deskripsi metode pembayaran, serta memungkinkan konfigurasi melalui halaman admin WooCommerce.
- Formulir Pembayaran: Menampilkan instruksi pembayaran selama proses checkout.
- Proses Pembayaran: Mengatur status pesanan menjadi “on-hold” dan mengurangi stok produk setelah pesanan dibuat.
Kelas WC_GoPay_Gateway
- Konfigurasi Gateway: Mengatur ID, judul, dan deskripsi metode pembayaran GoPay, serta memungkinkan konfigurasi melalui halaman admin WooCommerce.
- Formulir Pembayaran: Menampilkan instruksi pembayaran untuk GoPay selama checkout.
- Proses Pembayaran: Mengatur status pesanan menjadi “on-hold” dan mengurangi stok produk setelah pesanan dibuat.
Pesan Terima Kasih Khusus
Script ini juga menambahkan pesan khusus pada halaman “Thank You” berdasarkan metode pembayaran yang dipilih. Jika pelanggan menggunakan Virtual Account, pesan “ABC” akan ditampilkan. Jika menggunakan GoPay, akan ditampilkan konten dari OceanWP Library menggunakan shortcode .
Penggunaan Shortcode dengan OceanWP Library
Untuk menampilkan shortcode secara efektif, disarankan untuk menggunakan OceanWP Library. Ini memungkinkan kita untuk membuat dan menempatkan konten khusus pada halaman web dengan mudah. OceanWP Library memiliki beberapa fungsi ganda yang berguna, termasuk:
- Instruksi Pembayaran yang Spesifik: Dengan OceanWP Library, Anda dapat memberikan instruksi pembayaran yang lebih spesifik dan mudah dimengerti, terutama bagi pelanggan yang kurang familiar dengan teknologi informasi.
- Fleksibilitas Konten: OceanWP Library memungkinkan Anda untuk dengan mudah mengubah dan mengelola konten instruksi pembayaran tanpa harus mengedit script secara langsung.
- Menampilkan Formulir Konfirmasi Pembayaran: Anda juga dapat menambahkan formulir konfirmasi pembayaran dalam OceanWP Library. Ini memungkinkan pelanggan untuk mengunggah bukti pembayaran langsung setelah melihat pesan terima kasih, menggabungkan dua fitur penting dalam satu tempat yang mudah diakses.
Dengan mengikuti langkah-langkah ini, Anda dapat menambahkan custom payment gateway yang relevan dan berguna bagi pelanggan Anda, serta menyediakan instruksi pembayaran yang jelas dan mudah dipahami. Ini tidak hanya meningkatkan pengalaman pengguna tetapi juga membantu memastikan transaksi diselesaikan dengan lancar dan tepat waktu.
Script Alternatif: Termasuk Direct Bank Transfer
Script:
add_filter('woocommerce_payment_gateways', 'add_custom_payment_gateways');
function add_custom_payment_gateways($gateways) {
$gateways[] = 'WC_Virtual_Account_Gateway';
$gateways[] = 'WC_GoPay_Gateway';
return $gateways;
}
add_action('plugins_loaded', 'init_custom_payment_gateways');
function init_custom_payment_gateways() {
class WC_Virtual_Account_Gateway extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'virtual_account_gateway';
$this->method_title = 'Virtual Account';
$this->method_description = 'Pay using Virtual Account';
$this->has_fields = true;
$this->init_form_fields();
$this->init_settings();
$this->title = $this->get_option('title');
$this->description = $this->get_option('description');
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
}
public function init_form_fields() {
$this->form_fields = array(
'title' => array(
'title' => __('Title', 'woocommerce'),
'type' => 'text',
'description' => __('This controls the title displayed during checkout.', 'woocommerce'),
'default' => __('Virtual Account', 'woocommerce'),
'desc_tip' => true,
),
'description' => array(
'title' => __('Description', 'woocommerce'),
'type' => 'textarea',
'description' => __('This controls the description displayed during checkout.', 'woocommerce'),
'default' => __('Pay using Virtual Account.', 'woocommerce'),
'desc_tip' => true,
),
);
}
public function process_payment($order_id) {
global $woocommerce;
$order = wc_get_order($order_id);
$order->update_status('on-hold', __('Awaiting virtual account payment', 'woocommerce'));
wc_reduce_stock_levels($order_id);
$woocommerce->cart->empty_cart();
return array(
'result' => 'success',
'redirect' => $this->get_return_url($order),
);
}
public function payment_fields() {
echo '<p>' . __('Please pay using Virtual Account.', 'woocommerce') . '</p>';
}
public function validate_fields() {
return true;
}
}
class WC_GoPay_Gateway extends WC_Payment_Gateway {
public function __construct() {
$this->id = 'gopay_gateway';
$this->method_title = 'GoPay';
$this->method_description = 'Pay using GoPay';
$this->has_fields = true;
$this->init_form_fields();
$this->init_settings();
$this->title = $this->get_option('title');
$this->description = $this->get_option('description');
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
}
public function init_form_fields() {
$this->form_fields = array(
'title' => array(
'title' => __('Title', 'woocommerce'),
'type' => 'text',
'description' => __('This controls the title displayed during checkout.', 'woocommerce'),
'default' => __('GoPay', 'woocommerce'),
'desc_tip' => true,
),
'description' => array(
'title' => __('Description', 'woocommerce'),
'type' => 'textarea',
'description' => __('This controls the description displayed during checkout.', 'woocommerce'),
'default' => __('Pay using GoPay.', 'woocommerce'),
'desc_tip' => true,
),
);
}
public function process_payment($order_id) {
global $woocommerce;
$order = wc_get_order($order_id);
$order->update_status('on-hold', __('Awaiting GoPay payment', 'woocommerce'));
wc_reduce_stock_levels($order_id);
$woocommerce->cart->empty_cart();
return array(
'result' => 'success',
'redirect' => $this->get_return_url($order),
);
}
public function payment_fields() {
echo '<p>' . __('Please pay using GoPay.', 'woocommerce') . '</p>';
}
public function validate_fields() {
return true;
}
}
}
add_action('woocommerce_before_thankyou', 'custom_thankyou_message', 5);
function custom_thankyou_message($order_id) {
if (!$order_id) {
return;
}
$order = wc_get_order($order_id);
$payment_method = $order->get_payment_method();
if ($payment_method == 'virtual_account_gateway') {
echo '<p></p>';
} elseif ($payment_method == 'gopay_gateway') {
echo '<p></p>';
} elseif ($payment_method == 'bacs') { // BACS is the ID for Direct Bank Transfer
echo '<p></p>';
}
}
Keterangan:
Untuk script alternatif ini, pilihan BACS atau direct bank transfer, juga akan memunculkan shortcode yang bisa dibuat menggunakan oceanWP Library . Jadi, tidak hanya jika memilih custom payment saja yang akan menghasilkan halaman Thank You custom. Tetapi jika memilih opsi direct bank transfer yang ada di WooCommerce, disana Anda bisa mengkustomisasi nya.