支払い方法タグ

ショップで利用可能な支払い方法を表示するためのタグです。
ショップの決済設定に応じて、利用可能な決済方法のみが自動で出力されます。
ロゴ表示とテキスト表示の2種類のタグがあります。

基本構文

ロゴ表示タイプ

{PaymentMethodsLogoTag}

テキスト表示タイプ

{PaymentMethodsTextTag}

出力されるHTML（例）

ロゴ表示タイプ

<ul class="paymentMethodsLogoTag">
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--bnpl">
        <p>PAY ID</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/atobarai_payid_monthly_logo.png" alt="PAY ID 翌月あと払い">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/atobarai_payid_installmentpayment_logo.png" alt="PAY ID 3回あと払い">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/atobarai_payid_creditcard_logo.png" alt="PAY ID クレジットカード決済">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--creditcard">
        <p>クレジットカード</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/visa.png" alt="VISA">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/mastercard.png" alt="Mastercard">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/jcb.png" alt="JCB">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/american_express.png" alt="AMERICAN EXPRESS">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/diners_club.png" alt="Diners Club">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--paypay">
        <p>PayPay</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/paypay.png" alt="PayPay">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--amazon_pay">
        <p>Amazon Pay</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/amazonpay.png" alt="Amazon Pay">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--carrier">
        <p>キャリア決済</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/docomo.png" alt="ｄ払い">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/au.png" alt="au PAY（auかんたん決済）">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/softbank.png" alt="ソフトバンクまとめて支払い・ワイモバイルまとめて支払い">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--base_bt">
        <p>銀行振込</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/smbc.png" alt="SMBC 三井住友銀行">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--cvs">
        <p>コンビニ決済またはPay-easy</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/cvs.png" alt="コンビニ決済対応一覧">
        </div>
    </li>
    <li class="paymentMethodsLogoTag__method paymentMethodsLogoTag__method--paypal">
        <p>PayPal</p>
        <div class="paymentMethodsLogoTag__imgWrapper">
            <img class="paymentMethodsLogoTag__img" src="https://static.thebase.in/img/payment/design-market/paypal.png" alt="PayPal">
        </div>
    </li>
</ul>

テキスト表示タイプ

<ul class="paymentMethodsTextTag">
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--bnpl">
        <p>PAY ID</p>
        <ul class="paymentMethodsTextTag__nesting">
            <li class="paymentMethodsTextTag__brand">PAY ID 翌月あと払い</li>
            <li class="paymentMethodsTextTag__brand">PAY ID 3回あと払い</li>
            <li class="paymentMethodsTextTag__brand">PAY ID クレジットカード決済</li>
        </ul>
    </li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--creditcard">
        <p>クレジットカード</p>
        <ul class="paymentMethodsTextTag__nesting">
            <li class="paymentMethodsTextTag__brand">VISA</li>
            <li class="paymentMethodsTextTag__brand">Mastercard</li>
            <li class="paymentMethodsTextTag__brand">JCB</li>
            <li class="paymentMethodsTextTag__brand">AMERICAN EXPRESS</li>
            <li class="paymentMethodsTextTag__brand">Diners Club</li>
        </ul>
    </li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--paypay"><p>PayPay</p></li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--amazon_pay"><p>Amazon Pay</p></li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--carrier">
        <p>キャリア決済</p>
        <ul class="paymentMethodsTextTag__nesting">
            <li class="paymentMethodsTextTag__brand">ｄ払い</li>
            <li class="paymentMethodsTextTag__brand">au PAY（auかんたん決済）</li>
            <li class="paymentMethodsTextTag__brand">ソフトバンクまとめて支払い・ワイモバイルまとめて支払い</li>
        </ul>
    </li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--base_bt"><p>銀行振込</p></li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--cvs">
        <p>コンビニ決済またはPay-easy</p>
        <ul class="paymentMethodsTextTag__nesting">
            <li class="paymentMethodsTextTag__brand">ローソン</li>
            <li class="paymentMethodsTextTag__brand">ファミリーマート</li>
            <li class="paymentMethodsTextTag__brand">ミニストップ</li>
            <li class="paymentMethodsTextTag__brand">セイコーマート</li>
            <li class="paymentMethodsTextTag__brand">Pay-easy</li>
        </ul>
    </li>
    <li class="paymentMethodsTextTag__method paymentMethodsTextTag__method--paypal"><p>PayPal</p></li>
</ul>

表示仕様

タイトルや説明文は出力されません。
ショップの決済設定に応じて利用可能な決済のみ表示されます。
決済方法の数・並び順は固定ではありません。
クレジットカードやキャリア決済など、複数ブランドを持つ決済は複数要素が出力されます。

デザインガイドライン（テーマ作者向け）

