AI要約
はじめに
フォームの要素のStripeのスタイルをカスタマイズしたいですか？ 問題ありません！ このチュートリアルでは、PHPを使用してStripeクレジットカードフィールドの外観をカスタマイズする簡単な手順を説明します。
このスニペットは、WPForms設定の支払いタブのWPForms設定のクレジットカードフィールドモードが支払い要素に設定されている場合にのみ、Stripeクレジットカードフォームフィールドに適用されることに注意してください。
このオプションの詳細については、こちらの役立つガイドをご覧ください。
デフォルトでは、フィールドにはWPForms内でデフォルトのオプションが設定されています。
フォームの作成
新しいフォームを作成し、フィールドを追加することから始めます。フォームにStripeクレジットカードフィールドを含める必要があります。
Stripe支払い処理を行うフォームの作成にヘルプが必要な場合は、こちらの詳細ガイドをご覧ください。
このチュートリアルの目的で、簡単な注文フォームを作成しました。
スニペットの追加
次にスニペットを追加します。カスタムスニペットをサイトに追加する方法と場所についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。
/**
* Customize Stripe styling when using the Payment Element
*
* @link https://wpforms.com/developers/how-to-customize-the-stripe-styling/
*/
function wpf_stripe_payment_element_appearance() {
return [
'theme' => 'stripe',
'labels' => 'floating',
'variables' => [
'fontFamily' => 'Sohne, system-ui, sans-serif',
'fontWeightNormal' => '500',
'borderRadius' => '8px',
'colorBackground' => '#0A2540',
'colorPrimary' => '#EFC078',
'accessibleColorOnColorPrimary' => '#1A1B25',
'colorText' => 'white',
'colorTextSecondary' => 'white',
'colorTextPlaceholder' => '#727F96',
'tabIconColor' => 'white',
'logoColor' => 'dark'
]
];
}
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', 'wpf_stripe_payment_element_appearance' );
このスニペットでは、Stripeのテーマを選択し、フィールドのラベルをフローティングに設定し、さまざまなCSSオプションも設定しました。
これでフォームを表示すると、フローティングラベルを含む、行った変更がはっきりとわかります。
支払いリクエストボタン（Apple PayおよびGoogle Pay）のカスタマイズ
Stripeクレジットカードフィールドが支払い要素を使用している場合、Stripeのappearanceオブジェクトを上書きすることで、Apple PayおよびGoogle Payボタンの表示方法もカスタマイズできます。
これを行うには、wpforms_integrations_stripe_api_payment_intents_set_element_appearanceフィルターを使用し、.PaymentRequestButtonのエントリにrulesを追加します。これにより、テキストの色を含むボタンのスタイルを制御できます。
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Define a consistent appearance structure for Stripe Elements.
$appearance = [
'rules' => [
'.PaymentRequestButton' => [
'background-color' => '#FFF',
'color' => '#FFFFFF',
'border-radius' => '4px',
'height' => '64px',
'font-family' => 'Arial, sans-serif',
'font-size' => '16px',
],
],
'variables' => [
'colorPrimary' => '#FF0000',
'fontFamily' => 'Arial, sans-serif',
],
];
return $appearance;
});
これでStripeのスタイルをカスタマイズするために必要なすべてが揃いました。他のフォームフィールドにフローティングラベルを追加したいですか？ フローティングラベル付きフォームの作成方法のチュートリアルをご覧ください。