Hiển thị thông báo thanh toán theo IP trong WooCommerce

Tác giả:Lisa Farrell·2026-06-01

Cửa hàng WooCommerce có thể hiển thị thông báo thanh toán khác nhau theo khu vực người truy cập. PHP chèn container, trình duyệt lấy thông tin IP và thay đổi nội dung.

Mục tiêu thiết kế

Với “Hiển thị thông báo thanh toán theo IP trong WooCommerce”, trang phải hữu ích ngay cả trước khi request IP hoàn tất. Kết quả vị trí chỉ là lớp tăng cường: dữ liệu được kiểm tra, chỉ tác động đến một quyết định giới hạn và bị bỏ qua nếu thiếu trường.

Luồng request và quyết định

Hiển thị thông báo thanh toán theo IP trong WooCommerce: Luồng dưới đây được thiết kế riêng cho cách triển khai này, không lặp lại checklist tra cứu IP chung.

  1. Bước 1 — Trạng thái mặc định: woocommerce_review_order_before_payment
  2. Bước 2 — Request: geo hint
  3. Bước 3 — Kiểm tra: updated_checkout
  4. Bước 4 — Quyết định: billing country is authoritative
  5. Bước 5 — Dự phòng: sessionStorage + fallback

Ví dụ hướng đến production

Hiển thị thông báo thanh toán theo IP trong WooCommerce: Ví dụ bổ sung timeout, kiểm tra response, phương án dự phòng xác định và xử lý vòng đời phù hợp với framework.

<?php
function ipin_payment_notice_markup(): void {
    echo '<div id="ipin-payment-note" class="woocommerce-info">'
       . esc_html__('Payment options are confirmed after you enter a billing country.', 'ipin')
       . '</div>';
}
add_action('woocommerce_review_order_before_payment', 'ipin_payment_notice_markup', 5);

function ipin_payment_notice_assets(): void {
    if (!is_checkout()) return;
    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', <<<'JS'
(($) => {
  const notes = {
    JP: 'Domestic bank transfer details appear after order confirmation.',
    DE: 'SEPA availability depends on the billing details and selected gateway.',
    US: 'ACH availability is confirmed after the billing address is validated.'
  };
  const neutral = 'Payment options are confirmed after you enter a billing country.';
  let geoHint = sessionStorage.getItem('ipin_country') || '';

  function render() {
    const billing = String($('#billing_country').val() || '').toUpperCase();
    const country = /^[A-Z]{2}$/.test(billing) ? billing : geoHint;
    $('#ipin-payment-note').text(notes[country] || neutral);
  }

  $(document.body).on('updated_checkout', render);
  render();

  if (!/^[A-Z]{2}$/.test(geoHint)) {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 2200);
    fetch('https://my.ipin.io/info', {signal: controller.signal})
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(data => {
        const value = String(data.country || '').toUpperCase();
        if (/^[A-Z]{2}$/.test(value)) {
          geoHint = value;
          sessionStorage.setItem('ipin_country', value);
          render();
        }
      })
      .catch(() => {})
      .finally(() => clearTimeout(timer));
  }
})(jQuery);
JS);
}
add_action('wp_enqueue_scripts', 'ipin_payment_notice_assets');

Ma trận kiểm thử

Trước khi xuất bản “Hiển thị thông báo thanh toán theo IP trong WooCommerce”, hãy chạy các trường hợp sau bằng response giả lập hoặc điểm thoát VPN có kiểm soát.

Điều kiệnĐầu vào / thiết lậpKết quả mong đợi
T1IP=JP; billing=emptyJP note
T2billing=DEDE note > IP hint
T3updated_checkoutone DOM node
T4CORS / timeoutneutral notice

Kiểm thử tự động / smoke test

// Manual checkout assertion after changing the billing country:
jQuery('#billing_country').val('DE').trigger('change');
jQuery(document.body).trigger('updated_checkout');
console.assert(jQuery('#ipin-payment-note').text().includes('SEPA'));

Xử lý lỗi

Hiển thị thông báo thanh toán theo IP trong WooCommerce: Lỗi cần xuất hiện trong log hoặc công cụ dành cho nhà phát triển, nhưng không được để lại module trống hay làm hỏng trang thanh toán.

LỗiNguyên nhânCách xử lý
fragment replacestale DOM refquery on updated_checkout
billing ≠ IPVPN / travelbilling wins
full-page cachevisitor textclient-side only
gateway disabledserver ruleWooCommerce filter

Tình huống thực tế

Một tình huống thực tế cho “Hiển thị thông báo thanh toán theo IP trong WooCommerce”: checkout hiển thị sớm ghi chú chuyển khoản theo khu vực, nhưng thông báo cuối cùng và quy tắc cổng thanh toán vẫn dựa trên quốc gia thanh toán do khách nhập.

Lưu ý khi triển khai

Hiển thị thông báo thanh toán theo IP trong WooCommerce: Giữ HTML mặc định đầy đủ. Vị trí IP không chứng minh danh tính và kết quả phía trình duyệt không được dùng để kiểm soát quyền.

Kết luận

“Hiển thị thông báo thanh toán theo IP trong WooCommerce” hiện có luồng triển khai, bằng chứng kiểm thử và hành vi dự phòng riêng thay vì dùng chung một mẫu bài viết.