基本ルール

レイアウト（横並び／縦並び／カード型など）は自由です。
決済方法は動的に増減するため、可変に耐える設計にしてください。
ラベル（<p> タグ）は表示・非表示どちらも可能です。
- 非表示にする場合はロゴ表示を推奨します。

ロゴ表示時

ロゴ画像の余白を含めたデフォルトの高さは CSS で 20px に設定されています。
min-height: 14px 以上を推奨します。
複数ロゴが並ぶ場合は折り返しに対応してください。
ロゴのサイズや表示状況に応じて、各ロゴが独立した要素として視認できる十分なスペーシングを確保してください。

テキスト表示時

ブランド名はリスト形式で出力されます。
テキストが折り返されても崩れない設計にしてください。

NG事項

ロゴ画像の縦横比（アスペクト比）を変更しないでください。
- 伸縮などによりロゴが歪む表示は禁止です。
出力されるHTML構造およびclass名に依存した独自DOM操作は行わないでください。
- DOM構造は将来的に変更される可能性があります。
決済方法の表示数や並び順を固定前提としたデザインは禁止です。
- 表示される決済方法はショップの設定や仕様変更により変動します。
同一決済種内で特定ブランドのロゴのみを非表示にしないでください。
ロゴの利用については、一般的なブランドガイドラインに従ってください。
以下のような利用は禁止されています。
- ロゴの変形・回転
- 色の変更（フィルターによるモノクロ化・反転などを含む）
- 他のオブジェクトを重ねる
- 縁取り・シャドウなどの装飾を追加する
- トリミングやロゴが欠ける表示
- 背景色や背景パターンによりロゴの視認性を損なう実装

class一覧

PaymentMethodsLogoTag

class名	説明
paymentMethodsLogoTag	支払い方法全体のラッパー（`<ul>`）
paymentMethodsLogoTag__method	各決済方法（`<li>`）
paymentMethodsLogoTag__method--{type}	決済種別ごとの修飾子（例: `--creditcard`, `--bnpl`）
paymentMethodsLogoTag__imgWrapper	ロゴ画像のラッパー（`<div>`）
paymentMethodsLogoTag__img	ロゴ画像（`<img>`）

PaymentMethodsTextTag

class名	説明
paymentMethodsTextTag	支払い方法全体のラッパー（`<ul>`）
paymentMethodsTextTag__method	各決済方法（親 `<li>`）
paymentMethodsTextTag__method--{type}	決済種別ごとの修飾子（例: `--creditcard`, `--bnpl`）
paymentMethodsTextTag__nesting	ブランドテキスト一覧（`<ul>`）
paymentMethodsTextTag__brand	各ブランド（子 `<li>`）

決済種別の修飾子一覧

修飾子	決済種別
--bnpl	PAY ID
--creditcard	クレジットカード
--paypay	PayPay
--amazon_pay	Amazon Pay
--carrier	キャリア決済
--base_bt	銀行振込
--cvs	コンビニ決済・Pay-easy
--paypal	PayPal
--cod	代金引換

実装上の注意

利用可能な決済はショップごとに異なります。
販売商品によって、利用可能な決済方法が異なる場合があります。商品詳細ページに掲載する場合、表示される決済方法が、ショップ全体で利用可能な決済方法と一致しないことがあります。
将来的に決済種が追加される可能性があります。
決済種独自のCSSを当てる場合は今後決済種が追加となった際にご対応をお願いします。

テストパターン

テーマ申請の際に下記のテストパターンを確認してください。

デモショップをお持ちの場合は、決済方法を変更した場合に適切に反映されているか
PC、タブレット、スマートフォンそれぞれで適切に表示されているか
背景が明るい色、暗い色、濃色、画像パターンそれぞれの場合でも各ロゴを毀損せず、適切に表示できているか

基本構文​

ロゴ表示タイプ​

テキスト表示タイプ​

出力されるHTML（例）​

ロゴ表示タイプ​

テキスト表示タイプ​

表示仕様​

デザインガイドライン（テーマ作者向け）​

基本ルール​

ロゴ表示時​

テキスト表示時​

NG事項​

class一覧​

PaymentMethodsLogoTag​

PaymentMethodsTextTag​

決済種別の修飾子一覧​

実装上の注意​

テストパターン​

基本構文

ロゴ表示タイプ

テキスト表示タイプ

出力されるHTML（例）

ロゴ表示タイプ

テキスト表示タイプ

表示仕様

デザインガイドライン（テーマ作者向け）

基本ルール

ロゴ表示時

テキスト表示時

NG事項

class一覧

PaymentMethodsLogoTag

PaymentMethodsTextTag

決済種別の修飾子一覧

実装上の注意

テストパターン