Codex · IX

Fanya kitufe cha kununua kuwa chako

Kitufe cha kununua na kidirisha cha malipo kinachokifungua vyote vinachukua rangi zako, fonti, na umbo. Unaweka vigeu vichache vya CSS; vyote viwili hufuata pamoja. Kila kitu hapa chini ni mfano unaofanya kazi unaoweza kuubofya, na msimbo halisi ulioutoa pembeni yake.

Hakuna kati ya hizi ni mandhari za awali. Kila muonekano umejengwa kutoka CSS rahisi inayoonyeshwa pembeni yake. Nakili yoyote kama mahali pa kuanzia na ubadilishe chochote unachotaka.

Hivi ni vitufe hai na watoa huduma wa mfano na nambari ya rejea ya bandia. Hakuna malipo yanayochukuliwa. Bofya kitufe kufungua kidirisha chake, kisha soma msimbo ulioupamba.

Chaguo-msingi

Hakuna CSS, hakuna sifa. Kitufe na kidirisha chake hushiriki rangi moja ya makaa isiyoegemea upande nje ya kisanduku. Hii ni theme="dark", chaguo-msingi, kwa hiyo kuiandika hakubadilishi chochote.

Buy now

Bofya kufungua kidirisha

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

Mandhari nyepesi

Ongeza theme="light" na kitufe na kidirisha vyote vinakuwa nyeupe-laini. Sifa moja, hakuna CSS.

Get access

Bofya kufungua kidirisha

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

Mifano, si za awali

Kila moja ya hizi ni CSS tu inayoonyeshwa pembeni yake, si zaidi. Chukua yoyote, ibandike kwenye stylesheet yako mwenyewe, na ubadilishe thamani. Zichanganye jinsi unavyopenda.

Rangi ya chapa

Kitufe cha indigo na kidirisha cha indigo kinacholingana, kilichowekwa kwa vigeu vichache vya CSS. Badilisha thamani yoyote ili kukirangize upya.

Buy the eBook

Bofya kufungua kidirisha

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;
}

Terminal

Mandhari nyeusi, maandishi ya kijani ya monospace, pembe za mraba. Kidirisha hufuata muonekano uleule. Kila thamani hapa ni yako kuibadilisha.

> buy_license

Bofya kufungua kidirisha

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;
}

Laini

Kitufe cha waridi cha joto na kidirisha cha waridi laini kuendana. Zungusha pembe zaidi au kidogo kwa kuhariri nambari moja.

Add to cart

Bofya kufungua kidirisha

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;
}

Gradient

Uso wa kitufe wa gradient, na kidirisha kilichotiwa rangi kuendana nacho. Paka uso wa kitufe jinsi unavyopenda.

Reserve a spot

Bofya kufungua kidirisha

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;
}

Cha chini kabisa

Mstari mwembamba, maandishi tulivu, na kidirisha kisafi cheupe. Kipunguze hadi kiwe rahisi kadiri unavyotaka.

Purchase

Bofya kufungua kidirisha

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;
}

Kuongeza Chombo cha Bahashishi

Mifano hapo juu hukaa kwenye mandhari tupu. Hapa ipo kwenye ukurasa badala yake, imewekwa ndani ya kadi, na kiasi-kinachohaririwa kimewashwa ili mnunuzi achague kutoa kiasi gani. Ibofye na ujaribu.

Unafurahia kazi hii?

Acha bahashishi. Inaweka taa zikiwaka na machapisho yakija.

Leave a tip

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;
}

Kuwaruhusu wanunuzi kuweka kiasi

Ongeza editable-amount="true" na kidirisha huonyesha sehemu ya kiasi mnunuzi anayoijaza, kwa bahashishi, michango, au lipa-unachotaka. Iache imezimwa, ambayo ni chaguo-msingi, na amount uliyoiweka ni thabiti na hakuna sehemu inayoonekana. Vyovyote vile vitufe vya malipo hubaki vimezimwa hadi kiasi kiwe nambari chanya, ili mnunuzi asiweze kumaliza ununuzi kwa bure.

Marejeo ya mandhari

