Coin Moebius
Codex · IX

買うボタンをあなたのものに

買うボタンと、それが開く支払いポップアップは、どちらもあなたの色、フォント、形を取り込みます。CSS 変数をいくつか設定すれば、両方がそろって追従します。以下はすべて、クリックできる実動の例で、それを生んだ正確なコードがすぐ横にあります。

これらはどれもプリセットのテーマではありません。どの見た目も、横に示した素のCSSから作られています。どれでも出発点としてコピーし、好きなように変えてください。

これらは代理のプロバイダーと架空の参照コードを使ったライブのボタンです。支払いは取られません。ボタンをクリックしてポップアップを開き、それをスタイル付けしたコードを読んでください。

デフォルト

CSS なし、属性なし。ボタンとそのポップアップは、最初から一つのニュートラルなチャコールを共有します。これは theme="dark" で、デフォルトなので、書き出しても何も変わりません。

Buy now クリックしてポップアップを開く
<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

ライトテーマ

theme="light" を加えると、ボタンとポップアップの両方が柔らかなオフホワイトになります。属性一つ、CSS なし。

Get access クリックしてポップアップを開く
<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

例であって、プリセットではない

これらはどれも、横に示したCSSそのもので、それ以上ではありません。どれでも取って、自分のスタイルシートに貼り、値を変えてください。好きなように混ぜてかまいません。

ブランドカラー

インディゴのボタンと、それに合わせたインディゴのポップアップを、ひと握りのCSS変数で設定。どの値を変えても色を変えられます。

Buy the eBook クリックしてポップアップを開く
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;
}

ターミナル

黒い背景、緑の等幅テキスト、角は直角。ポップアップも同じ見た目に追従します。ここのどの値もあなたが入れ替えられます。

> buy_license クリックしてポップアップを開く
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;
}

ソフト

温かいピンクのボタンと、それに合う柔らかなピンクのポップアップ。数字を一つ編集すれば、角を丸くも控えめにもできます。

Add to cart クリックしてポップアップを開く
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;
}

グラデーション

グラデーションのボタン面に、それに合わせて色づけしたポップアップ。ボタン面は好きなように塗ってください。

Reserve a spot クリックしてポップアップを開く
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;
}

ミニマル

細い輪郭、抑えたテキスト、清潔な白いポップアップ。好きなだけ素朴になるまで削ぎ落としてください。

Purchase クリックしてポップアップを開く
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;
}

投げ銭を加える

上の例は空白の背景に置かれています。ここでは代わりにページ上で、カードの中に収め、編集可能な金額をオンにして、購入者が金額を選べるようにしています。クリックして試してください。

作品を楽しんでいただけましたか?

投げ銭をどうぞ。灯りをともし続け、投稿を続けるための力になります。

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

購入者に金額を決めてもらう

editable-amount="true" を加えると、ポップアップに購入者が入力する金額フィールドが表示されます。投げ銭、寄付、「あなたが決める価格」向けです。これを外したまま(デフォルト)にすると、あなたが設定した amount が固定され、フィールドは表示されません。どちらの場合も、金額が正の数になるまで支払いボタンは無効のままなので、購入者がゼロでチェックアウトすることはできません。

テーマ設定リファレンス

スタイル付けできるすべての面。変数はボタンに設定し、残りは ::part() で届かせます。

CSS カスタムプロパティ

これらを coin-moebius-buy 要素(またはその任意の祖先。カスタムプロパティは継承されます)に設定します。

プロパティデフォルト制御するもの
--cm-fontsystem-ui, -apple-system, BlinkMacSystemFont, sans-serifボタンのラベルと、選択画面モーダル内のすべてのテキスト要素のフォントファミリー。
--cm-color#ededed(theme="light" では #1f1f1f)ポップアップとその案内のテキスト色。
--cm-button-bg#2b2b2b(theme="light" では #f5f5f5)ボタンの背景色。デフォルトではポップアップの面と一致します。
--cm-button-color#ededed(theme="light" では #1f1f1f)ボタンのテキスト色。
--cm-button-radius6pxボタンの角の丸み。ピル型には 999px、直角には 0 を使います。
--cm-modal-bg#2b2b2b(theme="light" では #f5f5f5)選択画面ポップアップの背景。
--cm-modal-overlayrgba(0, 0, 0, 0.45)選択画面モーダルの背後の幕の色合い。

::part() セレクター

上の変数を超えるものについては、ページの CSS からコンポーネントの名前付きパートを対象にします。ボタンは8つを公開しています。

パート要素
button買うボタンそのもの。
modal選択画面の背後にある、ビューポート全面のオーバーレイのコンテナ。
dialog中央に配置された選択画面のモーダルボックス。
provider選択画面内の各支払いプロバイダーの選択肢。
provider-iconプロバイダー名の隣の小さなアイコン。
provider-nameプロバイダー名のテキスト。
close選択画面下部の「キャンセル」ボタン。
instructions郵送支払い向けに表示される案内パネル(送付先住所＋参照コード)。

ライトとダーク

ポップアップはデフォルトでダークです。明るいポップアップには、要素に theme="light" を加えます。それがスイッチのすべてで、訪問者の端末設定には従わないので、あなたが選んだものがすべての購入者に見えます。特定の見た目が欲しいですか?どちらのテーマの上にでも上の変数を設定すれば、あなたの値が勝ちます。

まだテーマ設定できないもの

いくつかのものは v1 ではあえてハードコードされています。120ms のホバー遷移、モーダルの z-index、選択画面内のほとんどの余白/パディング。ブランドの要請がこれらの一つに当たった場合、回避策は同じ ::part() セレクターに !important の上書きを付けることです。よりきれいな解決は、そのための CSS 変数を追加するよう当社に依頼することです。SDK のイシュートラッカーがその適切な場所です。

商品ごとの支払い方法

ポップアップにどの方法を表示するか、名前を変えるか、並び順をどうするかを、商品ごとにダッシュボードから選べます。サブスクリプションは郵送支払いを省き、ダウンロードは残す、といったことができます。

← ドキュメントに戻る

スタイルを付けて、公開する

どれでも例をスタイルシートにコピーして、支払いを受け始めましょう。始めるのは無料、カード不要。

料金を見るドキュメントを読む