50 Trust & Security CAPTCHA dan Security Badges

Bab penutup bagian fitur storefront ini pendek tapi sering jadi sumber bug misterius: form yang “gak bisa disubmit” atau pengunjung yang tiba-tiba dilempar ke halaman /challenge. Penyebabnya hampir selalu CAPTCHA yang gak ke-wire dengan benar.

Kepercayaan dan keamanan penting buat merchant (dilindungi dari spam) dan pembeli (yakin tokonya aman). Shopify nyediain dua hal: CAPTCHA di form pelanggan, kontak, dan komentar blog, dan security badge yang bisa dilink ke dokumentasi kepatuhan PCI Shopify.

CAPTCHA

Shopify pakai hCaptcha buat nyegah spam lewat form customer (login, daftar, lupa password, newsletter), contact, dan komentar blog. Cara kerjanya dua tahap:

1. Analisis perilaku pengunjung di latar, ngasih skor kemungkinan dia bot, tanpa nyuruh pengunjung nyelesaiin tantangan apa-apa. Kebanyakan pengunjung gak pernah lihat CAPTCHA.
2. Kalau hasilnya cukup mencurigakan, atau ada terlalu banyak request dalam waktu singkat, pengunjung dialihkan ke halaman /challenge buat nyelesaiin tantangan interaktif (pilih gambar, dan seterusnya).

Merchant bisa matiin hCaptcha di Online Store > Preferences, tapi itu keputusan mereka, theme harus siap kalau nyala.

1. Gimana CAPTCHA Masuk ke Theme

Kode CAPTCHA disertakan lewat content_for_header dari 13 Objects Global > 1. content_for_header. Konsekuensinya jelas: kalau merchant nyalain CAPTCHA tapi theme gak ngerender content_for_header (atau ngerusaknya), CAPTCHA gak ada, dan form kebanjiran spam.

CAPTCHA diinisialisasi berdasarkan keberadaan form customer, contact, dan komentar, dan dipicu waktu form-nya diinteraksi (misalnya pengunjung klik field teks). Jadi di halaman tanpa form-form ini, gak ada beban CAPTCHA sama sekali.

Form-nya dikenali dari atribut action dan input form_type:

1. Customer: action mengandung /account, input name="form_type" bernilai customer_login, create_customer, atau recover_customer_password.
2. Contact: action mengandung /contact, form_type bernilai contact atau customer (form newsletter dari 46 Customer Sign-in, Account Component, Contact Form, Email Consent itu form_type=customer dengan action /contact).
3. Blog: action mengandung /blogs, form_type bernilai new_comment.

Kalau kamu pakai tag form Liquid dari 12 Tags Khusus Theme, atribut ini otomatis ada. Kalau theme kamu pakai form HTML kustom, pastiin atributnya lengkap biar kompatibel:

<form action="/account/login" ...>
  <input type="hidden" name="form_type" value="customer_login" />
  ...
</form>

❌ form kustom tanpa form_type, CAPTCHA gak ke-wire, submit ditolak atau spam masuk

<form action="/contact" method="post">
  <input type="email" name="contact[email]">
</form>

✅ pakai tag form Liquid, semuanya otomatis

{% form 'contact' %}
  <input type="email" name="contact[email]">
{% endform %}

Selain dipicu waktu interaksi, logo hCaptcha ditambahin di pojok kanan bawah halaman buat ngasih tau pengunjung ada analisis perilaku. Ini kewajiban hukum (privasi), dan kamu bisa gantinya dengan disclaimer teks.

2. Disclaimer Teks

Kalau kamu lebih suka teks di dekat form daripada logo melayang di pojok, sertakan ini di dalam form yang bersangkutan:

{{ 'shopify.online_store.spam_detection.disclaimer_html'  | t }}

Kunci terjemahan shopify.* itu disediain Shopify, bukan dari locale file theme kamu, dan udah diterjemahin ke semua bahasa. Isinya kalimat “This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.” dengan link-nya. Waktu disclaimer ini ada di form, logo pojoknya disembunyiin.

3. Memaksa Wire-up (Lanjutan)

Peringatan dulu: jangan pakai library CAPTCHA-nya langsung, misalnya manggil method di window.hCaptcha. Itu bikin integrasi kamu gak kompatibel sama mekanisme perlindungan Shopify yang bisa berubah. Pakai cara yang didukung di bawah.

Kadang CAPTCHA perlu dipaksa ke-wire ke form. Contohnya form yang diisi dan disubmit secara programatik (JavaScript ngisi email dari tempat lain dan langsung submit), jadi perilaku default “wire-up waktu interaksi” gak pernah terjadi karena pengunjung gak pernah nyentuh form-nya. Dua opsi:

Lewat atribut data: data-shopify-captcha="true" bikin CAPTCHA ke-wire segera waktu halaman dimuat, gak nunggu interaksi:

{%- form 'customer_login', data-shopify-captcha: "true" -%}

<form data-shopify-captcha="true" action="/account/login" ...>
  <input type="hidden" name="form_type" value="customer_login" />
  ...
</form>

Perhatiin cara ngirim atribut HTML ke tag form Liquid: data-shopify-captcha: "true" sebagai parameter.

Lewat JavaScript: window.Shopify.captcha.protect(form, callback). Argumen pertama form-nya, kedua callback opsional yang dipanggil setelah CAPTCHA siap. Ini buat kasus kamu memanipulasi dan submit form sebagai respons aksi pengguna di tempat lain:

