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 von Stripe auf Ihrer Bezahlseite mithilfe der Appearance API ändern.

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

Design: Eine von Stripe entwickelte elementare Nutzeroberfläche.
Variablen: CSS-Definitionen, die im gesamten Design angewendet werden sollen.
Regeln: 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
\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 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 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
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:

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