Tombol beli
Tombol beli adalah beberapa baris HTML yang Anda tempel di halaman mana pun. Tanpa framework, tanpa langkah instalasi di sisi Anda. Tombolnya dirender pada cat pertama; pemilih penyedia dan SDK penyedia-pembayaran dimuat sesuai permintaan pertama kali pembeli mengklik. Ia bekerja di situs atau framework apa pun yang merender HTML, termasuk pembangun situs tanpa-kode yang membiarkan Anda menempel embed HTML.
Terkonfirmasi bekerja dengan: Angular, Hugo, Jekyll, HTML biasa, Webflow (embed Custom Code), Carrd (elemen Embed), Framer (embed HTML), Squarespace (Code Block), WordPress (blok Custom HTML), Ghost, situs Notion (widget embed HTML). Jika situs Anda bisa menempelkan HTML pada sebuah halaman, tombol beli bekerja di sana.
Referensi atribut
| Atribut | Wajib | Apa yang diterima | Catatan |
|---|---|---|---|
endpoint | Tidak | String URL | Hampir selalu hilangkan ini. Tombolnya mendeteksi otomatis basis API-nya: https://api.coinmoebius.com di produksi, http://localhost:8787 di localhost. Atur ini hanya sebagai penimpa untuk setelan tidak biasa (mis. proxy yang di-host sendiri di depan API). |
project-id | Ya | String, berawalan proj_ | Dari halaman proyek Anda di dasbor. Aman diekspos secara publik, ia adalah pengenal, bukan kredensial. |
product-id | Ya (di mode ketat) / Disarankan (di mode ad-hoc) | String, format apa pun yang Anda pilih | Pengenal produk internal Anda. Di mode ketat (default), inilah cara worker mencari harga dari katalog Anda. Di mode ad-hoc, ia tetap diteruskan ke webhook Anda di metadata.productId agar Anda bisa memetakan transaksi kembali ke inventaris. Lihat bagian Mode ketat vs mode ad-hoc di bawah. |
amount | Hanya di mode ad-hoc | Angka desimal sebagai string | Harga dalam satuan besar (mis. dolar, bukan sen). Harus positif. Hilangkan ini di mode ketat. Worker membaca harga kanonis dari katalog Anda dan mengabaikan nilai apa pun di HTML. Wajib hanya saat proyek berada di mode ad-hoc dan product-id tidak ada di katalog. |
currency | Hanya di mode ad-hoc | Kode ISO 4217 tiga huruf atau nama satuan Anda sendiri | USD, EUR, dsb. untuk metode kartu / kripto. Penyedia bayar-lewat-pos menerima string apa pun (mis. GBK) karena penjuallah yang menyelesaikan transaksinya. Aturan yang sama dengan amount: hilangkan di mode ketat, wajib di mode ad-hoc untuk produk yang tidak ada di katalog. |
label | Tidak | String | Teks tombol. Default-nya Buy. Pakai ini untuk membedakan tombol di halaman yang sama. |
customer-ref | Tidak | String, format apa pun yang Anda pilih | Pengenal buram untuk pembeli di sistem Anda sendiri, seperti id pengguna yang masuk. Tombolnya meneruskannya ke worker sebagai metadata.customerRef, dan worker menandai transaksinya dengan itu. Nanti Anda bisa bertanya "pengguna mana yang membayar?" memakai id Anda sendiri, tanpa kami memegang data pelanggan yang sebenarnya. Hilangkan untuk checkout anonim. |
theme | Tidak | dark atau light | Memilih skema warna bawaan untuk tombol dan popup sekaligus. Default-nya dark. Atur theme="light" untuk skema terang. Variabel CSS Anda menimpa salah satunya. Lihat panduan gaya. |
editable-amount | Tidak | true atau false | Saat true, popup menampilkan kolom jumlah yang diisi pembeli (tip, donasi, bayar-sesukamu). Default-nya false, di mana amount yang Anda tetapkan adalah tetap dan tidak ada kolom yang muncul. Tombol pembayaran tetap nonaktif sampai jumlahnya adalah angka positif. |
Banyak tombol di satu halaman
Skripnya mendaftarkan tombol sekali, lalu sejumlah instance bisa dirender di sebuah halaman. Setiap instance independen. Contoh di bawah memakai mode ketat (default): tanpa amount atau currency di HTML, karena worker mencari harganya dari setiap produk di katalog Anda.
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>Jika proyek Anda di mode ad-hoc (widget donasi, kotak tip), setiap tombol juga menyertakan amount dan currency. Lihat Mode ketat vs mode ad-hoc untuk gambaran lengkapnya.
Menata tema tombol
Tombol beli dirender di dalam Shadow DOM, yang berarti tidak ada CSS halaman Anda yang menjangkau ke dalamnya. Itu disengaja: ia menjaga tombol terlihat sama di setiap situs, dan mencegah aturan * { box-sizing: ... } yang nyasar merusak modal pemilih. Anda menatanya lewat dua permukaan dari stylesheet Anda sendiri: properti kustom CSS untuk warna, font, dan bentuk, serta selektor ::part() untuk selebihnya. Tanpa JavaScript yang terlibat.
Setiap variabel dan part didokumentasikan di panduan gaya, dengan contoh langsung yang bisa Anda klik dan salin:
Buka panduan gaya interaktif →
URL sukses dan batal
Saat Anda menghubungkan Stripe atau NOWPayments di tab Penyedia dasbor, Anda menetapkan dua URL:
- URL sukses, tempat pembeli mendarat setelah pembayaran berhasil. Stripe dan NOWPayments menambahkan parameter kueri (
?session_id=...untuk Stripe,?NP_id=...untuk NOWPayments) agar halaman sukses Anda bisa mengenali transaksi mana yang selesai. Sebagian besar situs statis hanya menampilkan pesan umum "Terima kasih, pembayaran Anda sedang diproses" dan mengandalkan dasbor sebagai sumber kebenaran. - URL batal, tempat pembeli mendarat jika mereka mundur sebelum membayar. Sering kali sama dengan halaman keranjang Anda.
Kedua URL dikonfigurasi per-penyedia di dasbor, elemennya tidak perlu tahu tentangnya.