# Style du formulaire de paiement

Modifiez le thème ou l'apparence du composant Payment Element de Stripe.

Vous pouvez modifier le thème ou l’apparence du composant [PaymentElement](https://docs.stripe.com/payments/payment-element.md) de Stripe sur votre page de paiement à l’aide de l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md).

Vous pouvez définir le paramètre suivant dans l’API Apparence :

- [Thème](https://docs.stripe.com/elements/appearance-api.md?platform=web#theme) : une interface utilisateur fondamentale créée par Stripe.
- [Variables](https://docs.stripe.com/elements/appearance-api.md?platform=web#variables) : définitions CSS à appliquer à l’ensemble du thème.
- [Règles](https://docs.stripe.com/elements/appearance-api.md?platform=web#rules) : conditions qui ciblent des éléments DOM individuels à l’intérieur de l’iframe du formulaire de paiement.

Ce guide vous explique comment modifier les paramètres de l’API Apparence du module Stripe en définissant un module personnalisé qui les remplace.

## Créer un module

Créez un nouveau module avec la structure de répertoire suivante. Remplacez `Vendor` par le nom de votre fournisseur préféré.

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

Dans `registration.php`, enregistrez votre module auprès de Magento.

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

Dans le fichier `etc/module.xml`, définissez le module et configurez les dépendances pour vous assurer qu’il se charge après le module 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>
```

Dans le fichier `etc/di.xml`, définissez le plugin&nbsp;:

```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>
```

Dans `Plugin/Payments/Helper/InitParamsPlugin.php`, créez la classe du plugin&nbsp;:

```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;
    }
}
```

Activez le module&nbsp;:

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