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

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

Appearance API を使用して、決済ページ上で Stripe の PaymentElement のテーマやデザインを変更できます。

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

テーマ: Stripe が構築した基本 UI。
変数: テーマ全体に適用する CSS 定義。
ルール: 決済フォームの 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
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_StripeCustomizations',
    __DIR__
);

etc/module.xml 内でモジュールを定義し、依存関係を設定して、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>

etc/di.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
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;
    }
}

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

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