const myForm = document.querySelector('#my-form');
window.Shopify.captcha.protect(myForm, () => {
  myForm.elements["contact[email]"].value = '[email protected]';
  myForm.submit();
});

Tanpa protect, myForm.submit() langsung bakal ngirim form tanpa token CAPTCHA, dan Shopify nolak atau ngelempar ke /challenge.

4. Verifikasi

Cara ngecek CAPTCHA beneran ke-wire:

1. Buka dev tools browser, tab Network.
2. Isi dan submit form.
3. Periksa payload request POST ke server.
4. Pastiin ada field h-captcha-response yang berisi data.

Kalau field-nya gak ada atau kosong, CAPTCHA gak ke-wire.

5. Troubleshooting

1. Pastiin content_for_header ada di layout yang punya form yang butuh hCaptcha, dan gak ada kode yang ngubah object itu (misalnya replace buat ngehapus script tertentu, praktik buruk yang kadang dilakuin buat “optimasi”).
2. Kalau mau form ke-wire otomatis, pastiin markup-nya bener: action yang tepat dan input form_type yang sesuai.
3. hCaptcha diinisialisasi di DOMContentLoaded tapi cuma ke-wire waktu interaksi. Kalau kamu bikin atau submit form secara programatik, atau nambahin form ke DOM setelah DOMContentLoaded (cart drawer yang dirender Section Rendering API, modal login yang dimuat belakangan), pakai window.Shopify.captcha.protect.
4. App pihak ketiga bisa ngeblokir resource hCaptcha atau memanipulasi DOM sampai hCaptcha gak ke-wire. Biasanya app yang fokus ke metrik page load (nunda script) atau manajemen consent GDPR (ngeblokir script sampai disetujui). Matiin sementara waktu debug, dan biasanya app-nya punya ignore list buat ngecualiin hCaptcha setelah masalahnya ketemu.

Security Badges

Buat ngebangun kepercayaan pembeli, kamu bisa nyertain badge keamanan dan ngelinknya ke dokumentasi Shopify soal kepatuhan PCI (Payment Card Industry, standar keamanan data kartu). Ada versi terang dan gelap sesuai skema warna theme.

1. Di Mana

Biasanya di footer atau dekat tombol Add to cart di halaman produk, tapi bisa di manapun kamu bisa naruh HTML. Gak bisa di halaman checkout, kecuali toko Plus dengan akses checkout.liquid dari 34 checkout.liquid (deprecated) (yang udah pensiun, jadi praktis gak bisa).

2. Kodenya

Versi terang (buat latar gelap):

<a
  href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure"
  title="This online store is secured by Shopify"
  target="_blank"
  rel="nofollow"
>
  <img
    src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-white.svg"
    alt="Shopify secure badge"
   />
</a>

Versi gelap (buat latar terang):

<a
  href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure"
  title="This online store is secured by Shopify"
  target="_blank"
  rel="nofollow"
>
  <img
    src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-dark.svg"
    alt="Shopify secure badge"
   />
</a>

File-nya SVG, jadi bisa diubah ukurannya tanpa kehilangan kualitas. rel="nofollow" biar link ke luar gak ngalirin “link juice” SEO, target="_blank" biar pembeli gak keluar dari toko.

Praktik bagusnya: jadiin theme setting (checkbox tampilin badge + pilihan terang/gelap yang ngikutin skema warna), karena gak semua merchant mau badge di footernya. Dan buat ikon pembayaran (Visa, Mastercard, Shop Pay) yang biasanya bersebelahan sama badge ini, pakai shop.enabled_payment_types dengan filter payment_type_svg_tag dari 20 Filters Money, Metafield, Cart, Customer, dan Localization > 3. payment_type_img_url dan payment_type_svg_tag.

Ringkasan

1. hCaptcha ngelindungin form customer, contact, dan komentar blog: analisis perilaku dulu, /challenge kalau mencurigakan. Merchant bisa matiin di Preferences.
2. Masuk lewat content_for_header, jadi object itu wajib ada dan gak boleh diubah. Diinisialisasi di DOMContentLoaded, ke-wire waktu form diinteraksi.
3. Form dikenali dari action (/account, /contact, /blogs) dan input form_type (customer_login, create_customer, recover_customer_password, contact, customer, new_comment). Tag form Liquid ngasih semuanya otomatis, form kustom harus nambahin sendiri.
4. Disclaimer teks {{ 'shopify.online_store.spam_detection.disclaimer_html' | t }} di dalam form ngegantiin logo pojok.
5. Paksa wire-up buat form programatik atau yang ditambahin belakangan: data-shopify-captcha="true" (waktu load) atau window.Shopify.captcha.protect(form, callback). Jangan sentuh window.hCaptcha.
6. Verifikasi lewat field h-captcha-response di payload POST. Troubleshoot: content_for_header, markup form, form dinamis, app pihak ketiga (page speed, GDPR).
7. Security badge SVG terang/gelap dilink ke halaman PCI Shopify dengan rel="nofollow", di footer atau dekat Add to cart, gak bisa di checkout, sebaiknya jadi theme setting.

---

Bab selanjutnya kita masuk bagian berikutnya dengan API yang udah dirujuk di hampir semua bab fitur: Ajax API (cart, product, predictive search, recommendations) dan Section Rendering API buat ngerender ulang section tanpa reload.