Kitufe cha kununua

Kitufe cha kununua ni mistari michache ya HTML unayoibandika kwenye ukurasa wowote. Hakuna framework, hakuna hatua ya kusakinisha upande wako. Kitufe huchorwa kwenye uchoraji wa kwanza; kichaguzi cha mtoa huduma na SDK za mtoa-huduma-wa-malipo hupakia kwa mahitaji mara ya kwanza mnunuzi anapobofya. Hufanya kazi kwenye tovuti au framework yoyote inayochora HTML, ikijumuisha vibunzi vya tovuti vya bila-msimbo vinavyokuruhusu kubandika vibandiko vya HTML.

Imethibitishwa kufanya kazi na: Angular, Hugo, Jekyll, HTML safi, Webflow (kibandiko cha Custom Code), Carrd (kipengele cha Embed), Framer (kibandiko cha HTML), Squarespace (Code Block), WordPress (kibanio cha Custom HTML), Ghost, tovuti za Notion (vidude vya kibandiko cha HTML). Kama tovuti yako inakuruhusu kubandika HTML kwenye ukurasa, kitufe cha kununua hufanya kazi pale.

Marejeo ya sifa

Sifa	Inahitajika	Inakubali nini	Maelezo
`endpoint`	Hapana	String ya URL	Karibu daima iache hii. Kitufe hugundua otomatiki msingi wake wa API: `https://api.coinmoebius.com` katika uzalishaji, `http://localhost:8787` kwenye localhost. Iweke tu kama kupita kwa usanidi usio wa kawaida (k.m., proksi iliyopangishwa mwenyewe mbele ya API).
`project-id`	Ndio	String, yenye kiambishi `proj_`	Kutoka ukurasa wa mradi wako kwenye dashibodi. Salama kuonyeshwa hadharani, ni kitambulisho, si kibali.
`product-id`	Ndio (katika hali kali) / Inapendekezwa (katika hali ya papo-hapo)	String, muundo wowote unaouchagua	Kitambulisho chako cha ndani cha bidhaa. Katika hali kali (chaguo-msingi), hivi ndivyo worker hutafuta bei kutoka kwenye katalogi yako. Katika hali ya papo-hapo, bado hupitishwa kwa webhooks zako katika `metadata.productId` ili uweze kuunganisha miamala na hesabu. Ona sehemu ya Hali kali dhidi ya hali ya papo-hapo hapa chini.
`amount`	Katika hali ya papo-hapo tu	Nambari ya desimali kama string	Bei katika vipimo vikuu (k.m., dola, si senti). Lazima iwe chanya. Iache hii katika hali kali. Worker husoma bei ya kawaida kutoka kwenye katalogi yako na hupuuza thamani yoyote kwenye HTML. Inahitajika tu wakati mradi uko katika hali ya papo-hapo na `product-id` haipo kwenye katalogi.
`currency`	Katika hali ya papo-hapo tu	Msimbo wa herufi tatu wa ISO 4217 au jina lako mwenyewe la kipimo	`USD`, `EUR`, n.k. kwa njia za kadi / krypto. Mtoa huduma wa lipa-kwa-barua hukubali string yoyote (k.m., `GBK`) kwa sababu mfanyabiashara ndiye anayemaliza muamala. Kanuni ileile kama `amount`: iache katika hali kali, inahitajika katika hali ya papo-hapo kwa bidhaa zisizo kwenye katalogi.
`label`	Hapana	String	Maandishi ya kitufe. Chaguo-msingi ni `Buy`. Tumia hii kutofautisha vitufe kwenye ukurasa uleule.
`customer-ref`	Hapana	String, muundo wowote unaouchagua	Kitambulisho fiche kwa mnunuzi kwenye mfumo wako mwenyewe, kama nambari ya mtumiaji aliyeingia. Kitufe huipitisha kwa worker kama `metadata.customerRef`, na worker huweka alama muamala nayo. Baadaye unaweza kuuliza "ni mtumiaji gani wangu aliyelipa?" ukitumia nambari yako mwenyewe, bila sisi kushikilia data yoyote halisi ya mteja. Iache kwa malipo yasiyojulikana.
`theme`	Hapana	`dark` au `light`	Huchagua mpangilio wa rangi uliojengwa ndani kwa kitufe na kidirisha pamoja. Chaguo-msingi ni `dark`. Weka `theme="light"` kwa mpangilio mwepesi. Vigeu vyako vya CSS hupita mojawapo. Ona mwongozo wa upambaji.
`editable-amount`	Hapana	`true` au `false`	Inapokuwa `true`, kidirisha huonyesha sehemu ya kiasi mnunuzi anayoijaza (bahashishi, michango, lipa-unachotaka). Chaguo-msingi ni `false`, ambapo `amount` uliyoiweka ni thabiti na hakuna sehemu inayoonekana. Vitufe vya malipo hubaki vimezimwa hadi kiasi kiwe nambari chanya.

Vitufe vingi kwenye ukurasa mmoja

Skripti husajili kitufe mara moja, kisha idadi yoyote ya nakala zinaweza kuchorwa kwenye ukurasa. Kila nakala ni huru. Mfano hapa chini hutumia hali kali (chaguo-msingi): hakuna amount au currency kwenye HTML, kwa sababu worker hutafuta bei kutoka kwa kila bidhaa kwenye katalogi yako.

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

Kama mradi wako uko katika hali ya papo-hapo (vyombo vya michango, vyombo vya bahashishi), kila kitufe pia hujumuisha amount na currency. Ona Hali kali dhidi ya hali ya papo-hapo kwa picha kamili.

Kupamba kitufe

Kitufe cha kununua huchorwa ndani ya Shadow DOM, ambayo inamaanisha hakuna CSS yoyote iliyopo ya ukurasa wako inayofika ndani yake. Hilo ni la makusudi: huweka kitufe kikionekana sawa kwenye kila tovuti, na kuzuia kanuni iliyopotea ya * { box-sizing: ... } kuvunja kidirisha cha kichaguzi. Unakipamba kupitia nyuso mbili kutoka kwa stylesheet yako mwenyewe: sifa maalum za CSS kwa rangi, fonti, na umbo, na vichaguzi vya ::part() kwa kila kitu kingine. Hakuna JavaScript inayohusika.

Kila kigeu na sehemu kimeandikwa kwenye mwongozo wa upambaji, na mifano hai unayoweza kuibofya na kuinakili:

Fungua mwongozo wa upambaji wa mwingiliano →

URL za mafanikio na za kughairi

Unapounganisha Stripe au NOWPayments kwenye kichupo cha Watoa huduma cha dashibodi, unaweka URL mbili:

URL ya mafanikio, ambako mnunuzi huingia baada ya malipo yenye mafanikio. Stripe na NOWPayments huongeza kigezo cha hoja (?session_id=... kwa Stripe, ?NP_id=... kwa NOWPayments) ili ukurasa wako wa mafanikio uweze kutambua ni muamala gani ulikamilika. Tovuti tuli nyingi huonyesha tu ujumbe wa jumla wa "Asante, malipo yako yanachakatwa" na hutegemea dashibodi kwa chanzo cha ukweli.
URL ya kughairi, ambako mnunuzi huingia kama atajiondoa kabla ya kulipa. Mara nyingi ni ileile kama ukurasa wako wa rukwama.

URL zote mbili husanidiwa kwa kila mtoa huduma kwenye dashibodi, kipengele hakihitaji kuzijua.

Kitufe cha kununua