```markdown
## Styling the Payment Element

This section provides guidance on customizing the appearance of the Stripe Payment Element on your checkout page.

### Overview

You can alter the theme and overall look of the Stripe Payment Element using the [Appearance API](https://stripe.com/docs/stripe-js/appearance-api). This API allows you to control various aspects of the Payment Element's visual presentation.

### Key Configuration Parameters

The Appearance API supports the following parameter types:

*   **Theme:** A foundational UI structure provided by Stripe.
*   **Variables:** CSS definitions that can be applied across the chosen theme.
*   **Rules:** Specific conditions that target individual DOM elements within the Payment Element's iframe.

### Customizing the Payment Element

This guide details how to modify the Appearance API parameters within the Stripe module for Adobe Commerce. This is achieved by creating a custom module that overrides the default settings.

#### Creating a Custom Module

To implement these customizations, you will need to create a new Magento module. The recommended directory structure for this module is as follows:

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

**1. Registering your Module:**

In the `registration.php` file, register your custom module with Magento:

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

**2. Defining Module Dependencies (in `etc/module.xml`):**

Ensure your module loads after the Stripe module by defining the dependency in `etc/module.xml`:

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

**3. Implementing Customizations (in `Plugin/Payments/Helper/InitParamsPlugin.php`):**

This is where you will implement the logic to override the Stripe module's initialization parameters, including those related to the Appearance API. The exact code will depend on the specific styling changes you wish to make.

---

**Related Cookbooks:**

*   [Add additional metadata to payments](/use-stripe-apps/adobe-commerce/cookbooks/add-additional-metadata)
*   [Add custom events to Stripe webhooks](/use-stripe-apps/adobe-commerce/cookbooks/add-custom-events)
*   [Add external payment methods to the payment form](/use-stripe-apps/adobe-commerce/cookbooks/external-payment-methods)
*   [Disable shipping methods in the Express Checkout modals](/use-stripe-apps/adobe-commerce/cookbooks/disable-express-checkout-payment-methods)
*   [Enable manual capture](/use-stripe-apps/adobe-commerce/cookbooks/enable-manual-capture)
*   [Hide the terms displayed in the PaymentElement form](/use-stripe-apps/adobe-commerce/cookbooks/hide-terms)
*   [Integrate a custom fee to the tax calculation](/use-stripe-apps/adobe-commerce/cookbooks/tax-additional-fees)
*   [Test why a specific payment method doesn't appear](/use-stripe-apps/adobe-commerce/cookbooks/test-specific-method)
```