woocommerce_add_payment_method_form_bottom

TokoDaring.Com – Mengenal Hook woocommerce_add_payment_method_form_bottom di WooCommerce: Panduan Lengkap. WooCommerce menyediakan action hook bernama woocommerce_add_payment_method_form_bottom yang memungkinkan pengembang untuk menyisipkan elemen HTML, notifikasi, atau form tambahan di bagian bawah form penambahan metode pembayaran. Hook ini berguna untuk berbagai skenario mulai dari menampilkan informasi keamanan hingga menyisipkan form persetujuan syarat dan ketentuan.

Artikel Blog Post Lainnya: woocommerce_after_account_downloads

Mengenal Hook woocommerce_add_payment_method_form_bottom di WooCommerce: Panduan Lengkap

Dalam WooCommerce, halaman “Tambahkan Metode Pembayaran” (Add Payment Method) memberikan pengguna kemampuan untuk menambahkan metode pembayaran seperti kartu kredit ke akun mereka untuk digunakan di masa mendatang. Halaman ini sangat penting terutama untuk toko online yang menggunakan sistem langganan atau pembayaran cepat (fast checkout). Tapi bagaimana jika Anda ingin menambahkan elemen tambahan di bawah form penambahan metode pembayaran tersebut?

Apa Itu Hook woocommerce_add_payment_method_form_bottom?

woocommerce_add_payment_method_form_bottom adalah action hook yang dieksekusi tepat sebelum form penambahan metode pembayaran diakhiri. Artinya, konten yang dimasukkan melalui hook ini akan tampil di bagian paling bawah form, namun tetap berada di dalam elemen <form> sehingga dapat ikut terkirim jika Anda menambahkan input atau field.

Hook ini tidak menerima parameter, namun Anda tetap bisa mengakses informasi pengguna aktif atau konteks form melalui fungsi-fungsi global WordPress dan WooCommerce, seperti get_current_user_id() atau WC()->payment_gateways.

Contoh penggunaan sederhana hook ini adalah menampilkan pesan informasi di bawah form:

add_action( 'woocommerce_add_payment_method_form_bottom', 'custom_info_below_add_payment_form' );

function custom_info_below_add_payment_form() {
    echo '<p class="custom-info-message" style="color: #0071a1;">Pastikan informasi kartu Anda valid sebelum disimpan.</p>';
}

Dengan contoh di atas, pengguna akan melihat pesan informasi bergaya warna biru di bagian bawah form.

Menambahkan Field Tambahan dalam Form Tambah Metode Pembayaran

Salah satu kegunaan utama dari hook ini adalah menambahkan input field untuk mengumpulkan informasi tambahan dari pengguna. Misalnya, Anda ingin meminta pengguna memilih jenis kartu (pribadi atau bisnis) ketika menambahkan metode pembayaran.

Anda bisa menyisipkan input field menggunakan HTML biasa:

add_action( 'woocommerce_add_payment_method_form_bottom', 'add_card_type_field' );

function add_card_type_field() {
    ?>
    <p class="form-row form-row-wide">
        <label for="card_type">Jenis Kartu</label>
        <select name="card_type" id="card_type">
            <option value="personal">Pribadi</option>
            <option value="business">Bisnis</option>
        </select>
    </p>
    <?php
}

Namun, perlu diingat bahwa hook ini tidak menangani validasi atau penyimpanan data secara otomatis. Anda harus menambahkan logika tambahan menggunakan hook seperti woocommerce_save_payment_method atau menyimpan data ke metadata pengguna secara manual.

Mengintegrasikan Informasi Edukatif atau Keamanan

Dalam banyak kasus, penting bagi toko online untuk mengedukasi pengguna tentang keamanan data atau menjelaskan bagaimana metode pembayaran akan digunakan. Hook woocommerce_add_payment_method_form_bottom sangat ideal untuk menyisipkan konten edukatif, seperti tautan ke kebijakan privasi, FAQ pembayaran, atau ikon jaminan keamanan.

Contoh menampilkan ikon dan teks keamanan:

add_action( 'woocommerce_add_payment_method_form_bottom', 'display_security_badge' );

function display_security_badge() {
    echo '<div style="margin-top: 15px; text-align: center;">
        <img src="' . esc_url( get_stylesheet_directory_uri() . '/images/secure-payment.png' ) . '" alt="Pembayaran Aman" style="max-width: 100px;">
        <p>Transaksi Anda dienkripsi dan dilindungi oleh sistem keamanan tingkat tinggi.</p>
    </div>';
}

Ini menciptakan pengalaman pengguna yang lebih nyaman dan meningkatkan kepercayaan terhadap sistem pembayaran Anda.

Validasi & Penanganan Data dari Input Tambahan

Setelah Anda menambahkan input field dengan hook ini, penting untuk memproses dan menyimpan data tersebut dengan aman. Karena hook ini hanya menampilkan konten di tampilan frontend, Anda perlu menangani data secara manual saat form dikirimkan.

Salah satu pendekatan adalah menggunakan hook woocommerce_add_payment_method atau woocommerce_payment_token_created yang dijalankan saat metode pembayaran berhasil ditambahkan. Anda bisa mengakses nilai input yang dikirim melalui $_POST dan menyimpannya sebagai metadata pengguna:

add_action( 'woocommerce_payment_token_created', 'save_custom_card_type', 10, 2 );

function save_custom_card_type( $token_id, $token ) {
    if ( isset( $_POST['card_type'] ) ) {
        update_user_meta( get_current_user_id(), 'card_type_' . $token_id, sanitize_text_field( $_POST['card_type'] ) );
    }
}

Dengan pendekatan ini, setiap metode pembayaran yang ditambahkan akan memiliki metadata card_type yang bisa Anda gunakan untuk kebutuhan analitik, pelaporan, atau segmentasi pengguna.

Ringkasan, Mengenal Hook woocommerce_add_payment_method_form_bottom di WooCommerce: Panduan Lengkap

Hook woocommerce_add_payment_method_form_bottom adalah alat yang sangat fleksibel dan berguna dalam WooCommerce untuk menambahkan konten atau input kustom di bawah form penambahan metode pembayaran. Dengan memahami cara menyisipkan konten, menangani input, dan menyimpan data pengguna secara manual, Anda bisa meningkatkan fungsionalitas halaman ini sesuai kebutuhan bisnis Anda. Hook ini sangat cocok untuk kasus penggunaan seperti permintaan persetujuan, informasi tambahan, validasi internal, hingga tampilan visual yang lebih ramah pengguna.

Dengan memanfaatkan hook woocommerce_add_payment_method_form_bottom, Anda bisa mengubah halaman standar menjadi lebih informatif, interaktif, dan sesuai dengan kebutuhan unik toko online Anda. Jangan ragu untuk berinovasi dan meningkatkan pengalaman pengguna melalui penyesuaian kecil yang berdampak besar.

FAQ (Frequently Asked Questions) woocommerce_add_payment_method_form_bottom

Berikut FAQ informatif tentang woocommerce_add_payment_method_form_bottom. FAQ tentang ini melengkapi konten blog Mengenal Hook woocommerce_add_payment_method_form_bottom di WooCommerce: Panduan Lengkap. Dengan menjawab pertanyaan-pertanyaan utama yang mungkin dimiliki pembaca saat menjelajahi topik yang beragam.