# 決済フローで決済フォームのスタイルを設定する

Stripe の PaymentElement のテーマまたはデザインを変更します。

[Appearance API](https://docs.stripe.com/elements/appearance-api.md) を使用して、決済ページ上で Stripe の [PaymentElement](https://docs.stripe.com/payments/payment-element.md) のテーマやデザインを変更できます。

Appearance API で以下のパラメーターを設定できます。

- [テーマ](https://docs.stripe.com/elements/appearance-api.md?platform=web#theme): Stripe が構築した基本 UI。
- [変数](https://docs.stripe.com/elements/appearance-api.md?platform=web#variables): テーマ全体に適用する CSS 定義。
- [ルール](https://docs.stripe.com/elements/appearance-api.md?platform=web#rules): 決済フォームの iframe に含まれる DOM 要素を対象とする条件。

このガイドでは、Stripe モジュールの Appearance API パラメーターを上書きするカスタムモジュールを定義して、パラメーターを変更する方法を解説します。

## 新しいモジュールを作成

次のディレクトリー構造で新しいモジュールを作成します。`Vendor` を任意のベンダー名に置き換えます。

```
app/code/Vendor/StripeCustomizations/
├── etc/
│   ├── module.xml
│   └── di.xml
├── Plugin/
│   └── Payments/
│       └── Helper/
│           └── InitParamsPlugin.php
└── registration.php
```

`registration.php` 内で、モジュールを Magento に登録します。

```php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_StripeCustomizations',
    __DIR__
);
```

`etc/module.xml` 内でモジュールを定義し、依存関係を設定して、Stripe モジュールの後に確実に読み込まれるようにします。

```xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_StripeCustomizations" setup_version="1.0.0">
        <sequence>
            <module name="StripeIntegration_Payments"/>
        </sequence>
    </module>
</config>
```

`etc/di.xml` 内でプラグインを定義します。

```xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="StripeIntegration\Payments\Helper\InitParams">
        <plugin
            name="vendor_stripecustomizations_payments_initparams_plugin"
            type="Vendor\StripeCustomizations\Plugin\Payments\Helper\InitParamsPlugin"
            sortOrder="10"
            disabled="false" />
    </type>
</config>
```

`Plugin/Payments/Helper/InitParamsPlugin.php` 内にプラグインクラスを作成します。

```php
<?php
namespace Vendor\StripeCustomizations\Plugin\Payments\Helper;

use StripeIntegration\Payments\Helper\InitParams;
use Magento\Quote\Model\Quote;
use Psr\Log\LoggerInterface;

class InitParamsPlugin
{
    /**
     * After plugin for getElementOptions method.
     *
     * @param InitParams $subject
     * @param array $result
     * @return array
     */
    public function afterGetElementOptions(InitParams $subject, $result)
    {
        $result['appearance']['variables']['colorPrimary'] = '#FF5733'; // Example: Primary color
        $result['appearance']['variables']['spacingUnit'] = '4px';       // Example: Spacing unit
        $result['appearance']['rules'] = [
            [
                'selector' => 'button',
                'style' => [
                    'backgroundColor' => '#FF5733',
                    'fontSize' => '16px'
                ]
            ],
            [
                'selector' => 'input',
                'style' => [
                    'borderColor' => '#CCCCCC'
                ]
            ]
        ];

        return $result;
    }
}
```

モジュールを有効化します。

```sh
php bin/magento module:enable Vendor_StripeCustomizations
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
```