Kila uso unaoweza kuupamba. Weka vigeu kwenye kitufe; fika sehemu zingine kwa ::part().

Sifa maalum za CSS

Ziweke kwenye kipengele cha coin-moebius-buy (au babu yake yeyote, kwa kuwa sifa maalum hurithi):

Sifa	Chaguo-msingi	Inadhibiti nini
`--cm-font`	`system-ui, -apple-system, BlinkMacSystemFont, sans-serif`	Familia ya fonti kwa lebo ya kitufe na kila kipengele cha maandishi ndani ya kidirisha cha kichaguzi.
`--cm-color`	`#ededed` (`#1f1f1f` na theme="light")	Rangi ya maandishi kwa kidirisha na maelekezo yake.
`--cm-button-bg`	`#2b2b2b` (`#f5f5f5` na theme="light")	Rangi ya mandhari ya kitufe. Hulingana na uso wa kidirisha kwa chaguo-msingi.
`--cm-button-color`	`#ededed` (`#1f1f1f` na theme="light")	Rangi ya maandishi ya kitufe.
`--cm-button-radius`	`6px`	Radii ya pembe ya kitufe. Tumia `999px` kwa kidonge, `0` kwa mraba.
`--cm-modal-bg`	`#2b2b2b` (`#f5f5f5` na theme="light")	Mandhari ya kidirisha cha kichaguzi.
`--cm-modal-overlay`	`rgba(0, 0, 0, 0.45)`	Tint ya nyuma nyuma ya kidirisha cha kichaguzi.

Vichaguzi vya ::part()

Kwa chochote zaidi ya vigeu hapo juu, lenga sehemu zilizopewa majina za komponenti kutoka CSS yako ya ukurasa. Kitufe hufichua nane:

Sehemu	Kipengele
`button`	Kitufe cha kununua chenyewe.
`modal`	Kontena ya kufunika ya skrini-nzima nyuma ya kichaguzi.
`dialog`	Sanduku la kidirisha cha kichaguzi kilicho katikati.
`provider`	Kila chaguo la mtoa-huduma-wa-malipo ndani ya kichaguzi.
`provider-icon`	Ikoni ndogo karibu na jina la mtoa huduma.
`provider-name`	Maandishi ya jina la mtoa huduma.
`close`	Kitufe cha "Ghairi" chini ya kichaguzi.
`instructions`	Paneli ya maelekezo inayoonyeshwa kwa lipa-kwa-barua (anwani ya posta + nambari ya rejea).

Nyepesi na nyeusi

Kidirisha ni cheusi kwa chaguo-msingi. Kwa kidirisha chepesi, ongeza theme="light" kwenye kipengele. Hiyo ndio swichi nzima, na haifuati mpangilio wa kifaa cha mgeni, kwa hiyo unalochagua ndilo kila mnunuzi anaona. Unataka kitu maalum? Weka kigeu chochote hapo juu juu ya mandhari yoyote na thamani zako hushinda.

Kisichoweza kupambwa bado

Vitu vichache vimewekwa kwa makusudi katika v1: mabadiliko ya hover ya 120ms, z-index ya kidirisha, na nafasi/padding nyingi ndani ya kichaguzi. Kama hitaji la chapa litaangukia mojawapo ya hizi, suluhisho ni kichaguzi kilekile cha ::part() chenye kupita kwa !important; marekebisho safi ni kutuomba tuongeze kigeu cha CSS kwa ajili yake. Kifuatiliaji cha matatizo cha SDK ndio mahali sahihi kwa hilo.

Njia za malipo kwa kila bidhaa

Chagua njia gani huonekana kwenye kidirisha, zipe majina mapya, na uweke mpangilio wao kwa kila bidhaa kutoka kwenye dashibodi yako. Usajili unaweza kuruka lipa-kwa-barua huku kipakuliwa kikiibakiza.

← Rudi kwenye nyaraka

Kipambe, kisha kitume

Nakili mfano wowote kwenye stylesheet yako na uanze kupokea malipo. Bure kuanza, hakuna kadi.

Ona bei Soma nyaraka