### [Stripeのスタイルをカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**公開日:** 2023年11月17日
**著者:** Umair Majeed
**抜粋:** このチュートリアルでは、StripeフィールドでPayment Elementを使用する際のStripe Paymentのスタイルをカスタマイズする方法を説明します。
**コンテンツ:**
## はじめに
フォームの要素のStripeスタイルをカスタマイズしたいですか？ 問題ありません！ このチュートリアルでは、PHPを使用して**Stripeクレジットカード**フィールドの外観をカスタマイズする簡単な手順を説明します。
このスニペットは、WPForms設定の**支払い**タブの**クレジットカードフィールドモード**が**Payment Element**に設定されている場合にのみ、**Stripeクレジットカード**フォームフィールドに適用されることに注意してください。
このオプションの詳細については、[こちらの役立つガイド](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes)をご覧ください。
デフォルトでは、フィールドにはWPForms内のデフォルトオプションがすでに設定されています。
## フォームの作成
新しいフォームを作成し、フィールドを追加することから始めます。フォームに**Stripeクレジットカード**フィールドを含める必要があります。
Stripe支払い処理を行うフォームの作成にヘルプが必要な場合は、[こちらの詳細ガイド](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon")をご覧ください。
このチュートリアルの目的で、簡単な注文フォームを作成しました。
## スニペットの追加
次にスニペットを追加します。カスタムスニペットをサイトに追加する方法と場所についてヘルプが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPForms用のカスタムPHPまたはJavaScriptの追加方法")をご覧ください。
Stripeには、要素のスタイルを設定するためのオプションがいくつかあります。変更可能な項目の包括的なリストについては、[Elements Appearance API](https://stripe.com/docs/elements/appearance-api)に関するStripe独自のドキュメントを参照してください。一部の要素はこのAPIでサポートされていない可能性があるため、フォームと変更をテストしてください。
```
/**
* Payment Elementを使用する際のStripeスタイルをカスタマイズする
*
* @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クレジットカードフィールドが**Payment Element**を使用している場合、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 ) {
// 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のドキュメントで[Elements Appearance API](https://docs.stripe.com/elements/appearance-api)および[Payment Request Button](https://docs.stripe.com/stripe-js/elements/payment-request-button)を参照してください。
これで、Stripeのスタイルをカスタマイズするために必要なすべてが揃いました。他のフォームフィールドにフローティングラベルを追加したいですか？ [フローティングラベル付きフォームの作成方法](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "フローティングラベル付きフォームの作成方法")のチュートリアルをご覧ください。
**カテゴリー:** チュートリアル
**タグ:** Stripe
---