diff --git a/src/Components/CardRepository/CardRepository.php b/src/Components/CardRepository/CardRepository.php
index 53a0fd38d..0b15eb0b5 100644
--- a/src/Components/CardRepository/CardRepository.php
+++ b/src/Components/CardRepository/CardRepository.php
@@ -22,6 +22,7 @@ public function __construct(private readonly EntityRepository $cardRepository)
 
     public function saveCard(
         CustomerEntity $customer,
+        string $cardHolder,
         string $truncatedCardPan,
         string $pseudoCardPan,
         string $cardType,
@@ -39,6 +40,7 @@ public function saveCard(
 
         $data = [
             'id' => $card === null ? Uuid::randomHex() : $card->getId(),
+            'cardHolder' => $cardHolder,
             'pseudoCardPan' => $pseudoCardPan,
             'truncatedCardPan' => $truncatedCardPan,
             'cardType' => $cardType,
@@ -96,15 +98,15 @@ public function removeAllCardsForCustomer(CustomerEntity $customer, Context $con
     }
 
     public function getExistingCard(
-        CustomerEntity $customer,
+        CustomerEntity|string $customer,
         string $pseudoCardPan,
         Context $context
     ): ?PayonePaymentCardEntity {
         $criteria = new Criteria();
 
         $criteria->addFilter(
-            new EqualsFilter('payone_payment_card.pseudoCardPan', $pseudoCardPan),
-            new EqualsFilter('payone_payment_card.customerId', $customer->getId())
+            new EqualsFilter('pseudoCardPan', $pseudoCardPan),
+            new EqualsFilter('customerId', \is_string($customer) ? $customer : $customer->getId())
         );
 
         /** @var PayonePaymentCardEntity|null $card */
@@ -112,4 +114,19 @@ public function getExistingCard(
 
         return $card;
     }
+
+    /**
+     * TODO-card-holder-requirement: remove this method (please see credit-card handler)
+     * @deprecated
+     */
+    public function saveMissingCardHolder(string $cardId, string $customerId, mixed $cardHolder, Context $context): void
+    {
+        $this->cardRepository->upsert([
+            [
+                'id' => $cardId,
+                'customerId' => $customerId,
+                'cardHolder' => $cardHolder,
+            ],
+        ], $context);
+    }
 }
diff --git a/src/Components/CardRepository/CardRepositoryInterface.php b/src/Components/CardRepository/CardRepositoryInterface.php
index 8a30a7bde..6e1b4ee3a 100644
--- a/src/Components/CardRepository/CardRepositoryInterface.php
+++ b/src/Components/CardRepository/CardRepositoryInterface.php
@@ -13,6 +13,7 @@ interface CardRepositoryInterface
 {
     public function saveCard(
         CustomerEntity $customer,
+        string $cardHolder,
         string $truncatedCardPan,
         string $pseudoCardPan,
         string $cardType,
@@ -37,8 +38,14 @@ public function removeAllCardsForCustomer(
     ): void;
 
     public function getExistingCard(
-        CustomerEntity $customer,
+        CustomerEntity|string $customer,
         string $pseudoCardPan,
         Context $context
     ): ?PayonePaymentCardEntity;
+
+    /**
+     * TODO-card-holder-requirement: remove this method (please see credit-card handler)
+     * @deprecated
+     */
+    public function saveMissingCardHolder(string $cardId, string $customerId, mixed $cardHolder, Context $context): void;
 }
diff --git a/src/Components/GenericExpressCheckout/PaymentHandler/AbstractGenericExpressCheckoutPaymentHandler.php b/src/Components/GenericExpressCheckout/PaymentHandler/AbstractGenericExpressCheckoutPaymentHandler.php
index 862dd02ac..a9e5c61a6 100644
--- a/src/Components/GenericExpressCheckout/PaymentHandler/AbstractGenericExpressCheckoutPaymentHandler.php
+++ b/src/Components/GenericExpressCheckout/PaymentHandler/AbstractGenericExpressCheckoutPaymentHandler.php
@@ -10,6 +10,7 @@
 use Shopware\Core\Checkout\Payment\Cart\AsyncPaymentTransactionStruct;
 use Shopware\Core\Checkout\Payment\Exception\AsyncPaymentProcessException;
 use Shopware\Core\Checkout\Payment\PaymentException;
+use Shopware\Core\Framework\Validation\DataBag\DataBag;
 use Shopware\Core\Framework\Validation\DataBag\RequestDataBag;
 use Shopware\Core\System\SalesChannel\SalesChannelContext;
 use Symfony\Component\HttpFoundation\RedirectResponse;
@@ -26,9 +27,9 @@ public static function isCapturable(array $transactionData, array $payoneTransAc
         return static::isTransactionAppointedAndCompleted($transactionData) || static::matchesIsCapturableDefaults($transactionData);
     }
 
-    public function getValidationDefinitions(SalesChannelContext $salesChannelContext): array
+    public function getValidationDefinitions(DataBag $dataBag, SalesChannelContext $salesChannelContext): array
     {
-        return array_merge(parent::getValidationDefinitions($salesChannelContext), [
+        return array_merge(parent::getValidationDefinitions($dataBag, $salesChannelContext), [
             RequestConstants::WORK_ORDER_ID => [new NotBlank()],
             RequestConstants::CART_HASH => [new NotBlank()],
         ]);
diff --git a/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardDefinition.php b/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardDefinition.php
index 8231c4234..fe63e4000 100644
--- a/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardDefinition.php
+++ b/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardDefinition.php
@@ -49,6 +49,7 @@ protected function defineFields(): FieldCollection
             (new IdField('id', 'id'))->setFlags(new PrimaryKey(), new Required()),
 
             (new FkField('customer_id', 'customerId', CustomerDefinition::class))->addFlags(new Required()),
+            (new StringField('card_holder', 'cardHolder'))->setFlags(new Required()),
 
             $pseudoCardPanField,
             (new StringField('truncated_card_pan', 'truncatedCardPan'))->setFlags(new Required()),
diff --git a/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardEntity.php b/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardEntity.php
index 8965db62e..bae5001bb 100644
--- a/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardEntity.php
+++ b/src/DataAbstractionLayer/Entity/Card/PayonePaymentCardEntity.php
@@ -24,6 +24,11 @@ class PayonePaymentCardEntity extends Entity
 
     protected string $customerId;
 
+    /**
+     * @since 6.2.0
+     */
+    protected string $cardHolder;
+
     public function getPseudoCardPan(): string
     {
         return $this->pseudoCardPan;
@@ -83,4 +88,9 @@ public function getCustomerId(): string
     {
         return $this->customerId;
     }
+
+    public function getCardHolder(): string
+    {
+        return $this->cardHolder;
+    }
 }
diff --git a/src/DependencyInjection/requestParameter/builder.xml b/src/DependencyInjection/requestParameter/builder.xml
index 355fad2fe..0beee6860 100644
--- a/src/DependencyInjection/requestParameter/builder.xml
+++ b/src/DependencyInjection/requestParameter/builder.xml
@@ -160,7 +160,7 @@
 
         <!-- Credit Card -->
         <service id="PayonePayment\Payone\RequestParameter\Builder\CreditCard\AuthorizeRequestParameterBuilder"
-                 parent="PayonePayment\Payone\RequestParameter\Builder\AbstractRequestParameterBuilder">
+                 parent="PayonePayment\Payone\RequestParameter\Builder\AbstractRequestParameterBuilder" autowire="true">
 
             <tag name="payone_request_builder"/>
         </service>
diff --git a/src/Migration/Migration1718642595CreditCardAddCardHolder.php b/src/Migration/Migration1718642595CreditCardAddCardHolder.php
new file mode 100644
index 000000000..5737c8be6
--- /dev/null
+++ b/src/Migration/Migration1718642595CreditCardAddCardHolder.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PayonePayment\Migration;
+
+use Doctrine\DBAL\Connection;
+use Shopware\Core\Framework\Migration\MigrationStep;
+
+class Migration1718642595CreditCardAddCardHolder extends MigrationStep
+{
+    public function getCreationTimestamp(): int
+    {
+        return 1_718_642_595;
+    }
+
+    public function update(Connection $connection): void
+    {
+        $connection->executeStatement(
+            <<<SQL
+            ALTER TABLE `payone_payment_card`
+                ADD `card_holder` VARCHAR(255) NOT NULL AFTER `customer_id`;
+            SQL
+        );
+    }
+
+    public function updateDestructive(Connection $connection): void
+    {
+    }
+}
diff --git a/src/PaymentHandler/PayoneCreditCardPaymentHandler.php b/src/PaymentHandler/PayoneCreditCardPaymentHandler.php
index 75270fdf5..6662427a5 100644
--- a/src/PaymentHandler/PayoneCreditCardPaymentHandler.php
+++ b/src/PaymentHandler/PayoneCreditCardPaymentHandler.php
@@ -11,16 +11,19 @@
 use PayonePayment\Components\DataHandler\Transaction\TransactionDataHandlerInterface;
 use PayonePayment\Components\PaymentStateHandler\PaymentStateHandlerInterface;
 use PayonePayment\Components\TransactionStatus\TransactionStatusService;
+use PayonePayment\DataAbstractionLayer\Entity\Card\PayonePaymentCardEntity;
 use PayonePayment\Payone\Client\PayoneClientInterface;
 use PayonePayment\Payone\RequestParameter\Builder\AbstractRequestParameterBuilder;
 use PayonePayment\Payone\RequestParameter\RequestParameterFactory;
 use PayonePayment\Struct\PaymentTransaction;
 use Shopware\Core\Checkout\Payment\Cart\AsyncPaymentTransactionStruct;
 use Shopware\Core\Framework\DataAbstractionLayer\EntityRepository;
+use Shopware\Core\Framework\Validation\DataBag\DataBag;
 use Shopware\Core\Framework\Validation\DataBag\RequestDataBag;
 use Shopware\Core\System\SalesChannel\SalesChannelContext;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\Validator\Constraints\NotBlank;
 use Symfony\Contracts\Translation\TranslatorInterface;
 
 class PayoneCreditCardPaymentHandler extends AbstractAsynchronousPayonePaymentHandler
@@ -31,6 +34,7 @@ class PayoneCreditCardPaymentHandler extends AbstractAsynchronousPayonePaymentHa
     final public const REQUEST_PARAM_CARD_EXPIRE_DATE = 'cardExpireDate';
     final public const REQUEST_PARAM_CARD_TYPE = 'cardType';
     final public const REQUEST_PARAM_TRUNCATED_CARD_PAN = 'truncatedCardPan';
+    final public const REQUEST_PARAM_CARD_HOLDER = 'cardHolder';
 
     public function __construct(
         ConfigReaderInterface $configReader,
@@ -59,13 +63,36 @@ public function __construct(
         );
     }
 
+    public function getValidationDefinitions(DataBag $dataBag, SalesChannelContext $salesChannelContext): array
+    {
+        $definitions = parent::getValidationDefinitions($dataBag, $salesChannelContext);
+
+        // Please note: this is field is only required, for that case, that the card has been already saved, but no
+        // card-holder has been saved (because this field was added in a later version)
+        // with that we want to make sure, that a card-holder is always present.
+        // if a card holder as been already saved, the submitted value will be ignored.
+        // if no card holder has been saved, and no values has been submitted, the next line will cause a validation-error
+        // TODO in the far future: move this into the if-block for the case, if the card has not been saved.
+        // search for the following to-do reference, to adjust the related code: TODO-card-holder-requirement
+        $definitions[self::REQUEST_PARAM_CARD_HOLDER] = [new NotBlank()];
+
+        if (empty($dataBag->get(self::REQUEST_PARAM_SAVED_PSEUDO_CARD_PAN))) {
+            $definitions[self::REQUEST_PARAM_PSEUDO_CARD_PAN] = [new NotBlank()];
+            $definitions[self::REQUEST_PARAM_TRUNCATED_CARD_PAN] = [new NotBlank()];
+            $definitions[self::REQUEST_PARAM_CARD_EXPIRE_DATE] = [new NotBlank()];
+            $definitions[self::REQUEST_PARAM_CARD_TYPE] = [new NotBlank()];
+        }
+
+        return $definitions;
+    }
+
     public static function isCapturable(array $transactionData, array $payoneTransActionData): bool
     {
         if (static::isNeverCapturable($payoneTransActionData)) {
             return false;
         }
 
-        $txAction = isset($transactionData['txaction']) ? strtolower((string) $transactionData['txaction']) : null;
+        $txAction = isset($transactionData['txaction']) ? strtolower((string)$transactionData['txaction']) : null;
 
         if ($txAction === TransactionStatusService::ACTION_APPOINTED) {
             return true;
@@ -106,6 +133,9 @@ protected function handleResponse(
         $customer = $salesChannelContext->getCustomer();
         $savedPseudoCardPan = $dataBag->get(self::REQUEST_PARAM_SAVED_PSEUDO_CARD_PAN);
 
+        // TODO-card-holder-requirement: move the next line into the if-block if the $savedPseudoCardPan is empty (please see credit-card handler)
+        $cardHolder = $dataBag->get(self::REQUEST_PARAM_CARD_HOLDER);
+
         if (empty($savedPseudoCardPan)) {
             $truncatedCardPan = $dataBag->get(self::REQUEST_PARAM_TRUNCATED_CARD_PAN);
             $cardExpireDate = $dataBag->get(self::REQUEST_PARAM_CARD_EXPIRE_DATE);
@@ -117,6 +147,7 @@ protected function handleResponse(
             if (!empty($expiresAt) && $customer !== null && $saveCreditCard) {
                 $this->cardRepository->saveCard(
                     $customer,
+                    $cardHolder,
                     $truncatedCardPan,
                     $pseudoCardPan,
                     $cardType,
@@ -134,6 +165,11 @@ protected function handleResponse(
                     $salesChannelContext->getContext()
                 );
 
+                // TODO-card-holder-requirement: remove this if-statement incl. content (please see credit-card handler)
+                if ($savedCard instanceof PayonePaymentCardEntity && empty($savedCard->getCardHolder())) {
+                    $this->cardRepository->saveMissingCardHolder($savedCard->getId(), $customer->getId(), $cardHolder, $salesChannelContext->getContext());
+                }
+
                 $cardType = $savedCard ? $savedCard->getCardType() : '';
             }
         }
@@ -152,7 +188,7 @@ protected function handleResponse(
 
     protected function getRedirectResponse(SalesChannelContext $context, array $request, array $response): RedirectResponse
     {
-        if (strtolower((string) $response['status']) === 'redirect') {
+        if (strtolower((string)$response['status']) === 'redirect') {
             return new RedirectResponse($response['redirecturl']);
         }
 
diff --git a/src/Payone/RequestParameter/Builder/CreditCard/AuthorizeRequestParameterBuilder.php b/src/Payone/RequestParameter/Builder/CreditCard/AuthorizeRequestParameterBuilder.php
index f44a5a860..5d7359842 100644
--- a/src/Payone/RequestParameter/Builder/CreditCard/AuthorizeRequestParameterBuilder.php
+++ b/src/Payone/RequestParameter/Builder/CreditCard/AuthorizeRequestParameterBuilder.php
@@ -4,24 +4,41 @@
 
 namespace PayonePayment\Payone\RequestParameter\Builder\CreditCard;
 
+use PayonePayment\Components\CardRepository\CardRepository;
 use PayonePayment\PaymentHandler\PayoneCreditCardPaymentHandler;
 use PayonePayment\Payone\RequestParameter\Builder\AbstractRequestParameterBuilder;
+use PayonePayment\Payone\RequestParameter\Builder\RequestBuilderServiceAccessor;
 use PayonePayment\Payone\RequestParameter\Struct\AbstractRequestParameterStruct;
 use PayonePayment\Payone\RequestParameter\Struct\PaymentTransactionStruct;
 
 class AuthorizeRequestParameterBuilder extends AbstractRequestParameterBuilder
 {
+    public function __construct(
+        RequestBuilderServiceAccessor $serviceAccessor,
+        private readonly CardRepository $cardRepository
+    ) {
+        parent::__construct($serviceAccessor);
+    }
+
     /**
      * @param PaymentTransactionStruct $arguments
      */
     public function getRequestParameter(AbstractRequestParameterStruct $arguments): array
     {
+        $cardHolder = $arguments->getRequestData()->get(PayoneCreditCardPaymentHandler::REQUEST_PARAM_CARD_HOLDER);
         $cardType = $arguments->getRequestData()->get(PayoneCreditCardPaymentHandler::REQUEST_PARAM_CARD_TYPE);
         $pseudoCardPan = $arguments->getRequestData()->get(PayoneCreditCardPaymentHandler::REQUEST_PARAM_PSEUDO_CARD_PAN);
         $savedPseudoCardPan = $arguments->getRequestData()->get(PayoneCreditCardPaymentHandler::REQUEST_PARAM_SAVED_PSEUDO_CARD_PAN);
 
-        if (!empty($savedPseudoCardPan)) {
-            $pseudoCardPan = $savedPseudoCardPan;
+        $salesChannelContext = $arguments->getSalesChannelContext();
+        if (!empty($savedPseudoCardPan) && !empty($salesChannelContext->getCustomerId())) {
+            $savedCard = $this->cardRepository->getExistingCard(
+                $salesChannelContext->getCustomerId(),
+                $savedPseudoCardPan,
+                $salesChannelContext->getContext()
+            );
+            $pseudoCardPan = $savedCard?->getPseudoCardPan() ?: '';
+            $cardHolder = $savedCard?->getCardHolder() ?: $cardHolder;
         }
 
         return [
@@ -29,6 +46,7 @@ public function getRequestParameter(AbstractRequestParameterStruct $arguments):
             'request' => $arguments->getAction(),
             'pseudocardpan' => $pseudoCardPan,
             'cardtype' => $cardType,
+            'cardholder' => $cardHolder,
         ];
     }
 
@@ -39,6 +57,6 @@ public function supports(AbstractRequestParameterStruct $arguments): bool
         }
 
         return $arguments->getPaymentMethod() === PayoneCreditCardPaymentHandler::class
-            && in_array($arguments->getAction(), [self::REQUEST_ACTION_PREAUTHORIZE, self::REQUEST_ACTION_AUTHORIZE]);
+            && \in_array($arguments->getAction(), [self::REQUEST_ACTION_PREAUTHORIZE, self::REQUEST_ACTION_AUTHORIZE], true);
     }
 }
diff --git a/src/Resources/app/storefront/cypress/e2e/payment-method/creditcard.cy.js b/src/Resources/app/storefront/cypress/e2e/payment-method/creditcard.cy.js
index 5e0f1638a..8eecf64cb 100644
--- a/src/Resources/app/storefront/cypress/e2e/payment-method/creditcard.cy.js
+++ b/src/Resources/app/storefront/cypress/e2e/payment-method/creditcard.cy.js
@@ -41,13 +41,14 @@ describe('Credit Card', () => {
         cy.checkoutConfirmAndComplete(
             () => {
                 cy.get('@creditCardPan').then((storedPan) => {
-                    cy.get('#savedpseudocardpan').select(storedPan)
+                    cy.get('#savedpseudocardpan').select(storedPan);
                     cy.get('.credit-card-input').should('not.be.visible');
                 })
             });
     });
 
     function fillIframe(iban = '4111111111111111') {
+        cy.get('#creditCardHolder').type('credit card holder');
         setIframeValue('cardpan', 'input', iban);
         setIframeValue('cardcvc2', 'input', '123');
         setIframeValue('cardexpiremonth', 'select', 5);
diff --git a/src/Resources/app/storefront/dist/storefront/js/payone-payment/payone-payment.js b/src/Resources/app/storefront/dist/storefront/js/payone-payment/payone-payment.js
index 9151d0238..ca5c5abe6 100644
--- a/src/Resources/app/storefront/dist/storefront/js/payone-payment/payone-payment.js
+++ b/src/Resources/app/storefront/dist/storefront/js/payone-payment/payone-payment.js
@@ -1 +1 @@
-(()=>{"use strict";var e={857:e=>{var t=function(e){var t;return!!e&&"object"==typeof e&&"[object RegExp]"!==(t=Object.prototype.toString.call(e))&&"[object Date]"!==t&&e.$$typeof!==n},n="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function r(e,t){return!1!==t.clone&&t.isMergeableObject(e)?s(Array.isArray(e)?[]:{},e,t):e}function a(e,t,n){return e.concat(t).map(function(e){return r(e,n)})}function i(e){return Object.keys(e).concat(Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(t){return Object.propertyIsEnumerable.call(e,t)}):[])}function o(e,t){try{return t in e}catch(e){return!1}}function s(e,n,l){(l=l||{}).arrayMerge=l.arrayMerge||a,l.isMergeableObject=l.isMergeableObject||t,l.cloneUnlessOtherwiseSpecified=r;var d,c,u=Array.isArray(n);return u!==Array.isArray(e)?r(n,l):u?l.arrayMerge(e,n,l):(c={},(d=l).isMergeableObject(e)&&i(e).forEach(function(t){c[t]=r(e[t],d)}),i(n).forEach(function(t){(!o(e,t)||Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))&&(o(e,t)&&d.isMergeableObject(n[t])?c[t]=(function(e,t){if(!t.customMerge)return s;var n=t.customMerge(e);return"function"==typeof n?n:s})(t,d)(e[t],n[t],d):c[t]=r(n[t],d))}),c)}s.all=function(e,t){if(!Array.isArray(e))throw Error("first argument should be an array");return e.reduce(function(e,n){return s(e,n,t)},{})},e.exports=s}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}(()=>{n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t}})(),(()=>{n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}})(),(()=>{n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{var e=n(857),t=n.n(e);class r{static ucFirst(e){return e.charAt(0).toUpperCase()+e.slice(1)}static lcFirst(e){return e.charAt(0).toLowerCase()+e.slice(1)}static toDashCase(e){return e.replace(/([A-Z])/g,"-$1").replace(/^-/,"").toLowerCase()}static toLowerCamelCase(e,t){let n=r.toUpperCamelCase(e,t);return r.lcFirst(n)}static toUpperCamelCase(e,t){return t?e.split(t).map(e=>r.ucFirst(e.toLowerCase())).join(""):r.ucFirst(e.toLowerCase())}static parsePrimitive(e){try{return/^\d+(.|,)\d+$/.test(e)&&(e=e.replace(",",".")),JSON.parse(e)}catch(t){return e.toString()}}}class a{static isNode(e){return"object"==typeof e&&null!==e&&(e===document||e===window||e instanceof Node)}static hasAttribute(e,t){if(!a.isNode(e))throw Error("The element must be a valid HTML Node!");return"function"==typeof e.hasAttribute&&e.hasAttribute(t)}static getAttribute(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!1===a.hasAttribute(e,t))throw Error('The required property "'.concat(t,'" does not exist!'));if("function"!=typeof e.getAttribute){if(n)throw Error("This node doesn't support the getAttribute function!");return}return e.getAttribute(t)}static getDataAttribute(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2],i=t.replace(/^data(|-)/,""),o=r.toLowerCamelCase(i,"-");if(!a.isNode(e)){if(n)throw Error("The passed node is not a valid HTML Node!");return}if(void 0===e.dataset){if(n)throw Error("This node doesn't support the dataset attribute!");return}let s=e.dataset[o];if(void 0===s){if(n)throw Error('The required data attribute "'.concat(t,'" does not exist on ').concat(e,"!"));return s}return r.parsePrimitive(s)}static querySelector(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!a.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelector(t)||!1;if(n&&!1===r)throw Error('The required element "'.concat(t,'" does not exist in parent node!'));return r}static querySelectorAll(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!a.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelectorAll(t);if(0===r.length&&(r=!1),n&&!1===r)throw Error('At least one item of "'.concat(t,'" must exist in parent node!'));return r}}class i{publish(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=new CustomEvent(e,{detail:t,cancelable:n});return this.el.dispatchEvent(r),r}subscribe(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=this,a=e.split("."),i=n.scope?t.bind(n.scope):t;if(n.once&&!0===n.once){let t=i;i=function(n){r.unsubscribe(e),t(n)}}return this.el.addEventListener(a[0],i),this.listeners.push({splitEventName:a,opts:n,cb:i}),!0}unsubscribe(e){let t=e.split(".");return this.listeners=this.listeners.reduce((e,n)=>([...n.splitEventName].sort().toString()===t.sort().toString()?this.el.removeEventListener(n.splitEventName[0],n.cb):e.push(n),e),[]),!0}reset(){return this.listeners.forEach(e=>{this.el.removeEventListener(e.splitEventName[0],e.cb)}),this.listeners=[],!0}get el(){return this._el}set el(e){this._el=e}get listeners(){return this._listeners}set listeners(e){this._listeners=e}constructor(e=document){this._el=e,e.$emitter=this,this._listeners=[]}}class o{init(){throw Error('The "init" method for the plugin "'.concat(this._pluginName,'" is not defined.'))}update(){}_init(){this._initialized||(this.init(),this._initialized=!0)}_update(){this._initialized&&this.update()}_mergeOptions(e){let n=r.toDashCase(this._pluginName),i=a.getDataAttribute(this.el,"data-".concat(n,"-config"),!1),o=a.getAttribute(this.el,"data-".concat(n,"-options"),!1),s=[this.constructor.options,this.options,e];i&&s.push(window.PluginConfigManager.get(this._pluginName,i));try{o&&s.push(JSON.parse(o))}catch(e){throw console.error(this.el),Error('The data attribute "data-'.concat(n,'-options" could not be parsed to json: ').concat(e.message))}return t().all(s.filter(e=>e instanceof Object&&!(e instanceof Array)).map(e=>e||{}))}_registerInstance(){window.PluginManager.getPluginInstancesFromElement(this.el).set(this._pluginName,this),window.PluginManager.getPlugin(this._pluginName,!1).get("instances").push(this)}_getPluginName(e){return e||(e=this.constructor.name),e}constructor(e,t={},n=!1){if(!a.isNode(e))throw Error("There is no valid element given.");this.el=e,this.$emitter=new i(this.el),this._pluginName=this._getPluginName(n),this.options=this._mergeOptions(t),this._initialized=!1,this._registerInstance(),this._init()}}class s{static iterate(e,t){if(e instanceof Map||Array.isArray(e))return e.forEach(t);if(e instanceof FormData){for(var n of e.entries())t(n[1],n[0]);return}if(e instanceof NodeList)return e.forEach(t);if(e instanceof HTMLCollection)return Array.from(e).forEach(t);if(e instanceof Object)return Object.keys(e).forEach(n=>{t(e[n],n)});throw Error("The element type ".concat(typeof e," is not iterable!"))}}let l="loader",d={BEFORE:"before",INNER:"inner"};class c{create(){if(!this.exists()){if(this.position===d.INNER){this.parent.innerHTML=c.getTemplate();return}this.parent.insertAdjacentHTML(this._getPosition(),c.getTemplate())}}remove(){let e=this.parent.querySelectorAll(".".concat(l));s.iterate(e,e=>e.remove())}exists(){return this.parent.querySelectorAll(".".concat(l)).length>0}_getPosition(){return this.position===d.BEFORE?"afterbegin":"beforeend"}static getTemplate(){return'<div class="'.concat(l,'" role="status">\n                    <span class="').concat("visually-hidden",'">Loading...</span>\n                </div>')}static SELECTOR_CLASS(){return l}constructor(e,t=d.BEFORE){this.parent=e instanceof Element?e:document.body.querySelector(e),this.position=t}}class u extends c{create(){super.create(),this.parent.disabled=!0}remove(){super.remove(),this.parent.disabled=!1}_isButtonElement(){return"button"===this.parent.tagName.toLowerCase()}constructor(e,t="before"){if(super(e,t),!1===this._isButtonElement())throw Error("Parent element is not of type <button>")}}class h extends o{init(){this.iframe=null,this.iframeFieldCheckerStarted=!1,this.orderFormDisabled=!0;let e=document.getElementById("payone-request"),t=e.getAttribute("data-payone-language"),n=JSON.parse(e.innerHTML);this._createScript(()=>{let e=this.getClientConfig(t);this.iframe=new window.Payone.ClientApi.HostedIFrames(e,n);let r=document.getElementById("savedpseudocardpan"),a=document.getElementById("confirmOrderForm");r&&r.addEventListener("change",this._handleChangeSavedCard.bind(this)),a&&a.addEventListener("submit",this._handleOrderSubmit.bind(this))})}getSelectStyle(){return["width: 100%","padding: .5625rem","color: #8798a9","vertical-align: middle","line-height: 1.5","font-weight: 500","background-color: #fff","border: none","border-radius: 3px"]}getFieldStyle(){return["width: 100%","height: 100%","padding: .5625rem","color: #8798a9","vertical-align: middle","line-height: 1.5","font-weight: 500","background-color: #fff","border: none","border-radius: .1875rem"]}getClientConfig(e){return{fields:{cardpan:{selector:"cardpan",type:"text",style:this.getFieldStyle().join("; ")},cardcvc2:{selector:"cardcvc2",type:"password",size:"4",maxlength:"4",length:{V:3,M:3,A:4,D:3,J:0,O:3,P:3,U:3},style:this.getFieldStyle().join("; ")},cardexpiremonth:{selector:"cardexpiremonth",type:"select",size:"2",maxlength:"2",style:this.getSelectStyle().join("; ")},cardexpireyear:{selector:"cardexpireyear",type:"select",style:this.getSelectStyle().join("; ")}},language:window.Payone.ClientApi.Language[e],defaultStyle:{iframe:{height:"100%",width:"100%"}},autoCardtypeDetection:{supportedCardtypes:h.options.supportedCardtypes,callback:this._cardDetectionCallback}}}_cardDetectionCallback(e){if("-"===e||"?"===e)return;let t="https://cdn.pay1.de/cc/"+e.toLowerCase()+"/xl/default.png",n=document.getElementById("errorOutput"),r=document.getElementById("card-logo");r.setAttribute("src",t),n.style.display="none",r.style.display="block"}_createScript(e){let t=document.createElement("script");t.type="text/javascript",t.src="https://secure.pay1.de/client-api/js/v1/payone_hosted.js",t.addEventListener("load",e.bind(this),!1),document.head.appendChild(t)}_handleOrderSubmit(e){document.getElementById("errorOutput").style.display="none";let t=document.getElementById("savedpseudocardpan");if(t&&t.value.length>0)return!0;if(!this.iframe.isComplete()){let t=document.getElementById("iframeErrorOutput");return this.iframeFieldCheckerStarted||setInterval(()=>{this.iframe.isComplete()?t.style.display="none":t.style.display="block"},250),this.iframeFieldCheckerStarted=!0,this._handleOrderFormError(e),!1}if(this.orderFormDisabled)return window.payoneCreditCardCheckCallback=this._payoneCheckCallback.bind(this),this.iframe.creditCardCheck("payoneCreditCardCheckCallback"),this._handleOrderFormError(e),!1}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_handleChangeSavedCard(){let e=document.getElementById("savedpseudocardpan");e.options[e.selectedIndex].value?[...document.getElementsByClassName("credit-card-input")].forEach(function(e){e.classList.add("hide")}):[...document.getElementsByClassName("credit-card-input")].forEach(function(e){e.classList.remove("hide")})}_payoneCheckCallback(e){if("VALID"===e.status)document.getElementById("pseudocardpan").value=e.pseudocardpan,document.getElementById("truncatedcardpan").value=e.truncatedcardpan,document.getElementById("cardexpiredate").value=e.cardexpiredate,document.getElementById("cardtype").value=e.cardtype,this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit();else{let t=document.getElementById("confirmFormSubmit"),n=document.getElementById("errorOutput");t.removeAttribute("disabled"),n.innerHTML=e.errormessage,n.style.display="block"}}}h.options={supportedCardtypes:["#","V","A","M","D","J","O","U","P"]};let m="js-pseudo-modal";class p{open(e){this._hideExistingModal(),this._create(),this._open(e)}close(){let e=this.getModal();this._modalInstance=bootstrap.Modal.getInstance(e),this._modalInstance.hide()}getModal(){return this._modal||this._create(),this._modal}updatePosition(){this._modalInstance.handleUpdate()}updateContent(e,t){this._content=e,this._setModalContent(e),this.updatePosition(),"function"==typeof t&&t.bind(this)()}_hideExistingModal(){try{let e=a.querySelector(document,".".concat(m," .modal"),!1);if(!e)return;let t=bootstrap.Modal.getInstance(e);if(!t)return;t.hide()}catch(e){console.warn("[PseudoModalUtil] Unable to hide existing pseudo modal before opening pseudo modal: ".concat(e.message))}}_open(e){this.getModal(),this._modal.addEventListener("hidden.bs.modal",this._modalWrapper.remove),this._modal.addEventListener("shown.bs.modal",e),this._modalInstance.show()}_create(){this._modalMarkupEl=a.querySelector(document,this._templateSelector),this._createModalWrapper(),this._modalWrapper.innerHTML=this._content,this._modal=this._createModalMarkup(),this._modalInstance=new bootstrap.Modal(this._modal,{backdrop:this._useBackdrop}),document.body.insertAdjacentElement("beforeend",this._modalWrapper)}_createModalWrapper(){this._modalWrapper=a.querySelector(document,".".concat(m),!1),this._modalWrapper||(this._modalWrapper=document.createElement("div"),this._modalWrapper.classList.add(m))}_createModalMarkup(){let e=a.querySelector(this._modalWrapper,".modal",!1);if(e)return e;let t=this._modalWrapper.innerHTML;return this._modalWrapper.innerHTML=this._modalMarkupEl.innerHTML,this._setModalContent(t),a.querySelector(this._modalWrapper,".modal")}_setModalTitle(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";try{a.querySelector(this._modalWrapper,this._templateTitleSelector).innerHTML=e}catch(e){}}_setModalContent(e){let t=a.querySelector(this._modalWrapper,this._templateContentSelector);t.innerHTML=e;try{let e=a.querySelector(t,this._templateTitleSelector);e&&(this._setModalTitle(e.innerHTML),e.parentNode.removeChild(e))}catch(e){}}constructor(e,t=!0,n=".".concat("js-pseudo-modal-template"),r=".".concat("js-pseudo-modal-template-content-element"),a=".".concat("js-pseudo-modal-template-title-element")){this._content=e,this._useBackdrop=t,this._templateSelector=n,this._templateContentSelector=r,this._templateTitleSelector=a}}class y{static isTouchDevice(){return"ontouchstart"in document.documentElement}static isIOSDevice(){return y.isIPhoneDevice()||y.isIPadDevice()}static isNativeWindowsBrowser(){return y.isIEBrowser()||y.isEdgeBrowser()}static isIPhoneDevice(){return!!navigator.userAgent.match(/iPhone/i)}static isIPadDevice(){return!!navigator.userAgent.match(/iPad/i)}static isIEBrowser(){return -1!==navigator.userAgent.toLowerCase().indexOf("msie")||!!navigator.userAgent.match(/Trident.*rv:\d+\./)}static isEdgeBrowser(){return!!navigator.userAgent.match(/Edge\/\d+/i)}static getList(){return{"is-touch":y.isTouchDevice(),"is-ios":y.isIOSDevice(),"is-native-windows":y.isNativeWindowsBrowser(),"is-iphone":y.isIPhoneDevice(),"is-ipad":y.isIPadDevice(),"is-ie":y.isIEBrowser(),"is-edge":y.isEdgeBrowser()}}}let g="modal-backdrop",_="modal-backdrop-open",b="no-scroll",v={ON_CLICK:"backdrop/onclick"};class f{create(e){this._removeExistingBackdrops(),document.body.insertAdjacentHTML("beforeend",this._getTemplate());let t=document.body.lastChild;document.documentElement.classList.add(b),setTimeout(function(){t.classList.add(_),"function"==typeof e&&e()},75),this._dispatchEvents()}remove(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:350,t=this._getBackdrops();s.iterate(t,e=>e.classList.remove(_)),setTimeout(this._removeExistingBackdrops.bind(this),e),document.documentElement.classList.remove(b)}_dispatchEvents(){let e=y.isTouchDevice()?"touchstart":"click";document.addEventListener(e,function(e){e.target.classList.contains(g)&&document.dispatchEvent(new CustomEvent(v.ON_CLICK))})}_getBackdrops(){return document.querySelectorAll(".".concat(g))}_removeExistingBackdrops(){if(!1===this._exists())return;let e=this._getBackdrops();s.iterate(e,e=>e.remove())}_exists(){return document.querySelectorAll(".".concat(g)).length>0}_getTemplate(){return'<div class="'.concat(g,'"></div>')}constructor(){return f.instance||(f.instance=this),f.instance}}let E=Object.freeze(new f);class I{static create(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;E.create(e)}static remove(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:350;E.remove(e)}static SELECTOR_CLASS(){return g}}let S=Object.freeze(new class extends c{create(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];!this.exists()&&e&&(I.create(),document.querySelector(".".concat(I.SELECTOR_CLASS())).insertAdjacentHTML("beforeend",c.getTemplate()))}remove(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];super.remove(),e&&I.remove()}constructor(){super(document.body)}});class C{static create(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];S.create(e)}static remove(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];S.remove(e)}}class w{get(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"application/json",r=this._createPreparedRequest("GET",e,n);return this._sendRequest(r,null,t)}post(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("POST",e,r);return this._sendRequest(a,t,n)}delete(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("DELETE",e,r);return this._sendRequest(a,t,n)}patch(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("PATCH",e,r);return this._sendRequest(a,t,n)}abort(){if(this._request)return this._request.abort()}_registerOnLoaded(e,t){t&&e.addEventListener("loadend",()=>{t(e.responseText,e)})}_sendRequest(e,t,n){return this._registerOnLoaded(e,n),e.send(t),e}_getContentType(e,t){return e instanceof FormData&&(t=!1),t}_createPreparedRequest(e,t,n){return this._request=new XMLHttpRequest,this._request.open(e,t),this._request.setRequestHeader("X-Requested-With","XMLHttpRequest"),n&&this._request.setRequestHeader("Content-type",n),this._request}constructor(){this._request=null}}class L extends o{init(){this.orderFormDisabled=!0,this._client=new w,document.getElementById("confirmOrderForm").addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){document.getElementById("errorOutput").style.display="none",this.orderFormDisabled&&(this._handleOrderFormError(e),this._getModal(e))}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_getModal(e){e.preventDefault(),C.create();let t=this._getRequestData();this._client.abort(),this._client.post(this._getManageMandateUrl(),JSON.stringify(t),e=>this._openModal(e))}_submitForm(){this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit()}_openModal(e){if((e=JSON.parse(e)).error){let t=document.getElementById("errorOutput");t.innerHTML=e.error,t.style.display="block",C.remove();return}if("active"===e.mandate.Status){this._submitForm();return}let t=new p(e.modal_content);t.open(this._onOpen.bind(this,t))}_onOpen(e){e.getModal().classList.add("payone-debit-mandate-modal"),window.PluginManager.initializePlugins(),this._registerEvents(),C.remove()}_getRequestData(){return{iban:document.getElementById("iban").value}}_getManageMandateUrl(){return document.getElementById("payone-configuration").getAttribute("data-manage-mandate-url")}_registerEvents(){document.getElementById("mandateSubmit").addEventListener("click",this._onMandateSubmit.bind(this))}_onMandateSubmit(){document.getElementById("accept-mandate").checked&&this._submitForm()}}L.options={editorModalClass:"payone-debit-modal"};class B extends o{init(){null===this.options.supportedNetworks&&(this.options.supportedNetworks=[]),this._httpClient=new w,this.validateMerchantUrl=this.el.dataset.validateMerchantUrl,this.processPaymentUrl=this.el.dataset.processPaymentUrl,this.orderForm=a.querySelector(document,"#confirmOrderForm"),this._registerEventHandler()}createSession(){try{this.session=new ApplePaySession(3,this.options)}catch(e){this.handleErrorOnPayment();return}this.session.addEventListener("validatemerchant",this.validateMerchant.bind(this)),this.session.addEventListener("paymentauthorized",this.authorizePayment.bind(this))}performPayment(){this.session.begin()}validateMerchant(e){let t=e.validationURL;this._httpClient.abort(),this._httpClient.post(this.validateMerchantUrl,JSON.stringify({validationUrl:t}),e=>{let t=null;try{t=JSON.parse(e)}catch(e){this.handleErrorOnPayment();return}if(!t||!t.merchantSessionIdentifier||!t.signature){this.handleErrorOnPayment();return}this.session.completeMerchantValidation(t)})}handleErrorOnPayment(){let e=a.querySelector(document,"#payone-apple-pay-error");e.style.display="block",e.scrollIntoView({block:"start"})}authorizePayment(e){let t=a.querySelector(this.orderForm,"input[name='orderId']").value;this._httpClient.abort(),this._httpClient.post(this.processPaymentUrl,JSON.stringify({token:e.payment.token,orderId:t}),e=>{this.completePayment(e),this.orderForm.submit()})}completePayment(e){let t="",n="",r="";try{let a=JSON.parse(e);n=a.status,t=a.txid,r=a.userid}catch(e){this.orderForm.submit()}this.updateFormData(n,t,r,e),("APPROVED"===n||"PENDING"===n)&&this.session.completePayment({status:ApplePaySession.STATUS_SUCCESS,errors:[]}),this.orderForm.submit()}updateFormData(e,t,n,r){a.querySelector(this.orderForm,"input[name='status']").value=e,a.querySelector(this.orderForm,"input[name='txid']").value=t,a.querySelector(this.orderForm,"input[name='userid']").value=n,a.querySelector(this.orderForm,"input[name='response']").value=r}_handleApplePayButtonClick(){this.orderForm.reportValidity()&&(this.createSession(),this.performPayment())}_registerEventHandler(){this.el.addEventListener("click",this._handleApplePayButtonClick.bind(this))}}B.options={countryCode:"",currencyCode:"",supportedNetworks:[],merchantCapabilities:["supports3DS","supportsDebit","supportsCredit"],total:{label:"",type:"final",amount:"0.01"}};class O extends o{init(){this._client=new w,this.ratepayRateInput=a.querySelector(document,this.options.ratepayRateInputSelector),this.calculateInstallmentBtn=a.querySelector(document,this.options.calculateInstallmentBtnSelector),this.ratepayRuntimeInput=a.querySelector(document,this.options.ratepayRuntimeInputSelector),this.ratepayIbanContainer=a.querySelector(document,this.options.ratepayIbanContainerSelector),this.ratepayIbanInput=a.querySelector(document,this.options.ratepayIbanInputSelector),this._registerEventListeners(),this._handleInstallmentRuntimeChange()}_registerEventListeners(){this.calculateInstallmentBtn&&this.calculateInstallmentBtn.addEventListener("click",this._handleCalculateInstallmentButtonClick.bind(this)),this.ratepayRuntimeInput&&this.ratepayRuntimeInput.addEventListener("change",this._handleInstallmentRuntimeChange.bind(this)),document.querySelector(this.options.ratepayIbanContainerSelector).addEventListener("shown.bs.collapse",()=>this.ratepayIbanInput.required=!0),document.querySelector(this.options.ratepayIbanContainerSelector).addEventListener("hidden.bs.collapse",()=>this.ratepayIbanInput.required=!1)}_handleCalculateInstallmentButtonClick(){let e=this.ratepayRateInput.value;this._sendRequest("rate",e)}_handleInstallmentRuntimeChange(){let e=a.querySelector(document,this.options.ratepayRuntimeInputSelector).value;this._sendRequest("time",e)}_sendRequest(e,t){let n=JSON.stringify({ratepayInstallmentType:e,ratepayInstallmentValue:t});this._client.abort(),this._client.post("/payone/ratepay/installment/calculation",n,e=>this._handleCalculationCallback(e))}_handleCalculationCallback(e){this._replaceCalculationContent(e)}_replaceCalculationContent(e){a.querySelector(document,this.options.ratepayInstallmentPlanContainerSelector).innerHTML=e,this.ratepayInstallmentTable=a.querySelector(document,this.options.ratepayInstallmentTableSelector),this.ratepayRuntimeInput.value=this.ratepayInstallmentTable.dataset.ratepayNumberOfRates,this.ratepayRateInput.value=this.ratepayInstallmentTable.dataset.ratepayRate}}O.options={ratepayRateInputSelector:"#ratepayRate",ratepayRuntimeInputSelector:"#ratepayRuntime",calculateInstallmentBtnSelector:"#payone-ratepay-calculate-installment-btn",ratepayInstallmentPlanContainerSelector:"#payone-ratepay-installment-plan",ratepayIbanContainerSelector:"#ratepayIbanContainer",ratepayIbanInputSelector:"#ratepayIban",ratepayInstallmentTableSelector:"#ratepayInstallmentTable"};class P extends o{init(){window.klarnaAsyncCallback=this._initKlarnaWidget.bind(this);let e=document.createElement("script");e.src="https://x.klarnacdn.net/kp/lib/v1/api.js",document.body.appendChild(e),this.orderForm=document.getElementById(this.options.selectorFormId),this.confirmFormSubmit=this.orderForm.querySelector("button[type=submit]"),this._registerEventListeners()}_initKlarnaWidget(){Klarna.Payments.init({client_token:this.options.clientToken}),Klarna.Payments.load({container:this.options.selectorContainer,payment_method_category:this.options.paymentMethodIdentifier},e=>{new u(this.confirmFormSubmit).remove()})}_registerEventListeners(){this.orderForm&&this.orderForm.addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){e.preventDefault(),Klarna.Payments.authorize({payment_method_category:this.options.paymentMethodIdentifier},{},e=>{e.approved&&e.authorization_token?(document.querySelector(this.options.selectorTokenInput).value=e.authorization_token,this.orderForm.submit()):e.show_form?new u(this.confirmFormSubmit).remove():e.show_form||(window.location.href=window.location.href)})}}P.options={clientToken:null,paymentMethodIdentifier:null,selectorContainer:null,selectorTokenInput:'input[name="payoneKlarnaAuthorizationToken"]',selectorFormId:"confirmOrderForm"},P.orderForm=null,P.confirmFormSubmit=null;class k extends o{init(){if("amazon"in window)this.onLoad();else{var e=document.createElement("script");e.type="text/javascript",e.src="https://static-eu.payments-amazon.com/checkout.js",e.onload=this.onLoad.bind(this),document.head.appendChild(e)}}onLoad(){}}class M extends k{onLoad(){window.amazon.Pay.renderButton("#"+this.el.id,this.options)}}let F="element-loader-backdrop";class q extends c{static create(e){e.classList.add("has-element-loader"),q.exists(e)||(q.appendLoader(e),setTimeout(()=>{let t=e.querySelector(".".concat(F));t&&t.classList.add("element-loader-backdrop-open")},1))}static remove(e){e.classList.remove("has-element-loader");let t=e.querySelector(".".concat(F));t&&t.remove()}static exists(e){return e.querySelectorAll(".".concat(F)).length>0}static getTemplate(){return'\n        <div class="'.concat(F,'">\n            <div class="loader" role="status">\n                <span class="').concat("visually-hidden",'">Loading...</span>\n            </div>\n        </div>\n        ')}static appendLoader(e){e.insertAdjacentHTML("beforeend",q.getTemplate())}}PluginManager.register("PayonePaymentAmazonPayExpressButton",M,"[data-payone-payment-amazon-pay-express-button]"),PluginManager.register("PayonePaymentAmazonPayRedirect",class extends M{init(){q.create(document.querySelector(".content-main")),super.init()}onLoad(){super.onLoad(),document.querySelector("#"+this.el.id).dispatchEvent(new CustomEvent("click"))}},"[data-payone-payment-amazon-pay-redirect]");let T=window.PluginManager;T.register("PayonePaymentCreditCard",h,"[data-is-payone-credit-card]"),T.register("PayonePaymentDebitCard",L,"[data-is-payone-debit-card]"),T.register("PayonePaymentPayolutionInvoicing",class extends o{init(){this.orderFormDisabled=!0,this._client=new w,this._registerEventListeners()}_registerEventListeners(){let e=document.getElementById("confirmOrderForm");e&&e.addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){this._hideErrorBox(),this.orderFormDisabled&&(this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),e.defaultPrevented||(this._validatePaymentAcceptance(),e.preventDefault()))}_validateField(e,t){let n=document.getElementById(t);if(n.checked){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),e.preventDefault()}_validateInput(e,t){let n=document.getElementById(t);if(n.value){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),e.preventDefault()}_validatePaymentAcceptance(){let e=JSON.stringify(this._getRequestData());C.create(),this._client.abort(),this._client.post(this._getValidateUrl(),e,e=>this._handleValidateResponse(e))}_handleValidateResponse(e){if(e=JSON.parse(e),C.remove(),"OK"!==e.status)this._showErrorBox();else{let t=document.getElementById("payoneWorkOrder");t&&(t.value=e.workorderid),this._submitForm()}}_getValidateUrl(){return document.getElementById("payone-configuration").getAttribute("data-validate-url")}_showErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!1)}_hideErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!0)}_submitForm(){this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit()}_getRequestData(){return{payoneBirthday:document.getElementById("payoneBirthday").value}}},"[data-is-payone-payolution-invoicing]"),T.register("PayonePaymentPayolutionInstallment",class extends o{init(){this.orderFormDisabled=!0,this._client=new w,this._disableSubmitButton(),this._registerEventListeners()}_registerEventListeners(){let e=document.getElementById("confirmOrderForm"),t=document.getElementById("checkInstallmentButton");e&&e.addEventListener("submit",this._handleOrderSubmit.bind(this)),t&&t.addEventListener("click",this._handleCalculationButtonClick.bind(this))}_handleCalculationButtonClick(e){if(this._hideErrorBox(),this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),e.defaultPrevented)return;C.create();let t=JSON.stringify(this._getRequestData());this._client.abort(),this._client.post(this._getCalculationUrl(),t,e=>this._handleCalculationCallback(e))}_handleCalculationCallback(e){if(e=JSON.parse(e),C.remove(),"OK"!==e.status){this._showErrorBox();return}let t=document.getElementById("payoneWorkOrder"),n=document.getElementById("payoneCartHash");t.value=e.workorderid,n.value=e.carthash,this._displayInstallmentSelection(e),this._displayCalculationOverview(e),this._registerSelectionEventListeners(),this._enableSecondStep(),this._activateSubmitButton(),this._hideCheckInstallmentButton()}_hideCheckInstallmentButton(){let e=document.getElementById("checkInstallmentButton");e&&e.classList.add("hidden")}_registerSelectionEventListeners(){document.getElementById("payolutionInstallmentDuration").addEventListener("change",function(e){let t=e.target.value;document.querySelectorAll(".installmentDetail").forEach(function(e){e.dataset.duration===t?e.hidden=!1:e.hidden="hidden"})})}_showErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!1)}_hideErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!0)}_enableSecondStep(){document.querySelectorAll(".payolution-installment .hidden").forEach(function(e){e.classList.remove("hidden")})}_displayInstallmentSelection(e){let t=document.getElementById("installmentSelection");t&&(t.innerHTML=e.installmentSelection)}_displayCalculationOverview(e){let t=document.getElementById("calculationOverview");t&&(t.innerHTML=e.calculationOverview)}_handleOrderSubmit(e){this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),this._validateInput(e,"payolutionAccountOwner"),this._validateInput(e,"payolutionIban"),this._validateInput(e,"payolutionBic"),this._validateInput(e,"payolutionInstallmentDuration")}_disableSubmitButton(){this.orderFormDisabled=!0;let e=document.getElementById("confirmFormSubmit");e&&e.setAttribute("disabled","disabled")}_activateSubmitButton(){this.orderFormDisabled=!1;let e=document.getElementById("confirmFormSubmit");e&&e.removeAttribute("disabled")}_getCalculationUrl(){return document.getElementById("payone-configuration").getAttribute("data-calculation-url")}_validateField(e,t){let n=document.getElementById(t);if(n.checked){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),this._handleOrderFormError(e)}_validateInput(e,t){let n=document.getElementById(t);if(n.value){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),this._handleOrderFormError(e)}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_getRequestData(){let e=document.getElementById("payoneBirthday"),t=document.getElementById("payoneWorkOrder"),n=document.getElementById("payoneCartHash");return{payoneBirthday:e.value,workorder:t.value,carthash:n.value}}},"[data-is-payone-payolution-installment]"),T.register("PayonePaymentApplePay",B,"[data-payone-payment-apple-pay-options]"),T.register("PayonePaymentRatepayInstallment",O,"[data-is-payone-ratepay-installment]"),T.register("PayonePaymentKlarna",P,"[data-payone-payment-klarna]")})()})();
\ No newline at end of file
+(()=>{"use strict";var e={857:e=>{var t=function(e){var t;return!!e&&"object"==typeof e&&"[object RegExp]"!==(t=Object.prototype.toString.call(e))&&"[object Date]"!==t&&e.$$typeof!==n},n="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function r(e,t){return!1!==t.clone&&t.isMergeableObject(e)?s(Array.isArray(e)?[]:{},e,t):e}function a(e,t,n){return e.concat(t).map(function(e){return r(e,n)})}function i(e){return Object.keys(e).concat(Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(t){return Object.propertyIsEnumerable.call(e,t)}):[])}function o(e,t){try{return t in e}catch(e){return!1}}function s(e,n,l){(l=l||{}).arrayMerge=l.arrayMerge||a,l.isMergeableObject=l.isMergeableObject||t,l.cloneUnlessOtherwiseSpecified=r;var d,c,u=Array.isArray(n);return u!==Array.isArray(e)?r(n,l):u?l.arrayMerge(e,n,l):(c={},(d=l).isMergeableObject(e)&&i(e).forEach(function(t){c[t]=r(e[t],d)}),i(n).forEach(function(t){(!o(e,t)||Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))&&(o(e,t)&&d.isMergeableObject(n[t])?c[t]=(function(e,t){if(!t.customMerge)return s;var n=t.customMerge(e);return"function"==typeof n?n:s})(t,d)(e[t],n[t],d):c[t]=r(n[t],d))}),c)}s.all=function(e,t){if(!Array.isArray(e))throw Error("first argument should be an array");return e.reduce(function(e,n){return s(e,n,t)},{})},e.exports=s}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}(()=>{n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t}})(),(()=>{n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}})(),(()=>{n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{var e=n(857),t=n.n(e);class r{static ucFirst(e){return e.charAt(0).toUpperCase()+e.slice(1)}static lcFirst(e){return e.charAt(0).toLowerCase()+e.slice(1)}static toDashCase(e){return e.replace(/([A-Z])/g,"-$1").replace(/^-/,"").toLowerCase()}static toLowerCamelCase(e,t){let n=r.toUpperCamelCase(e,t);return r.lcFirst(n)}static toUpperCamelCase(e,t){return t?e.split(t).map(e=>r.ucFirst(e.toLowerCase())).join(""):r.ucFirst(e.toLowerCase())}static parsePrimitive(e){try{return/^\d+(.|,)\d+$/.test(e)&&(e=e.replace(",",".")),JSON.parse(e)}catch(t){return e.toString()}}}class a{static isNode(e){return"object"==typeof e&&null!==e&&(e===document||e===window||e instanceof Node)}static hasAttribute(e,t){if(!a.isNode(e))throw Error("The element must be a valid HTML Node!");return"function"==typeof e.hasAttribute&&e.hasAttribute(t)}static getAttribute(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!1===a.hasAttribute(e,t))throw Error('The required property "'.concat(t,'" does not exist!'));if("function"!=typeof e.getAttribute){if(n)throw Error("This node doesn't support the getAttribute function!");return}return e.getAttribute(t)}static getDataAttribute(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2],i=t.replace(/^data(|-)/,""),o=r.toLowerCamelCase(i,"-");if(!a.isNode(e)){if(n)throw Error("The passed node is not a valid HTML Node!");return}if(void 0===e.dataset){if(n)throw Error("This node doesn't support the dataset attribute!");return}let s=e.dataset[o];if(void 0===s){if(n)throw Error('The required data attribute "'.concat(t,'" does not exist on ').concat(e,"!"));return s}return r.parsePrimitive(s)}static querySelector(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!a.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelector(t)||!1;if(n&&!1===r)throw Error('The required element "'.concat(t,'" does not exist in parent node!'));return r}static querySelectorAll(e,t){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(n&&!a.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelectorAll(t);if(0===r.length&&(r=!1),n&&!1===r)throw Error('At least one item of "'.concat(t,'" must exist in parent node!'));return r}}class i{publish(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=new CustomEvent(e,{detail:t,cancelable:n});return this.el.dispatchEvent(r),r}subscribe(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=this,a=e.split("."),i=n.scope?t.bind(n.scope):t;if(n.once&&!0===n.once){let t=i;i=function(n){r.unsubscribe(e),t(n)}}return this.el.addEventListener(a[0],i),this.listeners.push({splitEventName:a,opts:n,cb:i}),!0}unsubscribe(e){let t=e.split(".");return this.listeners=this.listeners.reduce((e,n)=>([...n.splitEventName].sort().toString()===t.sort().toString()?this.el.removeEventListener(n.splitEventName[0],n.cb):e.push(n),e),[]),!0}reset(){return this.listeners.forEach(e=>{this.el.removeEventListener(e.splitEventName[0],e.cb)}),this.listeners=[],!0}get el(){return this._el}set el(e){this._el=e}get listeners(){return this._listeners}set listeners(e){this._listeners=e}constructor(e=document){this._el=e,e.$emitter=this,this._listeners=[]}}class o{init(){throw Error('The "init" method for the plugin "'.concat(this._pluginName,'" is not defined.'))}update(){}_init(){this._initialized||(this.init(),this._initialized=!0)}_update(){this._initialized&&this.update()}_mergeOptions(e){let n=r.toDashCase(this._pluginName),i=a.getDataAttribute(this.el,"data-".concat(n,"-config"),!1),o=a.getAttribute(this.el,"data-".concat(n,"-options"),!1),s=[this.constructor.options,this.options,e];i&&s.push(window.PluginConfigManager.get(this._pluginName,i));try{o&&s.push(JSON.parse(o))}catch(e){throw console.error(this.el),Error('The data attribute "data-'.concat(n,'-options" could not be parsed to json: ').concat(e.message))}return t().all(s.filter(e=>e instanceof Object&&!(e instanceof Array)).map(e=>e||{}))}_registerInstance(){window.PluginManager.getPluginInstancesFromElement(this.el).set(this._pluginName,this),window.PluginManager.getPlugin(this._pluginName,!1).get("instances").push(this)}_getPluginName(e){return e||(e=this.constructor.name),e}constructor(e,t={},n=!1){if(!a.isNode(e))throw Error("There is no valid element given.");this.el=e,this.$emitter=new i(this.el),this._pluginName=this._getPluginName(n),this.options=this._mergeOptions(t),this._initialized=!1,this._registerInstance(),this._init()}}class s{static iterate(e,t){if(e instanceof Map||Array.isArray(e))return e.forEach(t);if(e instanceof FormData){for(var n of e.entries())t(n[1],n[0]);return}if(e instanceof NodeList)return e.forEach(t);if(e instanceof HTMLCollection)return Array.from(e).forEach(t);if(e instanceof Object)return Object.keys(e).forEach(n=>{t(e[n],n)});throw Error("The element type ".concat(typeof e," is not iterable!"))}}let l="loader",d={BEFORE:"before",INNER:"inner"};class c{create(){if(!this.exists()){if(this.position===d.INNER){this.parent.innerHTML=c.getTemplate();return}this.parent.insertAdjacentHTML(this._getPosition(),c.getTemplate())}}remove(){let e=this.parent.querySelectorAll(".".concat(l));s.iterate(e,e=>e.remove())}exists(){return this.parent.querySelectorAll(".".concat(l)).length>0}_getPosition(){return this.position===d.BEFORE?"afterbegin":"beforeend"}static getTemplate(){return'<div class="'.concat(l,'" role="status">\n                    <span class="').concat("visually-hidden",'">Loading...</span>\n                </div>')}static SELECTOR_CLASS(){return l}constructor(e,t=d.BEFORE){this.parent=e instanceof Element?e:document.body.querySelector(e),this.position=t}}class u extends c{create(){super.create(),this.parent.disabled=!0}remove(){super.remove(),this.parent.disabled=!1}_isButtonElement(){return"button"===this.parent.tagName.toLowerCase()}constructor(e,t="before"){if(super(e,t),!1===this._isButtonElement())throw Error("Parent element is not of type <button>")}}class h extends o{init(){this.iframe=null,this.iframeFieldCheckerStarted=!1,this.orderFormDisabled=!0;let e=document.getElementById("payone-request"),t=e.getAttribute("data-payone-language"),n=JSON.parse(e.innerHTML);this._createScript(()=>{let e=this.getClientConfig(t);this.iframe=new window.Payone.ClientApi.HostedIFrames(e,n);let r=document.getElementById("savedpseudocardpan"),a=document.getElementById("confirmOrderForm");r&&r.addEventListener("change",this._handleChangeSavedCard.bind(this)),a&&a.addEventListener("submit",this._handleOrderSubmit.bind(this))})}getSelectStyle(){return["width: 100%","padding: .5625rem","color: #8798a9","vertical-align: middle","line-height: 1.5","font-weight: 500","background-color: #fff","border: none","border-radius: 3px"]}getFieldStyle(){return["width: 100%","height: 100%","padding: .5625rem","color: #8798a9","vertical-align: middle","line-height: 1.5","font-weight: 500","background-color: #fff","border: none","border-radius: .1875rem"]}getClientConfig(e){return{fields:{cardpan:{selector:"cardpan",type:"text",style:this.getFieldStyle().join("; ")},cardcvc2:{selector:"cardcvc2",type:"password",size:"4",maxlength:"4",length:{V:3,M:3,A:4,D:3,J:0,O:3,P:3,U:3},style:this.getFieldStyle().join("; ")},cardexpiremonth:{selector:"cardexpiremonth",type:"select",size:"2",maxlength:"2",style:this.getSelectStyle().join("; ")},cardexpireyear:{selector:"cardexpireyear",type:"select",style:this.getSelectStyle().join("; ")}},language:window.Payone.ClientApi.Language[e],defaultStyle:{iframe:{height:"100%",width:"100%"}},autoCardtypeDetection:{supportedCardtypes:h.options.supportedCardtypes,callback:this._cardDetectionCallback}}}_cardDetectionCallback(e){if("-"===e||"?"===e)return;let t="https://cdn.pay1.de/cc/"+e.toLowerCase()+"/xl/default.png",n=document.getElementById("errorOutput"),r=document.getElementById("card-logo");r.setAttribute("src",t),n.style.display="none",r.style.display="block"}_createScript(e){let t=document.createElement("script");t.type="text/javascript",t.src="https://secure.pay1.de/client-api/js/v1/payone_hosted.js",t.addEventListener("load",e.bind(this),!1),document.head.appendChild(t)}_handleOrderSubmit(e){document.getElementById("errorOutput").style.display="none";let t=document.getElementById("savedpseudocardpan");if(t&&t.value.length>0)return!0;if(!this.iframe.isComplete()){let t=document.getElementById("iframeErrorOutput");return this.iframeFieldCheckerStarted||setInterval(()=>{this.iframe.isComplete()?t.style.display="none":t.style.display="block"},250),this.iframeFieldCheckerStarted=!0,this._handleOrderFormError(e),!1}if(this.orderFormDisabled)return window.payoneCreditCardCheckCallback=this._payoneCheckCallback.bind(this),this.iframe.creditCardCheck("payoneCreditCardCheckCallback"),this._handleOrderFormError(e),!1}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_handleChangeSavedCard(){let e=document.getElementById("savedpseudocardpan"),t=e.options[e.selectedIndex];if(t.value){var n;[...document.getElementsByClassName("credit-card-input")].forEach(function(e){e.classList.add("hide")}),((n=t.dataset.cardHolder)===null||void 0===n?void 0:n.length)?document.getElementById("creditCardHolder").value=t.dataset.cardHolder:document.getElementById("card-holder-input-wrapper").classList.remove("hide")}else[...document.getElementsByClassName("credit-card-input")].forEach(function(e){e.classList.remove("hide")})}_payoneCheckCallback(e){if("VALID"===e.status)document.getElementById("pseudocardpan").value=e.pseudocardpan,document.getElementById("truncatedcardpan").value=e.truncatedcardpan,document.getElementById("cardexpiredate").value=e.cardexpiredate,document.getElementById("cardtype").value=e.cardtype,this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit();else{let t=document.getElementById("confirmFormSubmit"),n=document.getElementById("errorOutput");t.removeAttribute("disabled"),n.innerHTML=e.errormessage,n.style.display="block"}}}h.options={supportedCardtypes:["#","V","A","M","D","J","O","U","P"]};let m="js-pseudo-modal";class p{open(e){this._hideExistingModal(),this._create(),this._open(e)}close(){let e=this.getModal();this._modalInstance=bootstrap.Modal.getInstance(e),this._modalInstance.hide()}getModal(){return this._modal||this._create(),this._modal}updatePosition(){this._modalInstance.handleUpdate()}updateContent(e,t){this._content=e,this._setModalContent(e),this.updatePosition(),"function"==typeof t&&t.bind(this)()}_hideExistingModal(){try{let e=a.querySelector(document,".".concat(m," .modal"),!1);if(!e)return;let t=bootstrap.Modal.getInstance(e);if(!t)return;t.hide()}catch(e){console.warn("[PseudoModalUtil] Unable to hide existing pseudo modal before opening pseudo modal: ".concat(e.message))}}_open(e){this.getModal(),this._modal.addEventListener("hidden.bs.modal",this._modalWrapper.remove),this._modal.addEventListener("shown.bs.modal",e),this._modalInstance.show()}_create(){this._modalMarkupEl=a.querySelector(document,this._templateSelector),this._createModalWrapper(),this._modalWrapper.innerHTML=this._content,this._modal=this._createModalMarkup(),this._modalInstance=new bootstrap.Modal(this._modal,{backdrop:this._useBackdrop}),document.body.insertAdjacentElement("beforeend",this._modalWrapper)}_createModalWrapper(){this._modalWrapper=a.querySelector(document,".".concat(m),!1),this._modalWrapper||(this._modalWrapper=document.createElement("div"),this._modalWrapper.classList.add(m))}_createModalMarkup(){let e=a.querySelector(this._modalWrapper,".modal",!1);if(e)return e;let t=this._modalWrapper.innerHTML;return this._modalWrapper.innerHTML=this._modalMarkupEl.innerHTML,this._setModalContent(t),a.querySelector(this._modalWrapper,".modal")}_setModalTitle(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";try{a.querySelector(this._modalWrapper,this._templateTitleSelector).innerHTML=e}catch(e){}}_setModalContent(e){let t=a.querySelector(this._modalWrapper,this._templateContentSelector);t.innerHTML=e;try{let e=a.querySelector(t,this._templateTitleSelector);e&&(this._setModalTitle(e.innerHTML),e.parentNode.removeChild(e))}catch(e){}}constructor(e,t=!0,n=".".concat("js-pseudo-modal-template"),r=".".concat("js-pseudo-modal-template-content-element"),a=".".concat("js-pseudo-modal-template-title-element")){this._content=e,this._useBackdrop=t,this._templateSelector=n,this._templateContentSelector=r,this._templateTitleSelector=a}}class y{static isTouchDevice(){return"ontouchstart"in document.documentElement}static isIOSDevice(){return y.isIPhoneDevice()||y.isIPadDevice()}static isNativeWindowsBrowser(){return y.isIEBrowser()||y.isEdgeBrowser()}static isIPhoneDevice(){return!!navigator.userAgent.match(/iPhone/i)}static isIPadDevice(){return!!navigator.userAgent.match(/iPad/i)}static isIEBrowser(){return -1!==navigator.userAgent.toLowerCase().indexOf("msie")||!!navigator.userAgent.match(/Trident.*rv:\d+\./)}static isEdgeBrowser(){return!!navigator.userAgent.match(/Edge\/\d+/i)}static getList(){return{"is-touch":y.isTouchDevice(),"is-ios":y.isIOSDevice(),"is-native-windows":y.isNativeWindowsBrowser(),"is-iphone":y.isIPhoneDevice(),"is-ipad":y.isIPadDevice(),"is-ie":y.isIEBrowser(),"is-edge":y.isEdgeBrowser()}}}let g="modal-backdrop",_="modal-backdrop-open",v="no-scroll",b={ON_CLICK:"backdrop/onclick"};class f{create(e){this._removeExistingBackdrops(),document.body.insertAdjacentHTML("beforeend",this._getTemplate());let t=document.body.lastChild;document.documentElement.classList.add(v),setTimeout(function(){t.classList.add(_),"function"==typeof e&&e()},75),this._dispatchEvents()}remove(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:350,t=this._getBackdrops();s.iterate(t,e=>e.classList.remove(_)),setTimeout(this._removeExistingBackdrops.bind(this),e),document.documentElement.classList.remove(v)}_dispatchEvents(){let e=y.isTouchDevice()?"touchstart":"click";document.addEventListener(e,function(e){e.target.classList.contains(g)&&document.dispatchEvent(new CustomEvent(b.ON_CLICK))})}_getBackdrops(){return document.querySelectorAll(".".concat(g))}_removeExistingBackdrops(){if(!1===this._exists())return;let e=this._getBackdrops();s.iterate(e,e=>e.remove())}_exists(){return document.querySelectorAll(".".concat(g)).length>0}_getTemplate(){return'<div class="'.concat(g,'"></div>')}constructor(){return f.instance||(f.instance=this),f.instance}}let E=Object.freeze(new f);class I{static create(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;E.create(e)}static remove(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:350;E.remove(e)}static SELECTOR_CLASS(){return g}}let S=Object.freeze(new class extends c{create(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];!this.exists()&&e&&(I.create(),document.querySelector(".".concat(I.SELECTOR_CLASS())).insertAdjacentHTML("beforeend",c.getTemplate()))}remove(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];super.remove(),e&&I.remove()}constructor(){super(document.body)}});class C{static create(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];S.create(e)}static remove(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];S.remove(e)}}class w{get(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"application/json",r=this._createPreparedRequest("GET",e,n);return this._sendRequest(r,null,t)}post(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("POST",e,r);return this._sendRequest(a,t,n)}delete(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("DELETE",e,r);return this._sendRequest(a,t,n)}patch(e,t,n){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let a=this._createPreparedRequest("PATCH",e,r);return this._sendRequest(a,t,n)}abort(){if(this._request)return this._request.abort()}_registerOnLoaded(e,t){t&&e.addEventListener("loadend",()=>{t(e.responseText,e)})}_sendRequest(e,t,n){return this._registerOnLoaded(e,n),e.send(t),e}_getContentType(e,t){return e instanceof FormData&&(t=!1),t}_createPreparedRequest(e,t,n){return this._request=new XMLHttpRequest,this._request.open(e,t),this._request.setRequestHeader("X-Requested-With","XMLHttpRequest"),n&&this._request.setRequestHeader("Content-type",n),this._request}constructor(){this._request=null}}class B extends o{init(){this.orderFormDisabled=!0,this._client=new w,document.getElementById("confirmOrderForm").addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){document.getElementById("errorOutput").style.display="none",this.orderFormDisabled&&(this._handleOrderFormError(e),this._getModal(e))}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_getModal(e){e.preventDefault(),C.create();let t=this._getRequestData();this._client.abort(),this._client.post(this._getManageMandateUrl(),JSON.stringify(t),e=>this._openModal(e))}_submitForm(){this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit()}_openModal(e){if((e=JSON.parse(e)).error){let t=document.getElementById("errorOutput");t.innerHTML=e.error,t.style.display="block",C.remove();return}if("active"===e.mandate.Status){this._submitForm();return}let t=new p(e.modal_content);t.open(this._onOpen.bind(this,t))}_onOpen(e){e.getModal().classList.add("payone-debit-mandate-modal"),window.PluginManager.initializePlugins(),this._registerEvents(),C.remove()}_getRequestData(){return{iban:document.getElementById("iban").value}}_getManageMandateUrl(){return document.getElementById("payone-configuration").getAttribute("data-manage-mandate-url")}_registerEvents(){document.getElementById("mandateSubmit").addEventListener("click",this._onMandateSubmit.bind(this))}_onMandateSubmit(){document.getElementById("accept-mandate").checked&&this._submitForm()}}B.options={editorModalClass:"payone-debit-modal"};class L extends o{init(){null===this.options.supportedNetworks&&(this.options.supportedNetworks=[]),this._httpClient=new w,this.validateMerchantUrl=this.el.dataset.validateMerchantUrl,this.processPaymentUrl=this.el.dataset.processPaymentUrl,this.orderForm=a.querySelector(document,"#confirmOrderForm"),this._registerEventHandler()}createSession(){try{this.session=new ApplePaySession(3,this.options)}catch(e){this.handleErrorOnPayment();return}this.session.addEventListener("validatemerchant",this.validateMerchant.bind(this)),this.session.addEventListener("paymentauthorized",this.authorizePayment.bind(this))}performPayment(){this.session.begin()}validateMerchant(e){let t=e.validationURL;this._httpClient.abort(),this._httpClient.post(this.validateMerchantUrl,JSON.stringify({validationUrl:t}),e=>{let t=null;try{t=JSON.parse(e)}catch(e){this.handleErrorOnPayment();return}if(!t||!t.merchantSessionIdentifier||!t.signature){this.handleErrorOnPayment();return}this.session.completeMerchantValidation(t)})}handleErrorOnPayment(){let e=a.querySelector(document,"#payone-apple-pay-error");e.style.display="block",e.scrollIntoView({block:"start"})}authorizePayment(e){let t=a.querySelector(this.orderForm,"input[name='orderId']").value;this._httpClient.abort(),this._httpClient.post(this.processPaymentUrl,JSON.stringify({token:e.payment.token,orderId:t}),e=>{this.completePayment(e),this.orderForm.submit()})}completePayment(e){let t="",n="",r="";try{let a=JSON.parse(e);n=a.status,t=a.txid,r=a.userid}catch(e){this.orderForm.submit()}this.updateFormData(n,t,r,e),("APPROVED"===n||"PENDING"===n)&&this.session.completePayment({status:ApplePaySession.STATUS_SUCCESS,errors:[]}),this.orderForm.submit()}updateFormData(e,t,n,r){a.querySelector(this.orderForm,"input[name='status']").value=e,a.querySelector(this.orderForm,"input[name='txid']").value=t,a.querySelector(this.orderForm,"input[name='userid']").value=n,a.querySelector(this.orderForm,"input[name='response']").value=r}_handleApplePayButtonClick(){this.orderForm.reportValidity()&&(this.createSession(),this.performPayment())}_registerEventHandler(){this.el.addEventListener("click",this._handleApplePayButtonClick.bind(this))}}L.options={countryCode:"",currencyCode:"",supportedNetworks:[],merchantCapabilities:["supports3DS","supportsDebit","supportsCredit"],total:{label:"",type:"final",amount:"0.01"}};class O extends o{init(){this._client=new w,this.ratepayRateInput=a.querySelector(document,this.options.ratepayRateInputSelector),this.calculateInstallmentBtn=a.querySelector(document,this.options.calculateInstallmentBtnSelector),this.ratepayRuntimeInput=a.querySelector(document,this.options.ratepayRuntimeInputSelector),this.ratepayIbanContainer=a.querySelector(document,this.options.ratepayIbanContainerSelector),this.ratepayIbanInput=a.querySelector(document,this.options.ratepayIbanInputSelector),this._registerEventListeners(),this._handleInstallmentRuntimeChange()}_registerEventListeners(){this.calculateInstallmentBtn&&this.calculateInstallmentBtn.addEventListener("click",this._handleCalculateInstallmentButtonClick.bind(this)),this.ratepayRuntimeInput&&this.ratepayRuntimeInput.addEventListener("change",this._handleInstallmentRuntimeChange.bind(this)),document.querySelector(this.options.ratepayIbanContainerSelector).addEventListener("shown.bs.collapse",()=>this.ratepayIbanInput.required=!0),document.querySelector(this.options.ratepayIbanContainerSelector).addEventListener("hidden.bs.collapse",()=>this.ratepayIbanInput.required=!1)}_handleCalculateInstallmentButtonClick(){let e=this.ratepayRateInput.value;this._sendRequest("rate",e)}_handleInstallmentRuntimeChange(){let e=a.querySelector(document,this.options.ratepayRuntimeInputSelector).value;this._sendRequest("time",e)}_sendRequest(e,t){let n=JSON.stringify({ratepayInstallmentType:e,ratepayInstallmentValue:t});this._client.abort(),this._client.post("/payone/ratepay/installment/calculation",n,e=>this._handleCalculationCallback(e))}_handleCalculationCallback(e){this._replaceCalculationContent(e)}_replaceCalculationContent(e){a.querySelector(document,this.options.ratepayInstallmentPlanContainerSelector).innerHTML=e,this.ratepayInstallmentTable=a.querySelector(document,this.options.ratepayInstallmentTableSelector),this.ratepayRuntimeInput.value=this.ratepayInstallmentTable.dataset.ratepayNumberOfRates,this.ratepayRateInput.value=this.ratepayInstallmentTable.dataset.ratepayRate}}O.options={ratepayRateInputSelector:"#ratepayRate",ratepayRuntimeInputSelector:"#ratepayRuntime",calculateInstallmentBtnSelector:"#payone-ratepay-calculate-installment-btn",ratepayInstallmentPlanContainerSelector:"#payone-ratepay-installment-plan",ratepayIbanContainerSelector:"#ratepayIbanContainer",ratepayIbanInputSelector:"#ratepayIban",ratepayInstallmentTableSelector:"#ratepayInstallmentTable"};class P extends o{init(){window.klarnaAsyncCallback=this._initKlarnaWidget.bind(this);let e=document.createElement("script");e.src="https://x.klarnacdn.net/kp/lib/v1/api.js",document.body.appendChild(e),this.orderForm=document.getElementById(this.options.selectorFormId),this.confirmFormSubmit=this.orderForm.querySelector("button[type=submit]"),this._registerEventListeners()}_initKlarnaWidget(){Klarna.Payments.init({client_token:this.options.clientToken}),Klarna.Payments.load({container:this.options.selectorContainer,payment_method_category:this.options.paymentMethodIdentifier},e=>{new u(this.confirmFormSubmit).remove()})}_registerEventListeners(){this.orderForm&&this.orderForm.addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){e.preventDefault(),Klarna.Payments.authorize({payment_method_category:this.options.paymentMethodIdentifier},{},e=>{e.approved&&e.authorization_token?(document.querySelector(this.options.selectorTokenInput).value=e.authorization_token,this.orderForm.submit()):e.show_form?new u(this.confirmFormSubmit).remove():e.show_form||(window.location.href=window.location.href)})}}P.options={clientToken:null,paymentMethodIdentifier:null,selectorContainer:null,selectorTokenInput:'input[name="payoneKlarnaAuthorizationToken"]',selectorFormId:"confirmOrderForm"},P.orderForm=null,P.confirmFormSubmit=null;class k extends o{init(){if("amazon"in window)this.onLoad();else{var e=document.createElement("script");e.type="text/javascript",e.src="https://static-eu.payments-amazon.com/checkout.js",e.onload=this.onLoad.bind(this),document.head.appendChild(e)}}onLoad(){}}class M extends k{onLoad(){window.amazon.Pay.renderButton("#"+this.el.id,this.options)}}let F="element-loader-backdrop";class q extends c{static create(e){e.classList.add("has-element-loader"),q.exists(e)||(q.appendLoader(e),setTimeout(()=>{let t=e.querySelector(".".concat(F));t&&t.classList.add("element-loader-backdrop-open")},1))}static remove(e){e.classList.remove("has-element-loader");let t=e.querySelector(".".concat(F));t&&t.remove()}static exists(e){return e.querySelectorAll(".".concat(F)).length>0}static getTemplate(){return'\n        <div class="'.concat(F,'">\n            <div class="loader" role="status">\n                <span class="').concat("visually-hidden",'">Loading...</span>\n            </div>\n        </div>\n        ')}static appendLoader(e){e.insertAdjacentHTML("beforeend",q.getTemplate())}}PluginManager.register("PayonePaymentAmazonPayExpressButton",M,"[data-payone-payment-amazon-pay-express-button]"),PluginManager.register("PayonePaymentAmazonPayRedirect",class extends M{init(){q.create(document.querySelector(".content-main")),super.init()}onLoad(){super.onLoad(),document.querySelector("#"+this.el.id).dispatchEvent(new CustomEvent("click"))}},"[data-payone-payment-amazon-pay-redirect]");let T=window.PluginManager;T.register("PayonePaymentCreditCard",h,"[data-is-payone-credit-card]"),T.register("PayonePaymentDebitCard",B,"[data-is-payone-debit-card]"),T.register("PayonePaymentPayolutionInvoicing",class extends o{init(){this.orderFormDisabled=!0,this._client=new w,this._registerEventListeners()}_registerEventListeners(){let e=document.getElementById("confirmOrderForm");e&&e.addEventListener("submit",this._handleOrderSubmit.bind(this))}_handleOrderSubmit(e){this._hideErrorBox(),this.orderFormDisabled&&(this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),e.defaultPrevented||(this._validatePaymentAcceptance(),e.preventDefault()))}_validateField(e,t){let n=document.getElementById(t);if(n.checked){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),e.preventDefault()}_validateInput(e,t){let n=document.getElementById(t);if(n.value){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),e.preventDefault()}_validatePaymentAcceptance(){let e=JSON.stringify(this._getRequestData());C.create(),this._client.abort(),this._client.post(this._getValidateUrl(),e,e=>this._handleValidateResponse(e))}_handleValidateResponse(e){if(e=JSON.parse(e),C.remove(),"OK"!==e.status)this._showErrorBox();else{let t=document.getElementById("payoneWorkOrder");t&&(t.value=e.workorderid),this._submitForm()}}_getValidateUrl(){return document.getElementById("payone-configuration").getAttribute("data-validate-url")}_showErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!1)}_hideErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!0)}_submitForm(){this.orderFormDisabled=!1,document.getElementById("confirmOrderForm").submit()}_getRequestData(){return{payoneBirthday:document.getElementById("payoneBirthday").value}}},"[data-is-payone-payolution-invoicing]"),T.register("PayonePaymentPayolutionInstallment",class extends o{init(){this.orderFormDisabled=!0,this._client=new w,this._disableSubmitButton(),this._registerEventListeners()}_registerEventListeners(){let e=document.getElementById("confirmOrderForm"),t=document.getElementById("checkInstallmentButton");e&&e.addEventListener("submit",this._handleOrderSubmit.bind(this)),t&&t.addEventListener("click",this._handleCalculationButtonClick.bind(this))}_handleCalculationButtonClick(e){if(this._hideErrorBox(),this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),e.defaultPrevented)return;C.create();let t=JSON.stringify(this._getRequestData());this._client.abort(),this._client.post(this._getCalculationUrl(),t,e=>this._handleCalculationCallback(e))}_handleCalculationCallback(e){if(e=JSON.parse(e),C.remove(),"OK"!==e.status){this._showErrorBox();return}let t=document.getElementById("payoneWorkOrder"),n=document.getElementById("payoneCartHash");t.value=e.workorderid,n.value=e.carthash,this._displayInstallmentSelection(e),this._displayCalculationOverview(e),this._registerSelectionEventListeners(),this._enableSecondStep(),this._activateSubmitButton(),this._hideCheckInstallmentButton()}_hideCheckInstallmentButton(){let e=document.getElementById("checkInstallmentButton");e&&e.classList.add("hidden")}_registerSelectionEventListeners(){document.getElementById("payolutionInstallmentDuration").addEventListener("change",function(e){let t=e.target.value;document.querySelectorAll(".installmentDetail").forEach(function(e){e.dataset.duration===t?e.hidden=!1:e.hidden="hidden"})})}_showErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!1)}_hideErrorBox(){let e=document.getElementById("payolutionErrorContainer");e&&(e.hidden=!0)}_enableSecondStep(){document.querySelectorAll(".payolution-installment .hidden").forEach(function(e){e.classList.remove("hidden")})}_displayInstallmentSelection(e){let t=document.getElementById("installmentSelection");t&&(t.innerHTML=e.installmentSelection)}_displayCalculationOverview(e){let t=document.getElementById("calculationOverview");t&&(t.innerHTML=e.calculationOverview)}_handleOrderSubmit(e){this._validateField(e,"payolutionConsent"),this._validateInput(e,"payoneBirthday"),this._validateInput(e,"payolutionAccountOwner"),this._validateInput(e,"payolutionIban"),this._validateInput(e,"payolutionBic"),this._validateInput(e,"payolutionInstallmentDuration")}_disableSubmitButton(){this.orderFormDisabled=!0;let e=document.getElementById("confirmFormSubmit");e&&e.setAttribute("disabled","disabled")}_activateSubmitButton(){this.orderFormDisabled=!1;let e=document.getElementById("confirmFormSubmit");e&&e.removeAttribute("disabled")}_getCalculationUrl(){return document.getElementById("payone-configuration").getAttribute("data-calculation-url")}_validateField(e,t){let n=document.getElementById(t);if(n.checked){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),this._handleOrderFormError(e)}_validateInput(e,t){let n=document.getElementById(t);if(n.value){n.classList.remove("is-invalid");return}n.scrollIntoView({block:"start",behavior:"smooth"}),n.classList.add("is-invalid"),this._handleOrderFormError(e)}_handleOrderFormError(e){let t=document.getElementById("confirmFormSubmit");if(e.preventDefault(),t){let e=new u(t);t.disabled=!1,e.remove()}}_getRequestData(){let e=document.getElementById("payoneBirthday"),t=document.getElementById("payoneWorkOrder"),n=document.getElementById("payoneCartHash");return{payoneBirthday:e.value,workorder:t.value,carthash:n.value}}},"[data-is-payone-payolution-installment]"),T.register("PayonePaymentApplePay",L,"[data-payone-payment-apple-pay-options]"),T.register("PayonePaymentRatepayInstallment",O,"[data-is-payone-ratepay-installment]"),T.register("PayonePaymentKlarna",P,"[data-payone-payment-klarna]")})()})();
\ No newline at end of file
diff --git a/src/Resources/app/storefront/src/credit-card/payone-payment.credit-card.js b/src/Resources/app/storefront/src/credit-card/payone-payment.credit-card.js
index a78c55d9d..4281fc56f 100644
--- a/src/Resources/app/storefront/src/credit-card/payone-payment.credit-card.js
+++ b/src/Resources/app/storefront/src/credit-card/payone-payment.credit-card.js
@@ -211,10 +211,18 @@ export default class PayonePaymentCreditCard extends Plugin {
     _handleChangeSavedCard() {
         const savedCardPan = document.getElementById('savedpseudocardpan');
 
-        if (savedCardPan.options[savedCardPan.selectedIndex].value) {
+        const selectedOption = savedCardPan.options[savedCardPan.selectedIndex];
+        if (selectedOption.value) {
             [...document.getElementsByClassName('credit-card-input')].forEach(function(element) {
                 element.classList.add('hide')
             });
+
+            if (!selectedOption.dataset.cardHolder?.length) {
+                document.getElementById('card-holder-input-wrapper').classList.remove('hide');
+            } else {
+                // TODO-card-holder-requirement: remove the next line (please see credit-card handler)
+                document.getElementById('creditCardHolder').value = selectedOption.dataset.cardHolder;
+            }
         } else {
             [...document.getElementsByClassName('credit-card-input')].forEach(function(element) {
                 element.classList.remove('hide');
diff --git a/src/Resources/snippet/de_DE/messages.de-DE.json b/src/Resources/snippet/de_DE/messages.de-DE.json
index 26d6b0743..ca428d5b3 100644
--- a/src/Resources/snippet/de_DE/messages.de-DE.json
+++ b/src/Resources/snippet/de_DE/messages.de-DE.json
@@ -14,6 +14,7 @@
         },
         "creditCard": {
             "newCard": "Eine neue Kreditkarte verwenden",
+            "cardHolder": "Karteninhaber",
             "cardNumber": "Kartennummer",
             "securityCode": "CVV",
             "expiryDate": "Gültig bis",
@@ -32,6 +33,7 @@
             "pageTitle": "Gespeicherte Kreditkarten",
             "pageSubTitle": "Hier können Sie die gespeicherten Kreditkarten verwalten.",
             "tableHeader": "Kartennummer",
+            "tableHeaderCardHolder": "Karteninhaber",
             "deleteButton": "Karte löschen",
             "noEntries": "Keine Kreditkarten vorhanden.",
             "expired": "abgelaufen",
diff --git a/src/Resources/snippet/en_GB/messages.en-GB.json b/src/Resources/snippet/en_GB/messages.en-GB.json
index a8a785d46..161af5ba1 100644
--- a/src/Resources/snippet/en_GB/messages.en-GB.json
+++ b/src/Resources/snippet/en_GB/messages.en-GB.json
@@ -14,6 +14,7 @@
         },
         "creditCard": {
             "newCard": "Use a new credit card",
+            "cardHolder": "Card holder",
             "cardNumber": "Card number",
             "securityCode": "Security code",
             "expiryDate": "Expiry date",
@@ -32,6 +33,7 @@
             "pageTitle": "Saved Cards",
             "pageSubTitle": "Here you can manage your saved credit cards.",
             "tableHeader": "Card Numbers",
+            "tableHeaderCardHolder": "Karteninhaber",
             "deleteButton": "Delete Card",
             "noEntries": "No cards saved.",
             "expired": "expired",
diff --git a/src/Resources/views/storefront/payone/account/card.html.twig b/src/Resources/views/storefront/payone/account/card.html.twig
index 45c39d22a..7c92f075c 100644
--- a/src/Resources/views/storefront/payone/account/card.html.twig
+++ b/src/Resources/views/storefront/payone/account/card.html.twig
@@ -25,6 +25,7 @@
                             <thead>
                                 <tr>
                                     {% block page_payone_account_card_table_header %}
+                                        <th scope="col">{{ "PayonePayment.cardPage.tableHeaderCardHolder" | trans }}</th>
                                         <th scope="col">{{ "PayonePayment.cardPage.tableHeader" | trans }}</th>
                                         <th scope="col">&nbsp;</th>
                                     {% endblock %}
@@ -34,6 +35,7 @@
                                 {% for card in page.cards %}
                                     {% block page_payone_account_card_table_line %}
                                         <tr>
+                                            <td>{{ card.cardHolder }}</td>
                                             <td>
                                                 {% if card.expiresAt <= date() %}<strike>{% endif %}{{ card.truncatedCardPan }}{% if card.expiresAt <= date() %}</strike>{% endif %}
                                                 {% if card.expiresAt <= date() %}
diff --git a/src/Resources/views/storefront/payone/credit-card/credit-card-form.html.twig b/src/Resources/views/storefront/payone/credit-card/credit-card-form.html.twig
index da848745e..7badc8bea 100644
--- a/src/Resources/views/storefront/payone/credit-card/credit-card-form.html.twig
+++ b/src/Resources/views/storefront/payone/credit-card/credit-card-form.html.twig
@@ -16,14 +16,15 @@
                 {% if page.extensions.payone.savedCards.total > 0 %}
                     <div class="row">
                         <div class="col-md-6">
-                            <label class="form-label" for="savedPseudoCardPan">{{ "PayonePayment.creditCard.savedCards" | trans }}</label>
+                            <label class="form-label" for="savedpseudocardpan">{{ "PayonePayment.creditCard.savedCards" | trans }}</label>
                             <select class="form-control" id="savedpseudocardpan" name="{{ constant('PayonePayment\\PaymentHandler\\PayoneCreditCardPaymentHandler::REQUEST_PARAM_SAVED_PSEUDO_CARD_PAN') }}" form="confirmOrderForm">
                                 <option value="">{{ "PayonePayment.creditCard.newCard" | trans }}</option>
 
                                 {% for card in page.extensions.payone.savedCards %}
                                     {% if card.expiresAt > date() %}
-                                        <option value="{{ card.pseudoCardPan }}">
-                                            {{ card.truncatedCardPan }}
+                                        {# TODO-card-holder-requirement: remove "data-card-holder" (please see credit-card handler) #}
+                                        <option value="{{ card.pseudoCardPan }}" data-card-holder="{{ card.cardHolder }}">
+                                            {% if card.cardHolder %}{{ card.cardHolder }} / {% endif %}{{ card.truncatedCardPan }}
                                             ({{ "PayonePayment.cardPage.expiresAt" | trans({'%expiresAt%': card.expiresAt | format_date('medium')}) }})
                                         </option>
                                     {% endif %}
@@ -33,6 +34,13 @@
                     </div>
                 {% endif %}
 
+                <div class="row credit-card-input" id="card-holder-input-wrapper">
+                    <div class="col-md-6">
+                        <label class="form-label" for="creditCardHolder">{{ "PayonePayment.creditCard.cardHolder" | trans }}</label>
+                        <input class="form-control" type="text" id="creditCardHolder" name="{{ constant('PayonePayment\\PaymentHandler\\PayoneCreditCardPaymentHandler::REQUEST_PARAM_CARD_HOLDER') }}" form="confirmOrderForm">
+                    </div>
+                </div>
+
                 <div class="row credit-card-input">
                     <div class="col-md-4">
                         <label class="form-label" for="cardpanInput">{{ "PayonePayment.creditCard.cardNumber" | trans }}</label>
@@ -63,7 +71,7 @@
                 </div>
 
                 {% if context.customer and not context.customer.guest %}
-                    <div class="row">
+                    <div class="row credit-card-input">
                         <div class="col-md-6">
                             <input type="checkbox"
                                    name="{{ constant('PayonePayment\\PaymentHandler\\PayoneCreditCardPaymentHandler::REQUEST_PARAM_SAVE_CREDIT_CARD') }}"
diff --git a/tests/PaymentHandler/PayoneCreditCardPaymentHandlerTest.php b/tests/PaymentHandler/PayoneCreditCardPaymentHandlerTest.php
index 24241173a..882401584 100644
--- a/tests/PaymentHandler/PayoneCreditCardPaymentHandlerTest.php
+++ b/tests/PaymentHandler/PayoneCreditCardPaymentHandlerTest.php
@@ -70,6 +70,7 @@ public function testItPerformsPaymentAndSavesCard(): void
     {
         $salesChannelContext = $this->createSalesChannelContextWithLoggedInCustomerAndWithNavigation();
         $dataBag = $this->getDataBag([
+            PayoneCreditCardPaymentHandler::REQUEST_PARAM_CARD_HOLDER => 'the-card-holder',
             PayoneCreditCardPaymentHandler::REQUEST_PARAM_TRUNCATED_CARD_PAN => 'the-card-pan',
             PayoneCreditCardPaymentHandler::REQUEST_PARAM_PSEUDO_CARD_PAN => 'the-pseudo-card-pan',
             PayoneCreditCardPaymentHandler::REQUEST_PARAM_CARD_TYPE => 'the-card-type',
@@ -88,6 +89,7 @@ public function testItPerformsPaymentAndSavesCard(): void
         $cardRepository = $this->createMock(CardRepositoryInterface::class);
         $cardRepository->expects(static::once())->method('saveCard')->with(
             $salesChannelContext->getCustomer(),
+            'the-card-holder',
             'the-card-pan',
             'the-pseudo-card-pan',
             'the-card-type',
@@ -211,7 +213,11 @@ public function testItPerformsPaymentWithSavedCard(): void
         );
 
         $savedCard = new PayonePaymentCardEntity();
-        $savedCard->setCardType('the-card-type');
+        $savedCard->assign([
+            'cardType' => 'the-card-type',
+            'cardHolder' => 'the-card-holder',
+        ]);
+
         $cardRepository = $this->createMock(CardRepositoryInterface::class);
         $cardRepository->expects(static::never())->method('saveCard');
         $cardRepository->expects(static::once())->method('getExistingCard')->willReturn($savedCard);