買うボタン
買うボタンは、任意のページに貼る数行の HTML です。フレームワークも、あなた側のインストール手順も要りません。ボタンは最初の描画でレンダリングされ、プロバイダーの選択画面と各支払いプロバイダーの SDK は、購入者が初めてクリックしたときにオンデマンドで読み込まれます。HTML を描画するあらゆるサイトやフレームワークで動き、HTML の埋め込みを貼れるノーコードのサイトビルダーも含みます。
動作確認済み: Angular、Hugo、Jekyll、素の HTML、Webflow(Custom Code の埋め込み)、Carrd(Embed 要素)、Framer(HTML embed)、Squarespace(Code Block)、WordPress(カスタム HTML ブロック)、Ghost、Notion のサイト(HTML embed ウィジェット)。サイトでページに HTML を貼れるなら、買うボタンはそこで動きます。
属性リファレンス
| 属性 | 必須 | 受け付けるもの | 備考 |
|---|---|---|---|
endpoint | いいえ | URL 文字列 | ほぼ常に省略します。ボタンは API のベースを自動検出します。本番では https://api.coinmoebius.com、localhost では http://localhost:8787。特殊な構成(例:API の前に置く自己ホストのプロキシ)のための上書きとしてのみ設定します。 |
project-id | はい | 文字列、接頭辞 proj_ | ダッシュボードのプロジェクトページから。公開しても安全です。認証情報ではなく識別子です。 |
product-id | はい(厳格モード)/ 推奨(アドホックモード) | 文字列、任意の形式 | あなたの内部商品識別子。厳格モード(デフォルト)では、worker がカタログから価格を引く手がかりになります。アドホックモードでも、取引を在庫に対応づけられるよう metadata.productId として webhook に通されます。下の厳格モード vs アドホックモードのセクションを参照してください。 |
amount | アドホックモードのみ | 小数を表す文字列 | 主要単位での価格(例:セントではなくドル)。正の数でなければなりません。厳格モードでは省略します。 worker はカタログから正規の価格を読み、HTML 内のどんな値も無視します。プロジェクトがアドホックモードで、かつ product-id がカタログに無い場合にのみ必須です。 |
currency | アドホックモードのみ | 3文字の ISO 4217 コード、または独自の単位名 | カード/暗号資産の手段には USD、EUR など。郵送支払いのプロバイダーは任意の文字列(例:GBK)を受け付けます。取引を決済するのは加盟店だからです。amount と同じルールで、厳格モードでは省略、カタログに無い商品についてはアドホックモードで必須です。 |
label | いいえ | 文字列 | ボタンのテキスト。デフォルトは Buy。同じページ上のボタンを区別するのに使います。 |
customer-ref | いいえ | 文字列、任意の形式 | ログイン済みのユーザーIDのような、あなた自身のシステムにおける購入者の不透明な識別子。ボタンはそれを metadata.customerRef として worker に転送し、worker は取引にそれを付けます。後で、当社が実際の顧客データを一切持たずに、あなた自身のIDで「私のどのユーザーが払ったか?」と問えます。匿名のチェックアウトでは省略します。 |
theme | いいえ | dark または light | ボタンとポップアップの組み込みの配色を、まとめて選びます。デフォルトは dark。明るい配色には theme="light" を設定します。あなたの CSS 変数はどちらも上書きします。スタイル設定ガイドを参照してください。 |
editable-amount | いいえ | true または false | true のとき、ポップアップに購入者が入力する金額フィールドが表示されます(投げ銭、寄付、「あなたが決める価格」)。デフォルトは false で、設定した amount が固定され、フィールドは表示されません。金額が正の数になるまで支払いボタンは無効のままです。 |
一つのページに複数のボタン
スクリプトはボタンを一度登録し、その後いくつでもインスタンスをページに描画できます。各インスタンスは独立しています。下の例は厳格モード(デフォルト)を使っています。worker が各商品の価格をカタログから引くので、HTML に amount や currency はありません。
<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>プロジェクトがアドホックモード(寄付ウィジェット、投げ銭)の場合、各ボタンには amount と currency も含みます。全体像は厳格モード vs アドホックモードを参照してください。
ボタンのテーマ設定
買うボタンは Shadow DOM の中に描画されます。つまり、ページの既存の CSS はその中に届きません。これはあえてです。どのサイトでもボタンが同じ見た目を保ち、紛れ込んだ * { box-sizing: ... } ルールが選択画面のモーダルを壊すのを防ぎます。あなたは自分のスタイルシートから2つの面を通してスタイル付けします。色、フォント、形には CSS カスタムプロパティ、それ以外のすべてには ::part() セレクター。JavaScript は不要です。
すべての変数とパートは、クリックしてコピーできるライブ例とともに、スタイル設定ガイドに記載されています。
成功とキャンセルの URL
ダッシュボードのプロバイダータブで Stripe または NOWPayments を接続するとき、2つの URL を設定します。
- 成功 URL。支払いの成功後に購入者がたどり着く先。Stripe と NOWPayments はクエリパラメーター(Stripe は
?session_id=...、NOWPayments は?NP_id=...)を付加するので、成功ページはどの取引が完了したか識別できます。ほとんどの静的サイトは、汎用の「ありがとうございます、支払いを処理中です」というメッセージを表示し、真実の源としてダッシュボードに頼ります。 - キャンセル URL。支払う前に購入者が引き返した場合にたどり着く先。多くの場合、カートページと同じです。
どちらの URL もダッシュボードでプロバイダーごとに設定します。要素はそれらを知る必要がありません。