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 de Stripe sur votre page de paiement à l’aide de l’API Appearance.

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

Thème : une interface utilisateur fondamentale créée par Stripe.
Variables : définitions CSS à appliquer à l’ensemble du thème.
Règles : 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
\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 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 :

<?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 :

<?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 :

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