Tombol beli dan popup pembayaran yang dibukanya sama-sama mengikuti warna, font, dan bentuk Anda. Anda menetapkan beberapa variabel CSS; keduanya mengikuti bersama. Semua di bawah ini adalah contoh yang berfungsi dan bisa Anda klik, dengan kode persis yang menghasilkannya tepat di sebelahnya.
Tidak satu pun dari ini adalah tema bawaan. Setiap tampilan dibangun dari CSS sederhana yang ditampilkan di sebelahnya. Salin salah satunya sebagai titik awal dan ubah apa pun yang Anda mau.
Ini adalah tombol langsung dengan penyedia pengganti dan kode referensi palsu. Tidak ada pembayaran yang diterima. Klik sebuah tombol untuk membuka popup-nya, lalu baca kode yang menatanya.
Tanpa CSS, tanpa atribut. Tombol dan popup-nya berbagi satu warna arang netral langsung dari kotak. Ini adalah theme="dark", yang merupakan default, jadi menuliskannya tidak mengubah apa pun.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Tambahkan theme="light" dan baik tombol maupun popup berubah menjadi putih gading lembut. Satu atribut, tanpa CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Masing-masing dari ini hanyalah CSS yang ditampilkan di sebelahnya, tidak lebih. Ambil salah satunya, tempel ke stylesheet Anda sendiri, dan ubah nilainya. Campur sesuka Anda.
Tombol nila dengan popup nila yang serasi, diatur dengan segelintir variabel CSS. Ubah nilai apa pun untuk mewarnai ulang.
coin-moebius-buy {
/* the button */
--cm-button-bg: #4f46e5;
--cm-button-color: #fff;
--cm-button-radius: 9999px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #1e1b4b;
--cm-color: #e0e7ff;
--cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 9999px;
}Latar hitam, teks monospace hijau, sudut kotak. Popup-nya mengikuti tampilan yang sama. Setiap nilai di sini bebas Anda tukar.
coin-moebius-buy {
/* the button */
--cm-button-bg: #001b00;
--cm-button-color: #39ff14;
--cm-button-radius: 0;
--cm-font: 'Courier New', monospace;
/* the popup, styled to match */
--cm-modal-bg: #000;
--cm-color: #39ff14;
--cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
border: 1px solid #39ff14;
border-radius: 0;
}
coin-moebius-buy::part(provider) {
border-radius: 0;
}Tombol merah muda hangat dengan popup merah muda lembut yang serasi. Bulatkan sudutnya lebih atau kurang dengan mengubah satu angka.
coin-moebius-buy {
/* the button */
--cm-button-bg: #ec4899;
--cm-button-color: #fff;
--cm-button-radius: 14px;
/* the popup, styled to match */
--cm-modal-bg: #fff1f7;
--cm-color: #831843;
--cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 12px;
}Permukaan tombol bergradien, dengan popup bercorak serasi. Cat permukaan tombolnya sesuka Anda.
coin-moebius-buy::part(button) {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.8rem 2rem;
font-weight: 700;
}
coin-moebius-buy {
/* the popup, picking up the gradient's colors */
--cm-modal-bg: #f5f3ff;
--cm-color: #4c1d95;
--cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
border-top: 4px solid #764ba2;
}Garis tepi tipis, teks redup, dan popup putih bersih. Kupas hingga sesederhana yang Anda mau.
coin-moebius-buy {
/* the button */
--cm-button-bg: transparent;
--cm-button-color: #374151;
--cm-button-radius: 6px;
/* the popup, styled to match */
--cm-modal-bg: #fff;
--cm-color: #374151;
--cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
border-radius: 8px;
border: 1px solid #e5e7eb;
}Contoh di atas berada di latar kosong. Di sini ia berada di sebuah halaman, terselip dalam kartu, dengan jumlah-bisa-diedit diaktifkan agar pembeli memilih berapa yang akan diberikan. Klik dan coba.
Tinggalkan tip. Itu menjaga lampu tetap menyala dan postingan tetap mengalir.
coin-moebius-buy {
/* the button */
--cm-button-bg: #b45309;
--cm-button-color: #fff;
--cm-button-radius: 8px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #fffaf3;
--cm-color: #7c4a02;
--cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
}Tambahkan editable-amount="true" dan popup menampilkan kolom jumlah yang diisi pembeli, untuk tip, donasi, atau bayar-sesukamu. Biarkan mati, yang merupakan default, dan amount yang Anda tetapkan menjadi tetap serta tidak ada kolom yang muncul. Bagaimanapun juga tombol pembayaran tetap nonaktif sampai jumlahnya adalah angka positif, jadi pembeli tidak bisa checkout tanpa membayar apa-apa.
Setiap permukaan yang bisa Anda atur gayanya. Tetapkan variabel pada tombol; jangkau sisanya dengan ::part().
Atur ini pada elemen coin-moebius-buy (atau leluhur mana pun, karena properti kustom diwariskan):
| Properti | Default | Apa yang dikontrol |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Keluarga font untuk label tombol dan setiap elemen teks di dalam modal pemilih. |
--cm-color | #ededed (#1f1f1f dengan theme="light") | Warna teks untuk popup dan instruksinya. |
--cm-button-bg | #2b2b2b (#f5f5f5 dengan theme="light") | Warna latar tombol. Cocok dengan permukaan popup secara default. |
--cm-button-color | #ededed (#1f1f1f dengan theme="light") | Warna teks tombol. |
--cm-button-radius | 6px | Radius sudut tombol. Pakai 999px untuk bentuk pil, 0 untuk kotak. |
--cm-modal-bg | #2b2b2b (#f5f5f5 dengan theme="light") | Latar popup pemilih. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Corak latar belakang di belakang modal pemilih. |
Untuk apa pun di luar variabel di atas, sasarkan part bernama dari komponennya lewat CSS halaman Anda. Tombolnya mengekspos delapan:
| Part | Elemen |
|---|---|
button | Tombol beli itu sendiri. |
modal | Kontainer overlay seluas-viewport di belakang pemilih. |
dialog | Kotak modal pemilih yang terpusat. |
provider | Setiap opsi penyedia-pembayaran di dalam pemilih. |
provider-icon | Ikon kecil di sebelah nama penyedia. |
provider-name | Teks nama penyedia. |
close | Tombol "Batal" di bagian bawah pemilih. |
instructions | Panel instruksi yang ditampilkan untuk bayar-lewat-pos (alamat pos + kode referensi). |
Popup-nya gelap secara default. Untuk popup terang, tambahkan theme="light" ke elemennya. Itu seluruh sakelarnya, dan ia tidak mengikuti pengaturan perangkat pengunjung, jadi yang Anda pilih adalah yang dilihat setiap pembeli. Mau sesuatu yang spesifik? Atur variabel mana pun di atas pada salah satu tema dan nilai Anda menang.
Beberapa hal sengaja dipatok di v1: transisi hover 120ms, z-index modal, dan sebagian besar spasi/padding di dalam pemilih. Jika sebuah kebutuhan merek menyentuh salah satunya, solusinya adalah selektor ::part() yang sama dengan penimpa !important; perbaikan yang lebih bersih adalah meminta kami menambahkan variabel CSS untuknya. Pelacak isu SDK adalah tempat yang tepat untuk itu.
Pilih metode mana yang tampil di popup, ganti namanya, dan atur urutannya untuk setiap produk dari dasbor Anda. Sebuah langganan bisa melewatkan bayar-lewat-pos sementara sebuah unduhan tetap memakainya.
Salin contoh mana pun ke stylesheet Anda dan mulai menerima pembayaran. Gratis untuk memulai, tanpa kartu.