# Zahlungsformular beim Bezahlvorgang gestalten

Ändern Sie das Design oder das Erscheinungsbild des PaymentElement von Stripe.

Sie können das Design oder das Erscheinungsbild des [PaymentElement](https://docs.stripe.com/payments/payment-element.md) von Stripe auf Ihrer Bezahlseite mithilfe der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) ändern.

Sie können den folgenden Parameter in der Appearance API festlegen:

- [Design](https://docs.stripe.com/elements/appearance-api.md?platform=web#theme): Eine von Stripe entwickelte elementare Nutzeroberfläche.
- [Variablen](https://docs.stripe.com/elements/appearance-api.md?platform=web#variables): CSS-Definitionen, die im gesamten Design angewendet werden sollen.
- [Regeln](https://docs.stripe.com/elements/appearance-api.md?platform=web#rules): Bedingungen, die auf einzelne DOM-Elemente innerhalb des iframe des Zahlungsformulars abzielen.

In diesem Leitfaden erfahren Sie, wie Sie die Appearance API-Parameter des Stripe-Moduls ändern, indem Sie ein nutzerdefiniertes Modul definieren, das diese überschreibt.

## Ein neues Modul erstellen

Erstellen Sie ein neues Modul mit der folgenden Verzeichnisstruktur. Ersetzen Sie `Vendor` durch Ihren bevorzugten Anbieternamen.

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

Registrieren Sie in `registration.php` Ihr Modul bei Magento.

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

Definieren Sie in `etc/module.xml` das Modul und richten Sie Abhängigkeiten ein, um sicherzustellen, dass es nach dem Stripe-Modul geladen wird.

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

Definieren Sie in `etc/di.xml` das folgende Plugin:

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

Erstellen Sie in `Plugin/Payments/Helper/InitParamsPlugin.php` die folgende Plugin-Klasse:

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

Aktivieren Sie das Modul:

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