支払い方法の表示タイプを選択する方法

概要

WP Simple Payでは、オンサイト支払いフォームでの支払い方法の表示方法を選択できます。水平方向のタブ（デフォルト）または積み重ねられたアコーディオンとして表示できます。この設定は、フロントエンドのStripe Payment Elementのレイアウトを制御します。

前提条件

• WP Simple Pay Pro
• オンサイトフォームタイプ（埋め込みまたはオーバーレイ）を使用する支払いフォーム
• フォームで有効になっている支払い方法が少なくとも1つ必要です

表示タイプの構成

1. WP Simple Pay > 支払いフォームに移動し、フォームを編集します。
2. フォームフィールドタブをクリックします。
3. 支払い方法フィールド（古いフォームでは「カード」と表示）を展開します。
4. 表示タイプの下で、タブまたはアコーディオンのいずれかを選択します。
5. 保存するには、公開または更新をクリックします。

タブレイアウト

タブはデフォルトの表示タイプです。支払い方法は、支払いエリアの上部に水平タブとして表示されます。顧客はタブをクリックして方法を切り替えます。

最適:

• 支払い方法が少ないフォーム（2〜5件）
• 水平スペースが利用可能な、クリーンでコンパクトなレイアウト

アコーディオンレイアウト

アコーディオンレイアウトは、支払い方法を垂直に積み重ねられた折りたたみ可能なアイテムとして表示します。顧客はアイテムをクリックして展開し、フィールドを表示します。

最適:

• 支払い方法が多いフォーム（5件以上）
• 垂直スタッキングがより効果的なモバイルフレンドリーなレイアウト
• 支払い方法の名前とアイコンが明確に表示される状況

アコーディオン設定

アコーディオンを選択すると、アコーディオン設定という追加セクションが表示されます。

• 表示項目数 — 「その他」ボタンが表示される前に表示される支払い方法の数。デフォルト: 5。「その他」ボタンなしで全項目を表示するには0に設定します。

フォームに多くの支払い方法があり、すべてのオプションを提供しながら最初の表示をコンパクトに保ちたい場合に便利です。

デフォルトで折りたたむ

デフォルトでは、フォームの読み込み時に最初のアコーディオン項目が展開されます。simpay_payment_form_accordion_default_collapsedフィルターを使用して、すべての項目がデフォルトで折りたたまれた状態から始まるように、この動作を変更できます。

add_filter( 'simpay_payment_form_accordion_default_collapsed', '__return_true' );

これは、2番目の引数として渡されるフォームオブジェクトを確認することで、特定のフォームに限定することもできます。

適切なレイアウトの選択

考慮事項	タブ	アコーディオン
項目数	2-5	5+
水平スペース	十分	限られている
モバイルでの体験	良い	より良い
支払い方法の表示	アイコンが一目でわかる	名前とアイコンが表示される
垂直スペース	コンパクト	より縦長

よくある質問

表示タイプによって利用可能な支払い方法が変わりますか？

いいえ。表示タイプは、支払い方法の視覚的な配置方法を変更するだけです。有効な支払い方法はすべて、レイアウトの選択に関係なく利用可能です。

これはStripe Checkout（オフサイト）フォームでも機能しますか？

いいえ。表示タイプの設定は、Stripe Payment Elementを使用するオンサイトフォームにのみ適用されます。オフサイトフォームはStripeのホスト型チェックアウトページにリダイレクトされ、独自のレイアウトがあります。

フォームごとに異なる表示タイプを使用できますか？

はい。表示タイプは支払い方法フィールドでフォームごとに設定されるため、各フォームで独自のレイアウトを設定できます。

モバイルデバイスではどうなりますか？

どちらのレイアウトもレスポンシブです。Stripeの決済要素は、小さい画面に合わせて自動的に調整されます。アコーディオンレイアウトは、縦に積み重ねられるため、特にモバイルでうまく機能する傾向があります。

次にやること

• フォームスタイルで決済フォームをスタイリングする – 色、タイポグラフィ、レイアウトをカスタマイズする
• フォームスタイル設定リファレンス – すべてのスタイル設定の完全なリファレンス