支払い方法の外観をカスタマイズする方法

このドキュメントは、新しい支払いエクスペリエンスにのみ適用されます。

最大限のセキュリティを提供するために、機密性の高い支払い情報を収集するフォームフィールドは、お客様のウェブサイトに直接読み込まれることはありません。代わりに、ページに<iframe>が埋め込まれ、その内容はStripeのサーバーから直接読み込まれます。

これはセキュリティにとっては素晴らしいことですが、フォーム要素に標準のCSSを適用することはできません（CSSはiframeには適用されません）。支払い方法要素の外観をカスタマイズするには、Elements Appearance APIを使用できます。

Elementsの設定を変更するには、次のフィルターを使用できます。

<?php
/**
 * Plugin Name: WP Simple Pay - Custom Elements Appearance
 */
add_filter(
	'simpay_elements_config',
	function( $elements ) {
		// Increase the base font size of the tabs to scale the icons.
		$elements['appearance']['rules']['.Tab']['fontSize'] = '24px';

		// Set the font size of the tab label to "reset" the font size.
		$elements['appearance']['rules']['.TabLabel']['fontSize'] = '15px';

		return $elements;
	}
);

上記の例では、支払い方法アイコンのサイズを大きくしています。

カスタムコードスニペットの適用方法を学ぶ →