From dea38d19da0754b6bd0b13817853c83788aa91dd Mon Sep 17 00:00:00 2001 From: Pablo Giralt Date: Mon, 27 Jul 2020 18:07:26 +0200 Subject: [PATCH 01/12] feat: rewriting adyen integration: remove call to /payments endpoint --- components/FinishPayment.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/FinishPayment.vue b/components/FinishPayment.vue index e38140f..fe856d2 100644 --- a/components/FinishPayment.vue +++ b/components/FinishPayment.vue @@ -102,7 +102,8 @@ export default { } }; this.adyenCheckoutInstance = new AdyenCheckout(configuration); - this.initPayment() + this.callback() + // this.initPayment() }, async initPayment () { From 640cf7e7b4df616899d17a8341d2965a4d0b62fe Mon Sep 17 00:00:00 2001 From: Fifciuu Date: Thu, 30 Jul 2020 11:35:16 +0200 Subject: [PATCH 02/12] Small refactor of AdyenPayments component --- components/AdyenPayments.scss | 1497 ++++++++++++++++++++++++++ components/AdyenPayments.vue | 1861 ++------------------------------- 2 files changed, 1582 insertions(+), 1776 deletions(-) create mode 100644 components/AdyenPayments.scss diff --git a/components/AdyenPayments.scss b/components/AdyenPayments.scss new file mode 100644 index 0000000..4fe58fc --- /dev/null +++ b/components/AdyenPayments.scss @@ -0,0 +1,1497 @@ +.threeds-challenge { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(0,0,0,0.2); + z-index: 2000; + } + + .threeds-challenge__inner { + position: absolute; + width: 100%; + max-width: 500px; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + padding: 20px; + background-color: #fff; + } + + .adyen-checkout__field { + display: block; + margin-bottom: 16px; + width: 100%; + } + .adyen-checkout__field:last-of-type { + margin-bottom: 0; + } + .adyen-checkout__label { + display: block; + } + .adyen-checkout__helper-text, + .adyen-checkout__label__text { + color: #00112c; + display: block; + font-size: 0.81em; + font-weight: 400; + line-height: 13px; + padding-bottom: 5px; + } + .adyen-checkout__helper-text { + color: #687282; + } + .adyen-checkout__label__text { + display: block; + overflow: hidden; + text-overflow: ellipsis; + transition: color 0.1s ease-out; + white-space: nowrap; + } + .adyen-checkout__label__text--error { + color: #d10244; + } + .adyen-checkout__label--focused .adyen-checkout__label__text { + color: #06f; + } + .adyen-checkout__error-text { + align-items: center; + color: #d10244; + display: flex; + font-size: 0.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 1.5s infinite linear; + animation: rotateSpinner 1.5s infinite linear; + border: 3px 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 { + border-width: 2px; + 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); + } + } + @keyframes rotateSpinner { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(1turn); + transform: rotate(1turn); + } + } + .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 { + color: inherit; + display: block; + font-size: 0.81em; + font-weight: 400; + line-height: 16px; + margin-bottom: 8px; + overflow: visible; + padding-bottom: 0; + padding-left: 24px; + position: relative; + } + .adyen-checkout__label--focused .adyen-checkout__radio_group__label { + color: inherit; + } + .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 0.2s ease-out, box-shadow 0.2s ease-out; + width: 16px; + } + .adyen-checkout__radio_group__label:hover:before { + border-color: #99a3ad; + box-shadow: 0 0 0 2px #d4d9db; + cursor: pointer; + } + .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, 0.25); + content: ''; + display: block; + height: 6px; + left: 5px; + margin: 0 auto; + position: absolute; + top: 5px; + transform: scale(0); + transition: -webkit-transform 0.2s ease-out; + transition: transform 0.2s ease-out; + transition: transform 0.2s ease-out, -webkit-transform 0.2s 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; + transition: all 0.2s 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__input:checked + + .adyen-checkout__radio_group__label:hover:before, + .adyen-checkout__radio_group__input:checked:active + + .adyen-checkout__radio_group__label:before, + .adyen-checkout__radio_group__input:checked:focus + + .adyen-checkout__radio_group__label:before { + box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4); + } + .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: 0.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 0.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 0.15s ease-out, border 0.05s ease-out, + box-shadow 0.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:hover:not(:focus) + + .adyen-checkout__checkbox__label:after { + border-color: #99a3ad; + box-shadow: 0 0 0 2px #d4d9db; + } + .adyen-checkout__checkbox__input:checked:hover + + .adyen-checkout__checkbox__label:after { + border-color: #06f; + box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4); + } + .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: 100%; + } + .adyen-checkout__dropdown__button { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + background: #fff; + border: 1px solid #b9c4c9; + border-radius: 6px; + font-size: 1em; + height: 40px; + line-height: 20px; + outline: 0; + padding: 9px 24px 9px 12px; + transition: border 0.2s ease-out, box-shadow 0.2s ease-out; + user-select: none; + 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, 0.3); + max-height: 375px; + z-index: 2; + } + .adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active { + margin-top: 2px; + } + .adyen-checkout__dropdown__element { + -moz-user-select: none; + -ms-hyphens: auto; + -ms-user-select: none; + -webkit-hyphens: auto; + -webkit-user-select: none; + border: 1px solid transparent; + cursor: pointer; + font-size: 0.81em; + hyphens: auto; + line-height: 20px; + outline: 0; + padding: 8px; + transition: background 0.2s ease-out, border-color 0.2s ease-out; + user-select: none; + 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, 0.6); + } + .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active { + background: rgba(0, 102, 255, 0.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, 0.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 { + background: #fff; + border: 1px solid #b9c4c9; + border-radius: 6px; + margin: 0; + max-height: 140px; + min-height: 100px; + min-width: 300px; + overflow-y: scroll; + padding: 0; + width: 100%; + } + .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, 0.6); + } + .adyen-checkout__select-list__item--selected { + background: rgba(0, 102, 255, 0.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, 0.15); + } + .adyen-checkout__field-wrapper { + display: flex; + } + .adyen-checkout__field--50 { + width: 50%; + } + .adyen-checkout__field--50:first-child { + margin-right: 8px; + } + .adyen-checkout__field--50:nth-child(2) { + margin-left: 8px; + } + .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 0.2s ease-out, box-shadow 0.2s ease-out; + width: 100%; + } + .adyen-checkout__input:hover { + border-color: #99a3ad; + } + .adyen-checkout__input:required { + box-shadow: none; + } + .adyen-checkout__input--disabled, + .adyen-checkout__input[readonly] { + background: #e6e9eb; + border-color: #e6e9eb; + } + .adyen-checkout__input--disabled:hover { + border-color: #e6e9eb; + } + .adyen-checkout__input-wrapper { + display: 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--invalid { + border-color: #d10244; + } + .adyen-checkout__input--valid { + border-bottom-color: #0abf53; + } + .adyen-checkout__input--error, + .adyen-checkout__input--error:hover, + .adyen-checkout__input--invalid, + .adyen-checkout__input--invalid:hover { + border-color: #d10244; + 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--focus:hover, + .adyen-checkout__input:active, + .adyen-checkout__input:active:hover, + .adyen-checkout__input:focus, + .adyen-checkout__input:focus:hover { + border: 1px solid #06f; + box-shadow: 0 0 0 2px #99c2ff; + } + .adyen-checkout__input[readonly], + .adyen-checkout__input[readonly]:hover { + background-color: #e6e9eb; + border-color: transparent; + color: #687282; + cursor: default; + } + .adyen-checkout__fieldset { + display: block; + padding-bottom: 8px; + width: 100%; + } + .adyen-checkout__fieldset:last-of-type { + padding-bottom: 0; + } + .adyen-checkout__fieldset + .adyen-checkout__fieldset { + margin-top: 16px; + } + .adyen-checkout__fieldset__title { + color: #687282; + display: block; + font-size: 0.68em; + font-weight: 700; + letter-spacing: 1px; + margin: 0; + padding: 0 0 8px; + text-transform: uppercase; + } + .adyen-checkout__field-group, + .adyen-checkout__fieldset__fields { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + } + .adyen-checkout__field-group:last-of-type .adyen-checkout__field { + margin-bottom: 0; + } + .adyen-checkout__field--col-70 { + width: calc(70% - 8px); + } + .adyen-checkout__field--col-30 { + width: calc(30% - 8px); + } + .adyen-checkout__field--col-50 { + width: calc(50% - 8px); + } + .adyen-checkout__fieldset--readonly { + color: #00112c; + font-size: 0.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 { + margin: 0 0 8px; + } + .adyen-checkout__open-invoice .adyen-checkout__checkbox:only-of-type { + margin-bottom: 0; + } + .adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox { + margin: 0; + } + .adyen-checkout__open-invoice + .adyen-checkout__field--gender + .adyen-checkout__radio_group { + display: flex; + } + .adyen-checkout__open-invoice + .adyen-checkout__field--gender + .adyen-checkout__radio_group + > label { + margin-right: 16px; + } + .adyen-checkout__open-invoice + .adyen-checkout__field--gender + .adyen-checkout__label--focused + .adyen-checkout__label__text, + .adyen-checkout__open-invoice + .adyen-checkout__field--gender + .adyen-checkout__label__text { + color: #00112c; + } + .adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress { + padding-bottom: 8px; + } + .adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress { + margin-top: 24px; + padding-bottom: 8px; + } + .adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress { + margin-bottom: 0; + } + .adyen-checkout__open-invoice .adyen-checkout__field--dateOfBirth { + width: calc(50% - 8px); + } + .adyen-checkout__open-invoice .adyen-checkout__field--country, + .adyen-checkout__open-invoice .adyen-checkout__field--street { + width: calc(70% - 8px); + } + .adyen-checkout__open-invoice .adyen-checkout__field--houseNumberOrName, + .adyen-checkout__open-invoice .adyen-checkout__field--postalCode { + width: calc(30% - 8px); + } + .adyen-checkout__button { + background: #00112c; + border: 0; + border-radius: 6px; + color: #fff; + cursor: pointer; + font-size: 1em; + font-weight: 500; + height: 48px; + margin: 0; + padding: 15px; + text-decoration: none; + transition: background 0.3s ease-out, box-shadow 0.3s ease-out; + width: 100%; + } + .adyen-checkout__button--pay { + margin-top: 24px; + } + .adyen-checkout__button--standalone { + margin-top: 0; + } + .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:focus { + box-shadow: 0 0 0 2px #99c2ff; + outline: 0; + } + .adyen-checkout__button:hover { + background: #1c3045; + box-shadow: 0 0, 0 2px 4px -1px rgba(0, 0, 0, 0.2), + 0 4px 5px 0 rgba(0, 0, 0, 0.14); + } + .adyen-checkout__button:active { + background: #3a4a5c; + } + .adyen-checkout__button:hover:focus { + box-shadow: 0 0 0 2px #99c2ff, 0 3px 4px rgba(0, 15, 45, 0.2); + } + .adyen-checkout__button--loading { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + background: #687282; + box-shadow: none; + pointer-events: none; + user-select: none; + } + .adyen-checkout__button .adyen-checkout__spinner { + border-color: transparent #fff #fff; + } + .adyen-checkout__button__content { + align-items: center; + display: flex; + justify-content: center; + } + .adyen-checkout__button__icon { + display: none; + /* margin-right: 12px; */ + } + .adyen-checkout__button__text { + text-transform: uppercase; + letter-spacing: 3px; + display: block; + justify-content: center; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .adyen-checkout__button.adyen-checkout__button--inline { + display: block; + font-size: 0.81em; + height: auto; + padding: 10px 8px; + width: auto; + } + .adyen-checkout__button.adyen-checkout__button--secondary { + background: rgba(0, 102, 255, 0.1); + border: 1px solid transparent; + color: #06f; + padding: 10px 12px; + } + .adyen-checkout__button.adyen-checkout__button--secondary:hover { + background: rgba(0, 102, 255, 0.2); + box-shadow: none; + } + .adyen-checkout__button.adyen-checkout__button--secondary:active, + .adyen-checkout__button.adyen-checkout__button--secondary:active:hover { + background: rgba(0, 102, 255, 0.3); + box-shadow: none; + } + .adyen-checkout__button.adyen-checkout__button--completed, + .adyen-checkout__button.adyen-checkout__button--completed:active, + .adyen-checkout__button.adyen-checkout__button--completed:active:hover, + .adyen-checkout__button.adyen-checkout__button--completed:hover { + background: #0abf53; + color: #fff; + } + .adyen-checkout__button.adyen-checkout__button--completed + .adyen-checkout__button__icon { + -webkit-filter: brightness(0) invert(1); + filter: brightness(0) invert(1); + } + .adyen-checkout__applepay__button { + height: 40px; + width: 240px; + } + .adyen-checkout__dropin .adyen-checkout__applepay__button { + width: 100%; + } + .adyen-checkout__card-input__form { + transition: opacity 0.25s ease-out; + } + .adyen-checkout__card__cardNumber { + max-width: 400px; + } + .adyen-checkout__card__cardNumber__input { + padding: 5px 8px; + } + .adyen-checkout__card__exp-date__input--oneclick { + font-weight: 400; + line-height: 30px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .adyen-checkout__card__holderName, + .adyen-checkout__field--expiryDate, + .adyen-checkout__field--storedCard { + margin-bottom: 0; + } + .adyen-checkout__card__holderName, + .adyen-checkout__store-details { + margin-top: 16px; + } + .adyen-checkout__field--cardNumber + .adyen-checkout__input--error + .adyen-checkout__card__cardNumber__brandIcon { + display: none; + } + .adyen-checkout__field--cardNumber + .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand) + + .adyen-checkout-input__inline-validation--valid { + display: none; + } + .adyen-checkout__giropay__no-results { + color: #687282; + display: block; + font-size: 0.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: 0.81em; + line-height: 16px; + vertical-align: middle; + } + .adyen-checkout__giropay__error { + color: #d10244; + font-size: 0.81em; + } + .adyen-checkout__dropin .gpay-button.long { + height: 48px; + padding: 15px 24px 13px; + transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out; + width: 100%; + } + .adyen-checkout__field--issuer-list { + margin-bottom: 0; + } + .adyen-checkout__econtext-input__field { + display: flex; + flex-wrap: wrap; + } + .adyen-checkout__econtext-input__field .adyen-checkout__field--firstName, + .adyen-checkout__econtext-input__field .adyen-checkout__field--lastName { + max-width: 100%; + min-width: 250px; + width: calc(50% - 8px); + } + .adyen-checkout__econtext-input__field .adyen-checkout__field--firstName { + margin-right: 16px; + } + .adyen-checkout__voucher-result { + border-radius: 12px; + box-sizing: border-box; + position: relative; + text-align: center; + } + .adyen-checkout__voucher-result__bottom, + .adyen-checkout__voucher-result__top { + background: #fff; + border: 1px solid #d4d9db; + } + .adyen-checkout__voucher-result__top { + border-bottom: 0; + border-radius: 12px 12px 0 0; + padding: 40px 0 24px; + } + .adyen-checkout__voucher-result__bottom { + border-radius: 0 0 12px 12px; + border-top: 0; + } + .adyen-checkout__voucher-result__separator { + align-items: center; + background: #fff; + display: flex; + height: 13px; + margin: 0 auto; + position: relative; + width: calc(100% - 14px); + } + .adyen-checkout__voucher-result__separator:after, + .adyen-checkout__voucher-result__separator:before { + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMGw1IDIgMS41IDRIN1YwSDB6bTAgMTNsNS0yIDEuNS00SDd2NkgweiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik02LjQyMyA2LjVDNi40MjMgMy4zMTIgMy43ODMuNzU2LjUuNTE4YzMuMzg2LjIzNiA2IDIuODU1IDYgNS45ODIgMCAzLjEyNy0yLjYxNCA1Ljc0Ni02IDUuOTgzdi0uMDAxYzMuMjg0LS4yMzcgNS45MjMtMi43OTQgNS45MjMtNS45ODJ6IiBzdHJva2U9IiNENEQ5REIiLz48cGF0aCBmaWxsPSIjRDREOURCIiBkPSJNMCAwaDF2MUgwek0wIDEyaDF2MUgweiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDd2MTNIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=); + } + .adyen-checkout__voucher-result__separator:before { + background-position: 100%; + background-repeat: no-repeat; + content: ''; + height: 13px; + left: -7px; + position: absolute; + top: 0; + width: 7px; + } + .adyen-checkout__voucher-result__separator:after { + -webkit-transform: rotate(-180deg); + background-position: 100%; + background-repeat: no-repeat; + content: ''; + height: 13px; + position: absolute; + right: -7px; + top: 0; + transform: rotate(-180deg); + width: 7px; + } + .adyen-checkout__voucher-result__separator__inner { + border-top: 1px solid #e6e9eb; + width: 100%; + } + .adyen-checkout__voucher-result__image { + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 40px; + width: 100%; + } + .adyen-checkout__voucher-result__image__wrapper { + display: block; + height: 48px; + margin: 0 24px; + position: relative; + } + .adyen-checkout__voucher-result__image__wrapper:after { + border: 1px solid rgba(0, 27, 43, 0.17); + border-radius: 3px; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + .adyen-checkout__voucher-result__image__wrapper:nth-child(2):before { + border-left: 1px solid #d4d9db; + content: ''; + height: 64px; + left: -24.5px; + position: absolute; + top: -8px; + width: 1px; + } + .adyen-checkout__voucher-result__image__brand, + .adyen-checkout__voucher-result__image__issuer { + border-radius: 3px; + height: 48px; + } + .adyen-checkout__voucher-result__introduction { + color: #00112c; + font-size: 0.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: 0.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; + line-height: 19px; + margin: 0 auto; + position: absolute; + right: 0; + top: -2px; + user-select: none; + width: auto; + } + .adyen-checkout__voucher-result__code__label:before { + content: ''; + position: absolute; + } + .adyen-checkout__voucher-result__code__label__text { + background: #fff; + color: #00112c; + font-size: 13px; + letter-spacing: normal; + line-height: 1; + padding: 0 8px; + } + .adyen-checkout__voucher-result__code__barcode { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + display: block; + height: 56px; + margin: 0 auto 8px; + max-width: 100%; + user-select: none; + } + .adyen-checkout__voucher-result__code { + -moz-user-select: all; + -ms-user-select: all; + -webkit-user-select: all; + border-width: 1px 0; + color: #00112c; + display: inline-block; + font-size: 1.5em; + font-weight: 700; + letter-spacing: 1px; + line-height: 1.2; + margin: 0 auto; + padding: 16px 48px; + position: relative; + text-align: center; + user-select: all; + width: 100%; + word-break: break-word; + } + .adyen-checkout__voucher-result__details { + list-style: none; + margin: -1px auto 0; + padding: 0; + } + .adyen-checkout__voucher-result__details__item { + border-top: 1px solid #e6e9eb; + color: #00112c; + display: flex; + font-size: 0.81em; + justify-content: space-between; + padding: 16px 24px; + 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__voucher-result__actions { + align-items: center; + display: flex; + justify-content: center; + list-style: none; + margin: 0 auto 32px; + max-width: 100%; + min-width: 200px; + padding: 0; + width: 300px; + } + .adyen-checkout__voucher-result__actions__item { + margin: 0 4px; + } + .adyen-checkout__link--more-information { + display: block; + font-size: 0.81em; + font-weight: 400; + margin: 16px 0; + text-align: center; + } + .adyen-checkout__phone-input__container { + display: flex; + } + .adyen-checkout__phone-input__prefix { + margin-bottom: 0; + margin-right: 0.5em; + width: 30%; + } + .adyen-checkout__input--phone-number { + margin-bottom: 0; + width: 70%; + } + .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__subtitle--result { + margin-bottom: 32px; + } + .adyen-checkout__qr-loader__payment_amount, + .adyen-checkout__qr-loader__subtitle { + color: #00112c; + font-size: 1em; + line-height: 19px; + } + .adyen-checkout__qr-loader__icon { + height: 88px; + width: 88px; + } + .adyen-checkout__qr-loader__icon--result { + margin-bottom: 100px; + } + .adyen-checkout__qr-loader__payment_amount { + font-weight: 700; + } + .adyen-checkout__qr-loader__progress { + background: #d4d9db; + border-radius: 24px; + height: 4px; + margin: 32px auto 12px; + padding-right: 3%; + width: 152px; + } + .adyen-checkout__qr-loader__percentage { + background: #06f; + border-radius: 24px; + display: block; + height: 100%; + } + .adyen-checkout__qr-loader__countdown { + color: #687282; + font-size: 0.81em; + } + .adyen-checkout__qr-loader > .adyen-checkout__spinner__wrapper { + margin: 60px 0; + } + .adyen-checkout__qr-loader__separator__label { + background: #fff; + border-radius: 50%; + 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__doku-input__field { + display: flex; + flex-wrap: wrap; + } + .adyen-checkout__doku-input__field .adyen-checkout__field--firstName, + .adyen-checkout__doku-input__field .adyen-checkout__field--lastName { + max-width: 100%; + min-width: 250px; + width: calc(50% - 8px); + } + .adyen-checkout__doku-input__field .adyen-checkout__field--firstName { + margin-right: 16px; + } + .adyen-checkout__voucher-result--boletobancario + .adyen-checkout__voucher-result__code { + font-size: 0.81em; + line-height: 19px; + padding: 24px; + word-break: break-all; + } + .adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code { + font-size: 0.81em; + line-height: 19px; + padding: 24px; + word-break: break-all; + } + .adyen-checkout__payment-method { + background: #fff; + border: 1px solid #e6e9eb; + cursor: pointer; + margin-top: -1px; + position: relative; + transition: opacity 0.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: 12px; + border-top-right-radius: 12px; + margin-top: 0; + } + .adyen-checkout__payment-method--next-selected, + .adyen-checkout__payment-method:last-child { + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + margin-bottom: 0; + } + .adyen-checkout__payment-method--loading { + opacity: 0.2; + } + .adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading { + opacity: 0.9; + } + .adyen-checkout__payment-method--disabling { + opacity: 0.3; + } + .adyen-checkout__payment-method__header { + align-items: center; + color: #00112c; + display: flex; + flex-wrap: nowrap; + font-size: 1em; + font-weight: 400; + justify-content: space-between; + padding: 16px 16px 16px 48px; + position: relative; + transition: background 0.1s ease-out; + width: 100%; + } + .adyen-checkout__payment-method--standalone + .adyen-checkout__payment-method__header { + padding: 16px; + } + .adyen-checkout__payment-method__header__title { + align-items: center; + display: flex; + flex-shrink: 0; + margin-right: 16px; + max-width: 100%; + } + .adyen-checkout__payment-method__surcharge { + color: #687282; + margin-left: 5px; + } + .adyen-checkout__payment-method--selected { + background: #f7f8f9; + border: 1px solid #e6e9eb; + border-radius: 12px; + cursor: default; + margin: 8px 0; + transition: margin 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0ms, + opacity 0.3s ease-out; + } + .adyen-checkout__payment-method--selected + .adyen-checkout__payment-method__header { + flex-wrap: wrap; + } + .adyen-checkout__payment-method__name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .adyen-checkout__payment-method__name--selected { + font-weight: 500; + } + .adyen-checkout__payment-method__details { + padding: 0 16px; + } + .adyen-checkout__payment-method__details__content { + margin: 0 0 16px; + } + .adyen-checkout__payment-method__image__wrapper { + height: 26px; + opacity: 0; + position: relative; + transition: opacity 0.15s ease-out; + width: 40px; + } + .adyen-checkout__payment-method__image__wrapper--loaded { + opacity: 1; + } + .adyen-checkout__payment-method__image__wrapper:after { + border: 1px solid rgba(0, 27, 43, 0.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__brands { + display: flex; + flex-basis: auto; + flex-shrink: 1; + flex-wrap: wrap; + height: 16px; + margin: 4px 0; + overflow: hidden; + text-align: right; + } + .adyen-checkout__payment-method--selected + .adyen-checkout__payment-method__brands { + height: auto; + overflow: visible; + text-align: left; + } + .adyen-checkout__payment-method__brands + .adyen-checkout__payment-method__image__wrapper { + display: inline-block; + height: 16px; + margin-right: 4px; + transition: opacity 0.2s ease-out; + width: 24px; + } + .adyen-checkout__payment-method__brands + .adyen-checkout__payment-method__image__wrapper:last-child { + margin: 0; + } + .adyen-checkout__payment-method--selected + .adyen-checkout__payment-method__brands + .adyen-checkout__payment-method__image__wrapper { + margin-bottom: 4px; + } + .adyen-checkout__payment-method__brands img { + height: 16px; + width: 24px; + } + .adyen-checkout__payment-method__image__wrapper--disabled { + opacity: 0.25; + } + .adyen-checkout__payment-method__disable-confirmation { + align-items: center; + background: #e6e9eb; + color: #00112c; + display: flex; + font-size: 1em; + 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: 0.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%; + height: 16px; + left: 16px; + position: absolute; + transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; + width: 16px; + } + .adyen-checkout__payment-method--standalone + .adyen-checkout__payment-method__radio { + display: none; + } + .adyen-checkout__payment-method__radio:after { + -webkit-transform: translateY(-50%) scale(0); + background-color: #fff; + border-radius: 50%; + content: ''; + display: block; + height: 6px; + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%) scale(0); + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; + width: 6px; + } + .adyen-checkout__payment-method__radio:hover { + border-color: #99a3ad; + box-shadow: 0 0 0 2px #d4d9db; + cursor: pointer; + } + .adyen-checkout__payment-method__radio--selected { + background-color: #06f; + border: 0; + transition: all 0.3s ease-out; + } + .adyen-checkout__payment-method__radio--selected:hover { + box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4); + } + .adyen-checkout__payment-method__radio--selected:after { + -webkit-transform: translateY(-50%) scale(1); + transform: translateY(-50%) scale(1); + } + .adyen-checkout__status { + align-items: center; + background-color: #fff; + border: 1px solid #d4d9db; + border-radius: 6px; + color: #00112c; + display: flex; + flex-direction: column; + font-size: 1em; + 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; + } \ No newline at end of file diff --git a/components/AdyenPayments.vue b/components/AdyenPayments.vue index 2684367..c93f6b4 100644 --- a/components/AdyenPayments.vue +++ b/components/AdyenPayments.vue @@ -1,59 +1,41 @@ - \ No newline at end of file +