Skip to content

A
Adyen Magento2
Commit 77373c29 authored by cyattilakiss's avatar cyattilakiss Committed by GitHub
Browse files
Options

Merge pull request #474 from Adyen/PW-1368 

PW-1368 Upgrade components version to 3.0.0
parents a2a393c6 57e7dcc3
Show whitespace changes
Inline Side-by-side
Showing with 1584 additions and 1425 deletions
Block/Form/Cc.php
View file @ 77373c29
......@@ -87,9 +87,9 @@ class Cc extends \Magento\Payment\Block\Form\Cc
/**
* @return string
*/
public function getCheckoutContextUrl()
public function getCheckoutEnvironment()
{
return $this->adyenHelper->getCheckoutContextUrl($this->checkoutSession->getQuote()->getStore()->getId());
return $this->adyenHelper->getCheckoutEnvironment($this->checkoutSession->getQuote()->getStore()->getId());
}
/**
......
Helper/Data.php
View file @ 77373c29
......@@ -33,10 +33,8 @@ class Data extends AbstractHelper
const MODULE_NAME = 'adyen-magento2';
const TEST = 'test';
const LIVE = 'live';
const CHECKOUT_CONTEXT_URL_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/';
const CHECKOUT_CONTEXT_URL_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/';
const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/2.5.0/adyen.js';
const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/2.5.0/adyen.js';
const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
/**
* @var \Magento\Framework\Encryption\EncryptorInterface
......@@ -1549,13 +1547,13 @@ class Data extends AbstractHelper
* @param int|null $storeId
* @return string
*/
public function getCheckoutContextUrl($storeId = null)
public function getCheckoutEnvironment($storeId = null)
{
if ($this->isDemoMode($storeId)) {
return self::CHECKOUT_CONTEXT_URL_TEST;
return self::TEST;
}
return self::CHECKOUT_CONTEXT_URL_LIVE;
return self::LIVE;
}
/**
......
Model/Ui/AdyenCcConfigProvider.php
View file @ 77373c29
......@@ -146,7 +146,7 @@ class AdyenCcConfigProvider implements ConfigProviderInterface
$config['payment']['adyenCc']['icons'] = $this->getIcons();
$config['payment']['adyenCc']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
$config['payment']['adyenCc']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->storeManager->getStore()->getId());
$config['payment']['adyenCc']['checkoutEnvironment'] = $this->_adyenHelper->getCheckoutEnvironment($this->storeManager->getStore()->getId());
// has installments by default false
$config['payment']['adyenCc']['hasInstallments'] = false;
......
Model/Ui/AdyenOneclickConfigProvider.php
View file @ 77373c29
......@@ -143,7 +143,7 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
$config['payment']['adyenOneclick']['methodCode'] = self::CODE;
$config['payment']['adyenOneclick']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
$config['payment']['adyenOneclick']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->_storeManager->getStore()->getId());
$config['payment']['adyenOneclick']['checkoutEnvironment'] = $this->_adyenHelper->getCheckoutEnvironment($this->_storeManager->getStore()->getId());
$config['payment']['adyenOneclick']['locale'] = $this->_adyenHelper->getStoreLocale($this->_storeManager->getStore()->getId());
$enableOneclick = $this->_adyenHelper->getAdyenAbstractConfigData('enable_oneclick');
......
view/adminhtml/templates/form/cc.phtml
View file @ 77373c29
......@@ -113,7 +113,7 @@ echo $code; ?>" style="display:none">
var card = checkout.create('card', {
originKey: "<?php echo $block->getCheckoutOriginKeys(); ?>",
loadingContext: "<?php echo $block->getCheckoutContextUrl(); ?>",
environment: "<?php echo $block->getCheckoutEnvironment(); ?>",
type: 'card',
groupTypes: ccTypes,
hideCVC: hideCVC,
......@@ -122,13 +122,17 @@ echo $code; ?>" style="display:none">
// When the state is valid update the input fields
if (state.isValid) {
// Here we enable the button if the component is now valid
jQuery("#<?php /* @noEscape */ echo $code; ?>-number").val(state.data.encryptedCardNumber);
jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryMonth").val(state.data.encryptedExpiryMonth);
jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryYear").val(state.data.encryptedExpiryYear);
jQuery("#<?php /* @noEscape */ echo $code; ?>-cvc").val(state.data.encryptedSecurityCode);
jQuery("#<?php /* @noEscape */ echo $code; ?>-cc_type").val(getCcCodeByAltCode(state.brand));
jQuery("#<?php /* @noEscape */ echo $code; ?>-number").val(state.data.paymentMethod.encryptedCardNumber);
jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryMonth").val(state.data.paymentMethod.encryptedExpiryMonth);
jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryYear").val(state.data.paymentMethod.encryptedExpiryYear);
jQuery("#<?php /* @noEscape */ echo $code; ?>-cvc").val(state.data.paymentMethod.encryptedSecurityCode);
}
},
onBrand: function (state) {
if (state.isValid) {
jQuery("#<?php /* @noEscape */ echo $code; ?>-cc_type").val(getCcCodeByAltCode(state.brand));
}
}
onError: function () {
}
});
......
view/adminhtml/web/css/order_create_styles.css
View file @ 77373c29
......@@ -66,7 +66,43 @@
display: inline-block;
font-weight: bold;
}
/* Checkout component Adyen styling start */
/* Checkout component Adyen v3.0.0 styling start */
.adyen-checkout__field{
display:block;
margin-bottom:16px
}
.adyen-checkout__field--error input{
border-color:#d10244;
color:#d10244
}
.adyen-checkout__field:last-child{
margin-bottom:0
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#00112c;
display:block;
font-size:.81em;
font-weight:400;
line-height:13px;
padding-bottom:8px
}
.adyen-checkout__helper-text{
color:#687282
}
.adyen-checkout__label__text{
transition:color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text{
color:#06f
}
.adyen-checkout__error-text{
align-items:center;
color:#d10244;
display:flex;
font-size:.75em;
font-weight:400;
margin-top:4px
}
.adyen-checkout__spinner__wrapper{
align-items:center;
display:flex;
......@@ -81,7 +117,7 @@
.adyen-checkout__spinner{
-webkit-animation:rotateSpinner 2s infinite linear;
animation:rotateSpinner 2s infinite linear;
border:2px solid #00a3ff;
border:2px solid #06f;
border-radius:50%;
border-top-color:transparent;
height:43px;
......@@ -119,260 +155,10 @@
transform:rotate(1turn)
}
}
.adyen-checkout__pay-button{
background:#001b2b;
border:0;
border-radius:3px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff;
cursor:pointer;
font-size:1em;
font-weight:700;
height:48px;
padding:15px;
transition:background .3s ease-out;
width:100%
}
.adyen-checkout__pay-button:disabled{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
background:#e6e9eb;
box-shadow:none;
cursor:not-allowed;
user-select:all
}
.adyen-checkout__pay-button--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#4c5f6b;
box-shadow:none;
outline:0;
pointer-events:none;
user-select:none
}
.adyen-checkout__pay-button .adyen-checkout__spinner{
border-color:transparent #fff #fff;
border-width:3px
}
.adyen-checkout__pay-button__content{
align-items:center;
display:flex;
justify-content:center
}
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #edf0f3;
cursor:pointer;
margin-top:-1px;
position:relative;
transition:opacity .3s ease-out;
width:100%
}
.adyen-checkout__payment-method:focus{
outline:0
}
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:3px;
border-top-right-radius:3px;
margin-top:0
}
.adyen-checkout__payment-method--next-selected{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px
}
.adyen-checkout__payment-method--loading{
opacity:.2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
opacity:.9
}
.adyen-checkout__payment-method--disabling{
opacity:.5
}
.adyen-checkout__payment-method__header{
align-items:center;
color:#00202e;
display:flex;
font-size:16px;
font-weight:400;
padding:16px;
position:relative;
transition:background .1s ease-out;
width:100%
}
.adyen-checkout__payment-method__surcharge{
color:#687282;
margin-left:5px
}
.adyen-checkout__payment-method--selected{
background:#f7f8f9;
border:1px solid #d4d9db;
border-radius:3px;
cursor:default;
margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{
font-weight:500
}
.adyen-checkout__payment-method__details{
padding:0 16px 16px
}
.adyen-checkout__payment-method__details__content{
padding:6px 0 24px
}
.adyen-checkout__payment-method__image__wrapper{
height:26px;
position:relative
}
.adyen-checkout__payment-method__image__wrapper:after{
border:1px solid rgba(0,27,43,.17);
border-radius:3px;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__payment-method__image{
border-radius:3px
}
.adyen-checkout__payment-method__disable_oneclick{
background-color:transparent;
border:none;
color:#687282;
cursor:pointer;
display:block;
font-size:13px;
padding:0;
position:absolute;
right:70px;
text-decoration:underline
}
.adyen-checkout__payment-method__disable_oneclick:focus{
color:#00a3ff;
outline:0
}
.adyen-checkout__payment-method__disable-confirmation{
align-items:center;
background:#e6e9eb;
color:#001b2b;
display:flex;
font-size:15px;
justify-content:space-between;
margin-bottom:10px;
padding:8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons{
display:flex
}
.adyen-checkout__payment-method__disable-confirmation__button{
border:1px solid transparent;
border-radius:3px;
cursor:pointer;
font-size:13px;
line-height:15px;
margin:0 0 0 8px;
padding:8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove{
background:#d10244;
border-color:#d10244;
color:#fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel{
background:transparent;
border-color:#001b2b;
color:#001b2b
}
.adyen-checkout__payment-method__radio{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
height:18px;
position:absolute;
right:20px;
transition:border-color .3s ease-out;
width:18px
}
.adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__payment-method__radio:hover{
border-color:#00a3ff;
cursor:pointer
}
.adyen-checkout__payment-method__radio--selected{
background-color:#00a3ff;
border:0 solid transparent;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1)
}
.adyen-checkout__field{
display:block;
margin-bottom:16px
}
.adyen-checkout__field--error input{
border-color:#d81b4a;
color:#d81b4a
}
.adyen-checkout__field:last-child{
margin-bottom:0
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#001b2b;
display:block;
font-size:13px;
font-weight:400;
line-height:13px;
padding-bottom:8px
}
.adyen-checkout__helper-text{
color:#687282
}
.adyen-checkout__label__text{
transition:color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text{
color:#07b
}
.adyen-checkout__error-text,.adyen-checkout__label__text--error{
align-items:center;
color:#d0021b;
display:flex;
font-size:12px;
font-weight:400;
margin-top:4px
}
.adyen-checkout__icon svg{
fill:currentColor
}
.adyen-checkout__open-invoice .adyen-checkout__input--wrapper--socialSecurityNumber+.adyen-checkout__error-text{
.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber+.adyen-checkout__error-text{
max-width:380px
}
.adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{
......@@ -384,7 +170,7 @@
}
.adyen-checkout__radio_group__label{
display:block;
font-size:13px;
font-size:.81em;
font-weight:400;
line-height:16px;
margin-bottom:8px;
......@@ -423,12 +209,12 @@
width:6px
}
.adyen-checkout__radio_group__label:hover{
border-color:#00a3ff;
border-color:#06f;
cursor:pointer
}
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
background-color:#00a3ff;
border:0 solid transparent;
background-color:#06f;
border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
......@@ -442,7 +228,7 @@
.adyen-checkout__checkbox{
display:block
}
.adyen-checkout__checkbox>input[type=checkbox]{
.adyen-checkout__checkbox__input{
opacity:0;
pointer-events:none;
position:absolute
......@@ -451,10 +237,10 @@
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
color:#001b2b;
color:#00112c;
cursor:pointer;
display:inline-block;
font-size:13px;
font-size:.81em;
font-weight:400;
line-height:16px;
padding-left:24px;
......@@ -496,19 +282,19 @@
width:16px;
z-index:0
}
.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
border:1px solid #d10244
}
.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{
background-color:#00a3ff;
border:1px solid #00a3ff
background-color:#06f;
border:1px solid #06f
}
.adyen-checkout__checkbox__input:focus+span:after{
border:1px solid #00a3ff;
box-shadow:0 0 0 2px #91d7ff
}
.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
border:1px solid #d10244
border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__dropdown{
font-size:16px;
font-size:1em;
max-width:100%;
width:200px
}
......@@ -521,8 +307,8 @@
.adyen-checkout__dropdown__button{
background:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
font-size:16px;
border-radius:6px;
font-size:1em;
height:40px;
line-height:20px;
outline:0;
......@@ -532,16 +318,16 @@
}
.adyen-checkout__dropdown__button__icon{
margin-right:8px;
max-height:20px;
max-width:32px
max-height:26px;
max-width:40px
}
.adyen-checkout__dropdown__button--active,.adyen-checkout__dropdown__button:active,.adyen-checkout__dropdown__button:focus{
border-color:#00a3ff;
box-shadow:0 0 0 2px #91d7ff
border-color:#06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active{
background:#e6e9eb;
color:#001b2b;
color:#00112c;
cursor:not-allowed
}
.adyen-checkout__dropdown__button--invalid{
......@@ -553,21 +339,19 @@
white-space:nowrap
}
.adyen-checkout__dropdown__list{
border-radius:3px;
border-radius:6px;
box-shadow:0 2px 7px rgba(0,15,45,.3);
margin-top:2px;
max-height:360px;
z-index:2
}
.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{
-webkit-animation:expand .1s ease-out;
animation:expand .1s ease-out
}
.adyen-checkout__dropdown__element{
-ms-hyphens:auto;
-webkit-hyphens:auto;
border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer;
font-size:.81em;
hyphens:auto;
line-height:20px;
outline:0;
......@@ -579,38 +363,24 @@
border-bottom:0
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
background:#f0f2f4
background:rgba(230,233,235,.6)
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
border-bottom-color:#00a3ff;
border-top-color:#00a3ff
border-bottom-color:#06f;
border-top-color:#06f
}
.adyen-checkout__dropdown__element__icon{
margin-right:8px;
max-height:20px;
max-width:32px
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
background:rgba(0,102,255,.1)
}
@-webkit-keyframes expand{
0%{
-webkit-transform:scaleY(0);
transform:scaleY(0)
}
to{
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:active,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:focus,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:hover{
background:rgba(0,102,255,.15)
}
@keyframes expand{
0%{
-webkit-transform:scaleY(0);
transform:scaleY(0)
}
to{
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
.adyen-checkout__dropdown__element__icon{
border-radius:3px;
margin-right:8px;
max-height:26px;
max-width:40px
}
.adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{
right:32px
}
......@@ -620,10 +390,11 @@
}
.adyen-checkout__select-list__item{
background:#fff;
border-top:1px solid #b9c4c9;
border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer;
display:inline-block;
font-size:16px;
font-size:1em;
line-height:20px;
outline:0;
padding:9px;
......@@ -633,20 +404,23 @@
border-top:0
}
.adyen-checkout__select-list__item:active,.adyen-checkout__select-list__item:focus,.adyen-checkout__select-list__item:hover{
background:rgba(145,215,255,.5)
background:rgba(230,233,235,.6)
}
.adyen-checkout__select-list__item--selected{
background:rgba(145,215,255,.5);
font-weight:700
background:rgba(0,102,255,.1);
font-weight:500
}
.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
background:rgba(0,102,255,.15)
}
.adyen-checkout__input{
background:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
color:#001b2b;
border-radius:6px;
color:#00112c;
display:block;
font-family:inherit;
font-size:16px;
font-size:1em;
height:40px;
outline:none;
padding:5px 8px;
......@@ -657,11 +431,11 @@
.adyen-checkout__input:required{
box-shadow:none
}
.adyen-checkout__input--wrapper{
.adyen-checkout__input-wrapper{
display:inline-block;
position:relative
}
.adyen-checkout__input--wrapper--block{
.adyen-checkout__input-wrapper--block{
display:block
}
.adyen-checkout-input__inline-validation{
......@@ -674,41 +448,45 @@
width:16px
}
.adyen-checkout-input__inline-validation--valid{
color:#039450
color:#0abf53
}
.adyen-checkout-input__inline-validation--invalid{
color:#d10244
}
.adyen-checkout__input.adyen-checkout__input--small{
width:130px
.adyen-checkout__input--small{
width:134px
}
.adyen-checkout__input.adyen-checkout__input--large{
.adyen-checkout__input--large{
width:300px
}
.adyen-checkout__input.adyen-checkout__input--invalid{
.adyen-checkout__input--invalid{
border-color:#d10244
}
.adyen-checkout__input.adyen-checkout__input--valid{
border-bottom-color:#04ba65
.adyen-checkout__input--valid{
border-bottom-color:#0abf53
}
.adyen-checkout__input--error{
border-color:#d0021b
border-color:#d10244
}
.adyen-checkout__input::-webkit-input-placeholder{
color:#90a2bd;
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input:-ms-input-placeholder{
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input::-ms-input-placeholder{
color:#90a2bd;
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input::placeholder{
color:#90a2bd;
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input--active,.adyen-checkout__input:active,.adyen-checkout__input:focus{
border:1px solid #00a3ff;
box-shadow:0 0 0 2px #91d7ff
.adyen-checkout__input--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{
border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__input[readonly]{
background-color:#e6e9eb;
......@@ -725,7 +503,7 @@
.adyen-checkout__fieldset__title{
color:#687282;
display:block;
font-size:11px;
font-size:.68em;
font-weight:700;
letter-spacing:1px;
margin:0;
......@@ -733,20 +511,20 @@
text-transform:uppercase
}
.adyen-checkout__fieldset--readonly{
color:#001b2b;
font-size:13px;
color:#00112c;
font-size:.81em;
line-height:19px;
margin:0
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
max-width:540px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
padding-top:30px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox{
margin:0 0 20px
}
.adyen-checkout__link--more-information{
font-size:.81em
}
.adyen-checkout__applepay__button{
height:40px;
width:240px
......@@ -770,7 +548,7 @@
}
.adyen-checkout__card__exp-cvc .adyen-checkout__field{
margin-bottom:0;
margin-right:24px
margin-right:32px
}
.adyen-checkout__card-input .adyen-checkout__store-details{
margin-top:16px
......@@ -778,20 +556,21 @@
.adyen-checkout__giropay__results{
background:#fff;
border:1px solid #b9c4c9;
border-radius:4px;
border-radius:6px;
max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
width:100%
}
.adyen-checkout__giropay__no-results{
color:#687282;
display:block;
font-size:13px;
font-size:.81em;
padding:0 0 0 2px
}
.adyen-checkout__giropay__placeholder{
color:#90a2bd;
color:#b9c4c9;
display:block;
font-weight:200;
padding:0 0 0 2px
......@@ -806,48 +585,139 @@
}
.adyen-checkout__giropay__loading-text{
color:#687282;
font-size:13px;
font-size:.81em;
line-height:16px;
vertical-align:middle
}
.adyen-checkout__giropay__error{
color:#d0021b;
font-size:13px
color:#d10244;
font-size:.81em
}
.adyen-checkout__button{
background:#00112c;
border:0;
border-radius:6px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff;
cursor:pointer;
font-size:1em;
font-weight:700;
height:48px;
margin:0;
padding:15px;
transition:background .3s ease-out;
width:100%
}
.adyen-checkout__button:disabled{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
background:#e6e9eb;
box-shadow:none;
cursor:not-allowed;
user-select:all
}
.adyen-checkout__button--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#687282;
box-shadow:none;
outline:0;
pointer-events:none;
user-select:none
}
.adyen-checkout__button .adyen-checkout__spinner{
border-color:transparent #fff #fff;
border-width:3px
}
.adyen-checkout__button__content{
align-items:center;
display:flex;
justify-content:center
}
.adyen-checkout__phone-input{
display:flex
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em
}
.adyen-checkout__phone-input .adyen-checkout__field{
.adyen-checkout__input--phone-number{
margin-bottom:0
}
.adyen-checkout__iban-input__number{
padding:5px 36px 5px 8px;
text-transform:uppercase
}
.adyen-checkout__wechatpay{
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
background-color:transparent;
box-sizing:border-box;
display:block;
overflow:auto;
width:100%
}
.adyen-checkout__threeds2__challenge-container--01{
height:400px;
width:250px
}
.adyen-checkout__threeds2__challenge-container--02{
height:400px;
width:390px
}
.adyen-checkout__threeds2__challenge-container--03{
height:600px;
width:500px
}
.adyen-checkout__threeds2__challenge-container--04{
height:400px;
width:600px
}
.adyen-checkout__threeds2_challenge-container--05{
height:100%;
width:100%
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
overflow:hidden;
padding-top:56.25%;
position:relative
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__qr-loader{
background:#fff;
border:1px solid #dde1e3;
border-radius:3px;
min-height:443px;
border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
}
.adyen-checkout__wechatpay__brand-logo{
height:20px;
width:109px
.adyen-checkout__qr-loader--app{
border:0;
border-radius:0;
padding:0
}
.adyen-checkout__qr-loader__brand-logo{
max-height:50px;
width:110px
}
.adyen-checkout__wechatpay__subtitle{
.adyen-checkout__qr-loader__subtitle{
margin-top:32px
}
.adyen-checkout__wechatpay__payment_amount,.adyen-checkout__wechatpay__subtitle{
color:#001b2b;
font-size:16px;
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
color:#00112c;
font-size:1em;
line-height:19px
}
.adyen-checkout__wechatpay__progress{
.adyen-checkout__qr-loader__payment_amount{
font-weight:700
}
.adyen-checkout__qr-loader__progress{
background:#d4d9db;
border-radius:25px;
height:4px;
......@@ -855,45 +725,339 @@
padding-right:3%;
width:152px
}
.adyen-checkout__wechatpay__progress>span{
background:#00a3ff;
.adyen-checkout__qr-loader__percentage{
background:#06f;
border-radius:25px;
display:block;
height:100%
}
.adyen-checkout__wechatpay__countdown{
.adyen-checkout__qr-loader__countdown{
color:#687282;
font-size:13px
font-size:.81em
}
.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper{
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
margin:60px 0
}
.adyen-checkout__alert{
align-items:flex-start;
background-color:#00a3ff;
border-radius:3px;
color:#fff;
.adyen-checkout__qr-loader__separator__label{
background:#fff;
border-radius:100%;
color:#687282;
display:inline-block;
height:34px;
line-height:34px;
position:relative;
width:34px;
z-index:1
}
.adyen-checkout__qr-loader__separator__line{
-webkit-transform:translateY(-17px);
border-top:1px solid #d4d9db;
display:block;
transform:translateY(-17px)
}
.adyen-checkout__button.adyen-checkout__button--qr-loader{
display:block;
text-decoration:none
}
.adyen-checkout__voucher-result{
background:#fff;
border:1px solid #d4d9db;
border-radius:6px;
box-sizing:border-box;
padding:20px 16px 56px;
text-align:center
}
.adyen-checkout__voucher-result__image{
align-items:center;
display:flex;
justify-content:center;
margin-bottom:16px;
width:100%
}
.adyen-checkout__voucher-result__image__wrapper{
display:inline-block;
padding:8px;
width:120px
}
.adyen-checkout__voucher-result__image__wrapper:nth-child(2){
border-left:1px solid #d4d9db
}
.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
height:34px
}
.adyen-checkout__voucher-result__image__brand{
height:60px
}
.adyen-checkout__voucher-result__introduction{
color:#00112c;
font-size:.81em;
line-height:19px;
margin:0 auto;
max-width:400px;
text-align:center
}
.adyen-checkout__voucher-result__amount{
color:#00112c;
font-size:1em;
font-weight:700;
margin:24px auto 0;
text-align:center
}
.adyen-checkout__voucher-result__surcharge{
color:#687282;
display:block;
font-size:.81em;
font-weight:400;
line-height:19px;
text-align:center
}
.adyen-checkout__voucher-result__code__label{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
display:block;
font-weight:400;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:-14px;
user-select:none;
width:auto
}
.adyen-checkout__voucher-result__code__label__text{
background:#fff;
color:#00112c;
font-size:13px;
padding:0 8px
}
.adyen-checkout__voucher-result__code{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
border:1px solid #e6e9eb;
border-radius:6px;
color:#00112c;
display:inline-block;
font-size:1.5em;
font-weight:700;
letter-spacing:1px;
line-height:19px;
margin:20px auto 16px;
max-width:100%;
min-width:200px;
padding:28px 48px 24px;
position:relative;
text-align:center;
user-select:all;
width:300px
}
.adyen-checkout__voucher-result__details{
list-style:none;
margin:8px auto 0;
max-width:300px;
padding:0
}
.adyen-checkout__voucher-result__details__item{
color:#00112c;
display:flex;
font-size:.81em;
justify-content:space-between;
line-height:1;
margin:0;
padding:12px
margin-bottom:16px;
word-break:break-word
}
.adyen-checkout__alert--error{
background-color:#d81b4a
.adyen-checkout__voucher-result__details__item:last-child{
margin-bottom:0
}
.adyen-checkout__alert--success{
background-color:#0abf53
.adyen-checkout__voucher-result__details__label{
max-width:50%;
text-align:left
}
.adyen-checkout__alert--info{
background-color:#00a3ff
.adyen-checkout__voucher-result__details__value{
font-weight:700;
max-width:50%;
text-align:right
}
.adyen-checkout__sdk,.adyen-checkout__sdk *,.adyen-checkout__sdk * :before,.adyen-checkout__sdk :after{
box-sizing:border-box
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #d4d9db;
cursor:pointer;
margin-top:-1px;
position:relative;
transition:opacity .3s ease-out;
width:100%
}
.adyen-checkout__payment-method:focus{
outline:0
}
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:6px;
border-top-right-radius:6px;
margin-top:0
}
.adyen-checkout__payment-methods-list{
.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
margin-bottom:0
}
.adyen-checkout__payment-method--loading{
opacity:.2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
opacity:.9
}
.adyen-checkout__payment-method--disabling{
opacity:.5
}
.adyen-checkout__payment-method__header{
align-items:center;
color:#00112c;
display:flex;
font-size:1em;
font-weight:400;
padding:16px;
position:relative;
transition:background .1s ease-out;
width:100%
}
.adyen-checkout__payment-method__surcharge{
color:#687282;
margin-left:5px
}
.adyen-checkout__payment-method--selected{
background:#f7f8f9;
border:1px solid #d4d9db;
border-radius:6px;
cursor:default;
margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
}
.adyen-checkout__payment-method__name--selected{
font-weight:500
}
.adyen-checkout__payment-method__details{
padding:0 16px
}
.adyen-checkout__payment-method__details__content{
margin:6px 0 22px
}
.adyen-checkout__payment-method__image__wrapper{
height:26px;
position:relative
}
.adyen-checkout__payment-method__image__wrapper:after{
border:1px solid rgba(0,27,43,.17);
border-radius:3px;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__payment-method__image{
border-radius:3px
}
.adyen-checkout__payment-method__disable-confirmation{
align-items:center;
background:#e6e9eb;
color:#00112c;
display:flex;
font-size:.94em;
justify-content:space-between;
margin-bottom:10px;
padding:8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons{
display:flex
}
.adyen-checkout__payment-method__disable-confirmation__button{
border:1px solid transparent;
border-radius:6px;
cursor:pointer;
font-size:.81em;
line-height:15px;
margin:0 0 0 8px;
padding:8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove{
background:#d10244;
border-color:#d10244;
color:#fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel{
background:transparent;
border-color:#00112c;
color:#00112c
}
.adyen-checkout__payment-method__radio{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
height:18px;
position:absolute;
right:20px;
transition:border-color .3s ease-out;
width:18px
}
.adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__payment-method__radio:hover{
border-color:#06f;
cursor:pointer
}
.adyen-checkout__payment-method__radio--selected{
background-color:#06f;
border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1)
}
.adyen-checkout__button--pay{
margin-bottom:16px
}
.adyen-checkout__status{
align-items:center;
background-color:#fff;
border:1px solid #d4d9db;
border-radius:6px;
color:#001b2b;
display:flex;
flex-direction:column;
font-size:16px;
height:350px;
justify-content:center;
margin:0;
padding:32px;
text-align:center
}
.adyen-checkout__status__icon{
margin-bottom:24px
}
.adyen-checkout__dropin,.adyen-checkout__dropin *,.adyen-checkout__dropin :after,.adyen-checkout__dropin :before{
box-sizing:border-box
}
.adyen-checkout__payment-methods-list--loading{
-moz-user-select:none;
-ms-user-select:none;
......@@ -902,9 +1066,10 @@
user-select:none
}
.adyen-checkout__link{
color:#687282;
font-size:13px;
color:#06f;
text-decoration:none
}
.adyen-checkout__link:hover{
text-decoration:underline
}
/* Checkout component Adyen styling end */
view/frontend/web/css/styles.css
View file @ 77373c29
......@@ -209,1012 +209,1015 @@
}
/* Checkout component Adyen styling start */
.adyen-checkout__spinner__wrapper {
align-items: center;
display: flex;
height: 100%;
justify-content: center
}
.adyen-checkout__spinner__wrapper--inline {
display: inline-block;
height: auto;
margin-right: 8px
}
.adyen-checkout__spinner {
-webkit-animation: rotateSpinner 2s infinite linear;
animation: rotateSpinner 2s infinite linear;
border: 2px solid #00a3ff;
border-radius: 50%;
border-top-color: transparent;
height: 43px;
width: 43px
}
.adyen-checkout__spinner--large {
height: 43px;
width: 43px
}
.adyen-checkout__spinner--small {
height: 16px;
width: 16px
}
.adyen-checkout__spinner--medium {
height: 28px;
width: 28px
}
@-webkit-keyframes rotateSpinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
/* Checkout component Adyen v3.0.0 styling start */
.adyen-checkout__field{
display:block;
margin-bottom:16px
}
.adyen-checkout__field--error input{
border-color:#d10244;
color:#d10244
}
.adyen-checkout__field:last-child{
margin-bottom:0
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#00112c;
display:block;
font-size:.81em;
font-weight:400;
line-height:13px;
padding-bottom:8px
}
.adyen-checkout__helper-text{
color:#687282
}
.adyen-checkout__label__text{
transition:color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text{
color:#06f
}
.adyen-checkout__error-text{
align-items:center;
color:#d10244;
display:flex;
font-size:.75em;
font-weight:400;
margin-top:4px
}
.adyen-checkout__spinner__wrapper{
align-items:center;
display:flex;
height:100%;
justify-content:center
}
.adyen-checkout__spinner__wrapper--inline{
display:inline-block;
height:auto;
margin-right:8px
}
.adyen-checkout__spinner{
-webkit-animation:rotateSpinner 2s infinite linear;
animation:rotateSpinner 2s infinite linear;
border:2px solid #06f;
border-radius:50%;
border-top-color:transparent;
height:43px;
width:43px
}
.adyen-checkout__spinner--large{
height:43px;
width:43px
}
.adyen-checkout__spinner--small{
height:16px;
width:16px
}
.adyen-checkout__spinner--medium{
height:28px;
width:28px
}
@-webkit-keyframes rotateSpinner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@keyframes rotateSpinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
@keyframes rotateSpinner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
.adyen-checkout__pay-button {
background: #001b2b;
border: 0;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0, 15, 45, .2);
color: #fff;
cursor: pointer;
font-size: 1em;
font-weight: 700;
height: 48px;
padding: 15px;
transition: background .3s ease-out;
width: 100%
}
.adyen-checkout__pay-button:disabled {
-moz-user-select: all;
-ms-user-select: all;
-webkit-user-select: all;
background: #e6e9eb;
box-shadow: none;
cursor: not-allowed;
user-select: all
}
.adyen-checkout__pay-button--loading {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
background: #4c5f6b;
box-shadow: none;
outline: 0;
pointer-events: none;
user-select: none
}
.adyen-checkout__pay-button .adyen-checkout__spinner {
border-color: transparent #fff #fff;
border-width: 3px
}
.adyen-checkout__pay-button__content {
align-items: center;
display: flex;
justify-content: center
}
.adyen-checkout__payment-method {
background: #fff;
border: 1px solid #edf0f3;
cursor: pointer;
margin-top: -1px;
position: relative;
transition: opacity .3s ease-out;
width: 100%
}
.adyen-checkout__payment-method:focus {
outline: 0
}
.adyen-checkout__payment-method--selected + .adyen-checkout__payment-method, .adyen-checkout__payment-method:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-top: 0
}
.adyen-checkout__payment-method--next-selected {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.adyen-checkout__payment-method--loading {
opacity: .2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading {
opacity: .9
}
.adyen-checkout__payment-method--disabling {
opacity: .5
}
.adyen-checkout__payment-method__header {
align-items: center;
color: #00202e;
display: flex;
font-size: 16px;
font-weight: 400;
padding: 16px;
position: relative;
transition: background .1s ease-out;
width: 100%
}
.adyen-checkout__payment-method__surcharge {
color: #687282;
margin-left: 5px
}
.adyen-checkout__payment-method--selected {
background: #f7f8f9;
border: 1px solid #d4d9db;
border-radius: 3px;
cursor: default;
margin: 8px 0;
transition: margin .15s cubic-bezier(.4, 0, .2, 1) 0ms, opacity .3s ease-out
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header {
font-weight: 500
}
.adyen-checkout__payment-method__details {
padding: 0 16px 16px
}
.adyen-checkout__payment-method__details__content {
padding: 6px 0 24px
}
.adyen-checkout__payment-method__image__wrapper {
height: 26px;
position: relative
}
.adyen-checkout__payment-method__image__wrapper:after {
border: 1px solid rgba(0, 27, 43, .17);
border-radius: 3px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.adyen-checkout__payment-method__image {
border-radius: 3px
}
.adyen-checkout__payment-method__disable_oneclick {
background-color: transparent;
border: none;
color: #687282;
cursor: pointer;
display: block;
font-size: 13px;
padding: 0;
position: absolute;
right: 70px;
text-decoration: underline
}
.adyen-checkout__payment-method__disable_oneclick:focus {
color: #00a3ff;
outline: 0
}
.adyen-checkout__payment-method__disable-confirmation {
align-items: center;
background: #e6e9eb;
color: #001b2b;
display: flex;
font-size: 15px;
justify-content: space-between;
margin-bottom: 10px;
padding: 8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons {
display: flex
}
.adyen-checkout__payment-method__disable-confirmation__button {
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
line-height: 15px;
margin: 0 0 0 8px;
padding: 8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove {
background: #d10244;
border-color: #d10244;
color: #fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel {
background: transparent;
border-color: #001b2b;
color: #001b2b
}
.adyen-checkout__payment-method__radio {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0, 27, 43, .15);
height: 18px;
position: absolute;
right: 20px;
transition: border-color .3s ease-out;
width: 18px
}
.adyen-checkout__payment-method__radio:after {
-webkit-transform: translateY(-50%) scale(0);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
content: "";
display: block;
height: 6px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
width: 6px
}
.adyen-checkout__payment-method__radio:hover {
border-color: #00a3ff;
cursor: pointer
}
.adyen-checkout__payment-method__radio--selected {
background-color: #00a3ff;
border: 0 solid transparent;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
transition: all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
.adyen-checkout__field {
display: block;
margin-bottom: 16px
}
.adyen-checkout__field--error input {
border-color: #d81b4a;
color: #d81b4a
}
.adyen-checkout__field:last-child {
margin-bottom: 0
}
.adyen-checkout__helper-text, .adyen-checkout__label__text {
color: #001b2b;
display: block;
font-size: 13px;
font-weight: 400;
line-height: 13px;
padding-bottom: 8px
}
.adyen-checkout__helper-text {
color: #687282
}
.adyen-checkout__label__text {
transition: color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text {
color: #07b
}
.adyen-checkout__error-text, .adyen-checkout__label__text--error {
align-items: center;
color: #d0021b;
display: flex;
font-size: 12px;
font-weight: 400;
margin-top: 4px
}
.adyen-checkout__icon svg {
fill: currentColor
}
.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber + .adyen-checkout__error-text {
max-width: 380px
}
.adyen-checkout__radio_group + .adyen-checkout-input__inline-validation {
display: none
}
.adyen-checkout__radio_group__input {
opacity: 0;
position: absolute
}
.adyen-checkout__radio_group__label {
display: block;
font-size: 13px;
font-weight: 400;
line-height: 16px;
margin-bottom: 8px;
padding-bottom: 0;
padding-left: 24px;
position: relative
}
.adyen-checkout__radio_group__label:before {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition: border-color .3s ease-out;
width: 16px
}
.adyen-checkout__radio_group__label:after {
-webkit-transform: scale(0);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
content: "";
display: block;
height: 6px;
left: 5px;
margin: 0 auto;
position: absolute;
top: 5px;
transform: scale(0);
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
width: 6px
}
.adyen-checkout__radio_group__label:hover {
border-color: #00a3ff;
cursor: pointer
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:before, .adyen-checkout__radio_group__label--selected {
background-color: #00a3ff;
border: 0 solid transparent;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
transition: all .3s ease-out
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:after {
-webkit-transform: scale(1);
transform: scale(1)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before {
border: 1px solid #d10244
}
.adyen-checkout__checkbox {
display: block
}
.adyen-checkout__checkbox > input[type=checkbox] {
opacity: 0;
pointer-events: none;
position: absolute
}
.adyen-checkout__checkbox__label {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
color: #001b2b;
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: 400;
line-height: 16px;
padding-left: 24px;
position: relative;
user-select: none
}
.adyen-checkout__checkbox__input + span:before {
-webkit-transform: rotate(37deg);
-webkit-transform-origin: 100% 100%;
border-color: transparent #fff #fff transparent;
border-radius: 0 2px 1px 2px;
border-style: solid;
border-width: 1px 2px 2px 1px;
content: "";
height: 11px;
left: 1px;
opacity: 0;
position: absolute;
top: 2px;
transform: rotate(37deg);
transform-origin: 100% 100%;
transition: opacity .2s ease-out;
width: 6px;
z-index: 1
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:before {
opacity: 1
}
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition: background .15s ease-out, border .05s ease-out, box-shadow .1s ease-out;
width: 16px;
z-index: 0
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:after {
background-color: #00a3ff;
border: 1px solid #00a3ff
}
.adyen-checkout__checkbox__input:focus + span:after {
border: 1px solid #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid + .adyen-checkout__checkbox__label:after {
border: 1px solid #d10244
}
.adyen-checkout__dropdown {
font-size: 16px;
max-width: 100%;
width: 200px
}
.adyen-checkout__dropdown--small {
width: 130px
}
.adyen-checkout__dropdown--large {
width: 300px
}
.adyen-checkout__dropdown__button {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
font-size: 16px;
height: 40px;
line-height: 20px;
outline: 0;
padding: 9px 20px 9px 8px;
transition: border .2s ease-out, box-shadow .2s ease-out;
width: 100%
}
.adyen-checkout__dropdown__button__icon {
margin-right: 8px;
max-height: 20px;
max-width: 32px
}
.adyen-checkout__dropdown__button--active, .adyen-checkout__dropdown__button:active, .adyen-checkout__dropdown__button:focus {
border-color: #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__dropdown__button--readonly, .adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active {
background: #e6e9eb;
color: #001b2b;
cursor: not-allowed
}
.adyen-checkout__dropdown__button--invalid {
border-color: #d10244
}
.adyen-checkout__dropdown__button__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.adyen-checkout__dropdown__list {
border-radius: 3px;
box-shadow: 0 2px 7px rgba(0, 15, 45, .3);
margin-top: 2px;
max-height: 360px;
z-index: 2
}
.adyen-checkout__dropdown__element {
-ms-hyphens: auto;
-webkit-hyphens: auto;
border: 1px solid transparent;
border-bottom-color: #e6e9eb;
cursor: pointer;
hyphens: auto;
line-height: 20px;
outline: 0;
padding: 8px;
transition: background .2s ease-out, border-color .2s ease-out;
word-break: break-word
}
.adyen-checkout__dropdown__element:last-child {
border-bottom: 0
}
.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus, .adyen-checkout__dropdown__element:hover {
background: #f0f2f4
}
.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus {
border-bottom-color: #00a3ff;
border-top-color: #00a3ff
}
.adyen-checkout__dropdown__element__icon {
margin-right: 8px;
max-height: 20px;
max-width: 32px
}
.adyen-checkout__dropdown + .adyen-checkout-input__inline-validation {
right: 32px
}
.adyen-checkout__select-list {
margin: 0;
padding: 0
}
.adyen-checkout__select-list__item {
background: #fff;
border-top: 1px solid #b9c4c9;
cursor: pointer;
display: inline-block;
font-size: 16px;
line-height: 20px;
outline: 0;
padding: 9px;
width: 100%
}
.adyen-checkout__select-list__item:first-child {
border-top: 0
}
.adyen-checkout__select-list__item:active, .adyen-checkout__select-list__item:focus, .adyen-checkout__select-list__item:hover {
background: rgba(145, 215, 255, .5)
}
.adyen-checkout__select-list__item--selected {
background: rgba(145, 215, 255, .5);
font-weight: 700
}
.adyen-checkout__input {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
color: #001b2b;
display: block;
font-family: inherit;
font-size: 16px;
height: 40px;
outline: none;
padding: 5px 8px;
position: relative;
transition: border .2s ease-out, box-shadow .2s ease-out;
width: 200px
}
.adyen-checkout__input:required {
box-shadow: none
}
.adyen-checkout__input-wrapper {
display: inline-block;
position: relative
}
.adyen-checkout__input-wrapper--block {
display: block
}
.adyen-checkout-input__inline-validation {
-webkit-transform: translateY(-50%);
height: 16px;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px
}
.adyen-checkout-input__inline-validation--valid {
color: #039450
}
.adyen-checkout-input__inline-validation--invalid {
color: #d10244
}
.adyen-checkout__input.adyen-checkout__input--small {
width: 130px
}
.adyen-checkout__input.adyen-checkout__input--large {
width: 300px
}
.adyen-checkout__input.adyen-checkout__input--invalid {
border-color: #d10244
}
.adyen-checkout__input.adyen-checkout__input--valid {
border-bottom-color: #04ba65
}
.adyen-checkout__input--error {
border-color: #d0021b
}
.adyen-checkout__input::-webkit-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input:-ms-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input::-ms-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input::placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input--active, .adyen-checkout__input:active, .adyen-checkout__input:focus {
border: 1px solid #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__input[readonly] {
background-color: #e6e9eb;
border-color: transparent;
color: #687282;
cursor: default
}
.adyen-checkout__fieldset {
color: #687282;
display: block;
padding-bottom: 30px;
width: 100%
}
.adyen-checkout__fieldset__title {
color: #687282;
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
padding: 0 0 20px;
text-transform: uppercase
}
.adyen-checkout__fieldset--readonly {
color: #001b2b;
font-size: 13px;
line-height: 19px;
margin: 0
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox {
max-width: 540px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox + .adyen-checkout__open-invoice .adyen-checkout__fieldset {
padding-top: 30px
.adyen-checkout__icon svg{
fill:currentColor
}
.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber+.adyen-checkout__error-text{
max-width:380px
}
.adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{
display:none
}
.adyen-checkout__radio_group__input{
opacity:0;
position:absolute
}
.adyen-checkout__radio_group__label{
display:block;
font-size:.81em;
font-weight:400;
line-height:16px;
margin-bottom:8px;
padding-bottom:0;
padding-left:24px;
position:relative
}
.adyen-checkout__radio_group__label:before{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
content:"";
height:16px;
left:0;
position:absolute;
top:0;
transition:border-color .3s ease-out;
width:16px
}
.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:5px;
margin:0 auto;
position:absolute;
top:5px;
transform:scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__radio_group__label:hover{
border-color:#06f;
cursor:pointer
}
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
background-color:#06f;
border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(1);
transform:scale(1)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{
border:1px solid #d10244
}
.adyen-checkout__checkbox{
display:block
}
.adyen-checkout__checkbox__input{
opacity:0;
pointer-events:none;
position:absolute
}
.adyen-checkout__checkbox__label{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
color:#00112c;
cursor:pointer;
display:inline-block;
font-size:.81em;
font-weight:400;
line-height:16px;
padding-left:24px;
position:relative;
user-select:none
}
.adyen-checkout__checkbox__input+span:before{
-webkit-transform:rotate(37deg);
-webkit-transform-origin:100% 100%;
border-color:transparent #fff #fff transparent;
border-radius:0 2px 1px 2px;
border-style:solid;
border-width:1px 2px 2px 1px;
content:"";
height:11px;
left:1px;
opacity:0;
position:absolute;
top:2px;
transform:rotate(37deg);
transform-origin:100% 100%;
transition:opacity .2s ease-out;
width:6px;
z-index:1
}
.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:before{
opacity:1
}
.adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:after{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
content:"";
height:16px;
left:0;
position:absolute;
top:0;
transition:background .15s ease-out,border .05s ease-out,box-shadow .1s ease-out;
width:16px;
z-index:0
}
.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
border:1px solid #d10244
}
.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{
background-color:#06f;
border:1px solid #06f
}
.adyen-checkout__checkbox__input:focus+span:after{
border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__dropdown{
font-size:1em;
max-width:100%;
width:200px
}
.adyen-checkout__dropdown--small{
width:130px
}
.adyen-checkout__dropdown--large{
width:300px
}
.adyen-checkout__dropdown__button{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
font-size:1em;
height:40px;
line-height:20px;
outline:0;
padding:9px 20px 9px 8px;
transition:border .2s ease-out,box-shadow .2s ease-out;
width:100%
}
.adyen-checkout__dropdown__button__icon{
margin-right:8px;
max-height:26px;
max-width:40px
}
.adyen-checkout__dropdown__button--active,.adyen-checkout__dropdown__button:active,.adyen-checkout__dropdown__button:focus{
border-color:#06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active{
background:#e6e9eb;
color:#00112c;
cursor:not-allowed
}
.adyen-checkout__dropdown__button--invalid{
border-color:#d10244
}
.adyen-checkout__dropdown__button__text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.adyen-checkout__dropdown__list{
border-radius:6px;
box-shadow:0 2px 7px rgba(0,15,45,.3);
margin-top:2px;
max-height:360px;
z-index:2
}
.adyen-checkout__dropdown__element{
-ms-hyphens:auto;
-webkit-hyphens:auto;
border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer;
font-size:.81em;
hyphens:auto;
line-height:20px;
outline:0;
padding:8px;
transition:background .2s ease-out,border-color .2s ease-out;
word-break:break-word
}
.adyen-checkout__dropdown__element:last-child{
border-bottom:0
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
background:rgba(230,233,235,.6)
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
border-bottom-color:#06f;
border-top-color:#06f
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
background:rgba(0,102,255,.1)
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:active,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:focus,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:hover{
background:rgba(0,102,255,.15)
}
.adyen-checkout__dropdown__element__icon{
border-radius:3px;
margin-right:8px;
max-height:26px;
max-width:40px
}
.adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{
right:32px
}
.adyen-checkout__select-list{
margin:0;
padding:0
}
.adyen-checkout__select-list__item{
background:#fff;
border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer;
display:inline-block;
font-size:1em;
line-height:20px;
outline:0;
padding:9px;
width:100%
}
.adyen-checkout__select-list__item:first-child{
border-top:0
}
.adyen-checkout__select-list__item:active,.adyen-checkout__select-list__item:focus,.adyen-checkout__select-list__item:hover{
background:rgba(230,233,235,.6)
}
.adyen-checkout__select-list__item--selected{
background:rgba(0,102,255,.1);
font-weight:500
}
.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
background:rgba(0,102,255,.15)
}
.adyen-checkout__input{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
color:#00112c;
display:block;
font-family:inherit;
font-size:1em;
height:40px;
outline:none;
padding:5px 8px;
position:relative;
transition:border .2s ease-out,box-shadow .2s ease-out;
width:200px
}
.adyen-checkout__input:required{
box-shadow:none
}
.adyen-checkout__input-wrapper{
display:inline-block;
position:relative
}
.adyen-checkout__input-wrapper--block{
display:block
}
.adyen-checkout-input__inline-validation{
-webkit-transform:translateY(-50%);
height:16px;
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:16px
}
.adyen-checkout-input__inline-validation--valid{
color:#0abf53
}
.adyen-checkout-input__inline-validation--invalid{
color:#d10244
}
.adyen-checkout__input--small{
width:134px
}
.adyen-checkout__input--large{
width:300px
}
.adyen-checkout__input--invalid{
border-color:#d10244
}
.adyen-checkout__input--valid{
border-bottom-color:#0abf53
}
.adyen-checkout__input--error{
border-color:#d10244
}
.adyen-checkout__input::-webkit-input-placeholder{
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input:-ms-input-placeholder{
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input::-ms-input-placeholder{
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input::placeholder{
color:#b9c4c9;
font-weight:200
}
.adyen-checkout__input--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{
border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff
}
.adyen-checkout__input[readonly]{
background-color:#e6e9eb;
border-color:transparent;
color:#687282;
cursor:default
}
.adyen-checkout__fieldset{
color:#687282;
display:block;
padding-bottom:30px;
width:100%
}
.adyen-checkout__fieldset__title{
color:#687282;
display:block;
font-size:.68em;
font-weight:700;
letter-spacing:1px;
margin:0;
padding:0 0 20px;
text-transform:uppercase
}
.adyen-checkout__fieldset--readonly{
color:#00112c;
font-size:.81em;
line-height:19px;
margin:0
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
max-width:540px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
padding-top:30px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox{
margin:0 0 20px
}
.adyen-checkout__applepay__button {
height: 40px;
width: 240px
}
.adyen-checkout__card-input__form {
transition: opacity .25s ease-out
}
.adyen-checkout__card__exp-cvc {
display: flex
}
.adyen-checkout__card__cardNumber {
max-width: 400px
}
.adyen-checkout__card__cardNumber__input {
padding: 5px 8px 5px 57px
}
.adyen-checkout__card__exp-date__input--oneclick {
font-weight: 400;
height: 40px;
line-height: 40px
}
.adyen-checkout__card__exp-cvc .adyen-checkout__field {
margin-bottom: 0;
margin-right: 24px
}
.adyen-checkout__card-input .adyen-checkout__store-details {
margin-top: 16px
}
.adyen-checkout__giropay__results {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 4px;
max-height: 140px;
min-height: 100px;
overflow-y: scroll;
width: 100%
}
.adyen-checkout__giropay__no-results {
color: #687282;
display: block;
font-size: 13px;
padding: 0 0 0 2px
}
.adyen-checkout__giropay__placeholder {
color: #90a2bd;
display: block;
font-weight: 200;
padding: 0 0 0 2px
}
.adyen-checkout__giropay__loading {
display: block;
min-height: 100px
}
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper {
display: inline-block;
vertical-align: middle
}
.adyen-checkout__giropay__loading-text {
color: #687282;
font-size: 13px;
line-height: 16px;
vertical-align: middle
}
.adyen-checkout__giropay__error {
color: #d0021b;
font-size: 13px
}
.adyen-checkout__phone-input {
display: flex
}
.adyen-checkout__phone-input__prefix {
margin-right: .5em
}
.adyen-checkout__phone-input .adyen-checkout__field {
margin-bottom: 0
}
.adyen-checkout__iban-input__number {
padding: 5px 36px 5px 8px;
text-transform: uppercase
}
.adyen-checkout__threeds2__challenge-container {
background-color: transparent;
box-sizing: border-box;
display: block;
overflow: auto;
width: 100%
}
.adyen-checkout__threeds2__challenge-container--01 {
height: 400px;
width: 250px
}
.adyen-checkout__threeds2__challenge-container--02 {
height: 400px;
width: 390px
}
.adyen-checkout__threeds2__challenge-container--03 {
height: 600px;
width: 500px
}
.adyen-checkout__threeds2__challenge-container--04 {
height: 400px;
width: 600px
}
.adyen-checkout__threeds2_challenge-container--05 {
height: 100%;
width: 100%
}
.adyen-checkout__wechatpay {
background: #fff;
border: 1px solid #dde1e3;
border-radius: 3px;
min-height: 443px;
padding: 40px;
text-align: center
}
.adyen-checkout__wechatpay__brand-logo {
height: 20px;
width: 109px
}
.adyen-checkout__wechatpay__subtitle {
margin-top: 32px
}
.adyen-checkout__wechatpay__payment_amount, .adyen-checkout__wechatpay__subtitle {
color: #001b2b;
font-size: 16px;
line-height: 19px
}
.adyen-checkout__wechatpay__progress {
background: #d4d9db;
border-radius: 25px;
height: 4px;
margin: 32px auto 12px;
padding-right: 3%;
width: 152px
}
.adyen-checkout__wechatpay__progress > span {
background: #00a3ff;
border-radius: 25px;
display: block;
height: 100%
}
.adyen-checkout__wechatpay__countdown {
color: #687282;
font-size: 13px
}
.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper {
margin: 60px 0
}
.adyen-checkout__alert {
align-items: flex-start;
background-color: #00a3ff;
border-radius: 3px;
color: #fff;
display: flex;
justify-content: space-between;
line-height: 1;
margin: 0;
padding: 12px
}
.adyen-checkout__alert--error {
background-color: #d81b4a
}
.adyen-checkout__alert--success {
background-color: #0abf53
}
.adyen-checkout__alert--info {
background-color: #00a3ff
}
.adyen-checkout__sdk, .adyen-checkout__sdk *, .adyen-checkout__sdk * :before, .adyen-checkout__sdk :after {
box-sizing: border-box
}
.adyen-checkout__payment-methods-list {
border-radius: 3px
}
.adyen-checkout__payment-methods-list--loading {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
pointer-events: none;
user-select: none
.adyen-checkout__link--more-information{
font-size:.81em
}
.adyen-checkout__applepay__button{
height:40px;
width:240px
}
.adyen-checkout__card-input__form{
transition:opacity .25s ease-out
}
.adyen-checkout__card__exp-cvc{
display:flex
}
.adyen-checkout__card__cardNumber{
max-width:400px
}
.adyen-checkout__card__cardNumber__input{
padding:5px 8px 5px 57px
}
.adyen-checkout__card__exp-date__input--oneclick{
font-weight:400;
height:40px;
line-height:40px
}
.adyen-checkout__card__exp-cvc .adyen-checkout__field{
margin-bottom:0;
margin-right:32px
}
.adyen-checkout__card-input .adyen-checkout__store-details{
margin-top:16px
}
.adyen-checkout__giropay__results{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
width:100%
}
.adyen-checkout__giropay__no-results{
color:#687282;
display:block;
font-size:.81em;
padding:0 0 0 2px
}
.adyen-checkout__giropay__placeholder{
color:#b9c4c9;
display:block;
font-weight:200;
padding:0 0 0 2px
}
.adyen-checkout__giropay__loading{
display:block;
min-height:100px
}
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{
display:inline-block;
vertical-align:middle
}
.adyen-checkout__giropay__loading-text{
color:#687282;
font-size:.81em;
line-height:16px;
vertical-align:middle
}
.adyen-checkout__giropay__error{
color:#d10244;
font-size:.81em
}
.adyen-checkout__button{
background:#00112c;
border:0;
border-radius:6px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff;
cursor:pointer;
font-size:1em;
font-weight:700;
height:48px;
margin:0;
padding:15px;
transition:background .3s ease-out;
width:100%
}
.adyen-checkout__button:disabled{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
background:#e6e9eb;
box-shadow:none;
cursor:not-allowed;
user-select:all
}
.adyen-checkout__button--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#687282;
box-shadow:none;
outline:0;
pointer-events:none;
user-select:none
}
.adyen-checkout__button .adyen-checkout__spinner{
border-color:transparent #fff #fff;
border-width:3px
}
.adyen-checkout__button__content{
align-items:center;
display:flex;
justify-content:center
}
.adyen-checkout__phone-input{
display:flex
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em
}
.adyen-checkout__input--phone-number{
margin-bottom:0
}
.adyen-checkout__iban-input__number{
padding:5px 36px 5px 8px;
text-transform:uppercase
}
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
background-color:transparent;
box-sizing:border-box;
display:block;
overflow:auto;
width:100%
}
.adyen-checkout__threeds2__challenge-container--01{
height:400px;
width:250px
}
.adyen-checkout__threeds2__challenge-container--02{
height:400px;
width:390px
}
.adyen-checkout__threeds2__challenge-container--03{
height:600px;
width:500px
}
.adyen-checkout__threeds2__challenge-container--04{
height:400px;
width:600px
}
.adyen-checkout__threeds2_challenge-container--05{
height:100%;
width:100%
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
overflow:hidden;
padding-top:56.25%;
position:relative
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__qr-loader{
background:#fff;
border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
}
.adyen-checkout__qr-loader--app{
border:0;
border-radius:0;
padding:0
}
.adyen-checkout__qr-loader__brand-logo{
max-height:50px;
width:110px
}
.adyen-checkout__qr-loader__subtitle{
margin-top:32px
}
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
color:#00112c;
font-size:1em;
line-height:19px
}
.adyen-checkout__qr-loader__payment_amount{
font-weight:700
}
.adyen-checkout__qr-loader__progress{
background:#d4d9db;
border-radius:25px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
}
.adyen-checkout__qr-loader__percentage{
background:#06f;
border-radius:25px;
display:block;
height:100%
}
.adyen-checkout__qr-loader__countdown{
color:#687282;
font-size:.81em
}
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
margin:60px 0
}
.adyen-checkout__qr-loader__separator__label{
background:#fff;
border-radius:100%;
color:#687282;
display:inline-block;
height:34px;
line-height:34px;
position:relative;
width:34px;
z-index:1
}
.adyen-checkout__qr-loader__separator__line{
-webkit-transform:translateY(-17px);
border-top:1px solid #d4d9db;
display:block;
transform:translateY(-17px)
}
.adyen-checkout__button.adyen-checkout__button--qr-loader{
display:block;
text-decoration:none
}
.adyen-checkout__voucher-result{
background:#fff;
border:1px solid #d4d9db;
border-radius:6px;
box-sizing:border-box;
padding:20px 16px 56px;
text-align:center
}
.adyen-checkout__voucher-result__image{
align-items:center;
display:flex;
justify-content:center;
margin-bottom:16px;
width:100%
}
.adyen-checkout__voucher-result__image__wrapper{
display:inline-block;
padding:8px;
width:120px
}
.adyen-checkout__voucher-result__image__wrapper:nth-child(2){
border-left:1px solid #d4d9db
}
.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
height:34px
}
.adyen-checkout__voucher-result__image__brand{
height:60px
}
.adyen-checkout__voucher-result__introduction{
color:#00112c;
font-size:.81em;
line-height:19px;
margin:0 auto;
max-width:400px;
text-align:center
}
.adyen-checkout__voucher-result__amount{
color:#00112c;
font-size:1em;
font-weight:700;
margin:24px auto 0;
text-align:center
}
.adyen-checkout__voucher-result__surcharge{
color:#687282;
display:block;
font-size:.81em;
font-weight:400;
line-height:19px;
text-align:center
}
.adyen-checkout__voucher-result__code__label{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
display:block;
font-weight:400;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:-14px;
user-select:none;
width:auto
}
.adyen-checkout__voucher-result__code__label__text{
background:#fff;
color:#00112c;
font-size:13px;
padding:0 8px
}
.adyen-checkout__voucher-result__code{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
border:1px solid #e6e9eb;
border-radius:6px;
color:#00112c;
display:inline-block;
font-size:1.5em;
font-weight:700;
letter-spacing:1px;
line-height:19px;
margin:20px auto 16px;
max-width:100%;
min-width:200px;
padding:28px 48px 24px;
position:relative;
text-align:center;
user-select:all;
width:300px
}
.adyen-checkout__voucher-result__details{
list-style:none;
margin:8px auto 0;
max-width:300px;
padding:0
}
.adyen-checkout__voucher-result__details__item{
color:#00112c;
display:flex;
font-size:.81em;
justify-content:space-between;
margin-bottom:16px;
word-break:break-word
}
.adyen-checkout__voucher-result__details__item:last-child{
margin-bottom:0
}
.adyen-checkout__voucher-result__details__label{
max-width:50%;
text-align:left
}
.adyen-checkout__voucher-result__details__value{
font-weight:700;
max-width:50%;
text-align:right
}
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #d4d9db;
cursor:pointer;
margin-top:-1px;
position:relative;
transition:opacity .3s ease-out;
width:100%
}
.adyen-checkout__payment-method:focus{
outline:0
}
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:6px;
border-top-right-radius:6px;
margin-top:0
}
.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
margin-bottom:0
}
.adyen-checkout__payment-method--loading{
opacity:.2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
opacity:.9
}
.adyen-checkout__payment-method--disabling{
opacity:.5
}
.adyen-checkout__payment-method__header{
align-items:center;
color:#00112c;
display:flex;
font-size:1em;
font-weight:400;
padding:16px;
position:relative;
transition:background .1s ease-out;
width:100%
}
.adyen-checkout__payment-method__surcharge{
color:#687282;
margin-left:5px
}
.adyen-checkout__payment-method--selected{
background:#f7f8f9;
border:1px solid #d4d9db;
border-radius:6px;
cursor:default;
margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
}
.adyen-checkout__payment-method__name--selected{
font-weight:500
}
.adyen-checkout__payment-method__details{
padding:0 16px
}
.adyen-checkout__payment-method__details__content{
margin:6px 0 22px
}
.adyen-checkout__payment-method__image__wrapper{
height:26px;
position:relative
}
.adyen-checkout__payment-method__image__wrapper:after{
border:1px solid rgba(0,27,43,.17);
border-radius:3px;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__payment-method__image{
border-radius:3px
}
.adyen-checkout__payment-method__disable-confirmation{
align-items:center;
background:#e6e9eb;
color:#00112c;
display:flex;
font-size:.94em;
justify-content:space-between;
margin-bottom:10px;
padding:8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons{
display:flex
}
.adyen-checkout__payment-method__disable-confirmation__button{
border:1px solid transparent;
border-radius:6px;
cursor:pointer;
font-size:.81em;
line-height:15px;
margin:0 0 0 8px;
padding:8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove{
background:#d10244;
border-color:#d10244;
color:#fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel{
background:transparent;
border-color:#00112c;
color:#00112c
}
.adyen-checkout__payment-method__radio{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
height:18px;
position:absolute;
right:20px;
transition:border-color .3s ease-out;
width:18px
}
.adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__payment-method__radio:hover{
border-color:#06f;
cursor:pointer
}
.adyen-checkout__payment-method__radio--selected{
background-color:#06f;
border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1)
}
.adyen-checkout__button--pay{
margin-bottom:16px
}
.adyen-checkout__status{
align-items:center;
background-color:#fff;
border:1px solid #d4d9db;
border-radius:6px;
color:#001b2b;
display:flex;
flex-direction:column;
font-size:16px;
height:350px;
justify-content:center;
margin:0;
padding:32px;
text-align:center
}
.adyen-checkout__status__icon{
margin-bottom:24px
}
.adyen-checkout__dropin,.adyen-checkout__dropin *,.adyen-checkout__dropin :after,.adyen-checkout__dropin :before{
box-sizing:border-box
}
.adyen-checkout__payment-methods-list--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
pointer-events:none;
user-select:none
}
.adyen-checkout__link{
color:#06f;
text-decoration:none
}
.adyen-checkout__link:hover{
text-decoration:underline
}
/* Checkout component Adyen styling end */
.adyen-checkout__link {
color: #687282;
font-size: 13px;
text-decoration: underline
}
/* never show the close button as this will result in errors */
.threeDS2Modal .action-close {display:none; }
/* Checkout component Adyen styling end */
view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
View file @ 77373c29
......@@ -84,7 +84,6 @@ define(
'expiryYear',
'installment',
'creditCardDetailsValid',
'variant',
'placeOrderAllowed'
]);
......@@ -119,7 +118,7 @@ define(
self.cardComponent = self.checkout.create('card', {
originKey: self.getOriginKey(),
loadingContext: self.getLoadingContext(),
environment: self.getCheckoutEnvironment(),
type: 'card',
hasHolderName: true,
holderNameRequired: true,
......@@ -128,13 +127,12 @@ define(
onChange: function (state, component) {
if (!!state.isValid && !component.state.errors.encryptedSecurityCode) {
self.storeCc = !!state.data.storeDetails;
self.variant(state.brand);
self.creditCardNumber(state.data.encryptedCardNumber);
self.expiryMonth(state.data.encryptedExpiryMonth);
self.expiryYear(state.data.encryptedExpiryYear);
self.securityCode(state.data.encryptedSecurityCode);
self.creditCardOwner(state.data.holderName);
self.storeCc = !!state.data.storePaymentMethod;
self.creditCardNumber(state.data.paymentMethod.encryptedCardNumber);
self.expiryMonth(state.data.paymentMethod.encryptedExpiryMonth);
self.expiryYear(state.data.paymentMethod.encryptedExpiryYear);
self.securityCode(state.data.paymentMethod.encryptedSecurityCode);
self.creditCardOwner(state.data.paymentMethod.holderName);
self.creditCardDetailsValid(true);
self.placeOrderAllowed(true);
} else {
......@@ -269,7 +267,7 @@ define(
/**
* Builds the payment details part of the payment information reqeust
*
* @returns {{method: *, additional_data: {card_brand: *, cc_type: *, number: *, cvc: *, expiryMonth: *, expiryYear: *, holderName: *, store_cc: (boolean|*), number_of_installments: *, java_enabled: boolean, screen_color_depth: number, screen_width, screen_height, timezone_offset: *}}}
* @returns {{method: *, additional_data: {cc_type: *, number: *, cvc: *, expiryMonth: *, expiryYear: *, holderName: *, store_cc: (boolean|*), number_of_installments: *, java_enabled: () => boolean, screen_color_depth: number, screen_width, screen_height, timezone_offset: *, language: *}}}
*/
getCcData: function () {
const browserInfo = threeDS2Utils.getBrowserInfo();
......@@ -277,7 +275,6 @@ define(
var data = {
'method': this.item.method,
additional_data: {
'card_brand': this.variant(),
'cc_type': this.creditCardType(),
'number': this.creditCardNumber(),
'cvc': this.securityCode(),
......@@ -306,7 +303,6 @@ define(
return {
'method': this.item.method,
additional_data: {
'card_brand': this.variant(),
'cc_type': this.creditCardType(),
'store_cc': this.storeCc,
'number_of_installments': this.installment()
......@@ -454,8 +450,8 @@ define(
getOriginKey: function () {
return window.checkoutConfig.payment.adyenCc.originKey;
},
getLoadingContext: function () {
return window.checkoutConfig.payment.adyenCc.checkoutUrl;
getCheckoutEnvironment: function () {
return window.checkoutConfig.payment.adyenCc.checkoutEnvironment;
},
getLocale: function () {
return window.checkoutConfig.payment.adyenCc.locale;
......
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 77373c29
......@@ -373,7 +373,7 @@ define(
items: result.getIssuers(),
onChange: function (state) {
if (!!state.isValid) {
result.issuer(state.data.issuer);
result.issuer(state.data.paymentMethod.issuer);
result.isPlaceOrderAllowed(true);
} else {
......@@ -398,8 +398,8 @@ define(
countryCode: self.getLocale(),
onChange: function (state) {
if (!!state.isValid) {
result.ownerName(state.data["sepa.ownerName"]);
result.ibanNumber(state.data["sepa.ibanNumber"]);
result.ownerName(state.data.paymentMethod["sepa.ownerName"]);
result.ibanNumber(state.data.paymentMethod["sepa.ibanNumber"]);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
......@@ -431,9 +431,9 @@ define(
},
onChange: function (state) {
if (!!state.isValid) {
result.dob(state.data.personalDetails.dateOfBirth);
result.telephone(state.data.personalDetails.telephoneNumber);
result.gender(state.data.personalDetails.gender);
result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
result.gender(state.data.paymentMethod.personalDetails.gender);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
......@@ -456,9 +456,9 @@ define(
},
onChange: function (state) {
if (!!state.isValid) {
result.dob(state.data.personalDetails.dateOfBirth);
result.telephone(state.data.personalDetails.telephoneNumber);
result.gender(state.data.personalDetails.gender);
result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
result.gender(state.data.paymentMethod.personalDetails.gender);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
......
view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js
View file @ 77373c29
......@@ -110,7 +110,7 @@ define(
var checkout = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
loadingContext: self.getLoadingContext(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false
}
......@@ -256,9 +256,10 @@ define(
isValid(true);
if (typeof state.data !== 'undefined' &&
typeof state.data.encryptedSecurityCode !== 'undefined'
typeof state.data.paymentMethod !== 'undefined' &&
typeof state.data.paymentMethod.encryptedSecurityCode !== 'undefined'
) {
self.encryptedCreditCardVerificationNumber = state.data.encryptedSecurityCode;
self.encryptedCreditCardVerificationNumber = state.data.paymentMethod.encryptedSecurityCode;
}
} else {
self.encryptedCreditCardVerificationNumber = '';
......@@ -268,14 +269,6 @@ define(
isValid(false);
}
}
// When we move to the component v2.2 it should be removed
if (self.agreement_data.variant == "maestro" &&
component.state.errors.encryptedSecurityCode
) {
self.placeOrderAllowed(false);
isValid(false);
}
}
})
.mount(oneClickCardNode);
......@@ -566,8 +559,8 @@ define(
getOriginKey: function () {
return window.checkoutConfig.payment.adyenOneclick.originKey;
},
getLoadingContext: function () {
return window.checkoutConfig.payment.adyenOneclick.checkoutUrl;
getCheckoutEnvironment: function () {
return window.checkoutConfig.payment.adyenOneclick.checkoutEnvironment;
}
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment