diff --git a/README.md b/README.md
index 580a154..8ab5a3d 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,56 @@
 # Vue Storefront Adyen Payment Module
 
-Use at Your own risk.
+This module allows payments through Adyen Payments from Vue Storefront using Magento as backend.  
+The module follows [Adyen's recomendations](https://docs.adyen.com/plugins/magento-2/magento-pwa-storefront) for integrating a PWA using their magento extension.
+
+## Requirements
+- Magento >= 2.3.5 (may work in earlier version but it has not been tested)
+- Adyen Magento2 extension version >= 6.5.0
+- Vue Storefront >= 1.10.0
+- Have latest version of [magento2-rest-client](magento2-rest-client). At least you need [this PR](https://github.com/DivanteLtd/magento2-rest-client/pull/35)
+
+## Before you begin
+
+Before starting to integrate this module in your VueStorefront project, you will have to set-up the following:
+- [Create a Adyen test account if you do not have one.](https://www.adyen.com/)
+- [Set up the Adyen Customer Area.](https://docs.adyen.com/plugins/magento-2/set-up-adyen-customer-area)
+- [Set up the plugin in Magento.](https://docs.adyen.com/plugins/magento-2/set-up-the-plugin-in-magento)
+- [Set up the payment methods in Magento.](https://docs.adyen.com/plugins/magento-2/set-up-the-payment-methods-in-magento)
 
 #### Features:
 - [x] Adyen CreditCard payment
-- [x] Adyen PayPal payment
 - [x] Adyen field validation and encryption.
+- [x] 3DS2 authentification
 
 #### To be done:
-- [ ] Add notifications depend on Adyen callbacks.
+- [ ] Retry 3DS2 Authentification after entering wrong code.
+- [ ] Adyen PayPal payment.
 - [ ] Add other payments methods.
-
-If you have any questions or suggestion then please feel free to drop a line ;)
+- [ ] 3DS1 authentification.
+- [ ] Store credit carts with Adyen Vault.
 
 ## Installation:
 
 ```shell
-$ git clone git@github.com:melvin-hamilton-digital/vsf-payment-adyen.git ./vue-storefront/src/modules/adyen
+$ git clone https://github.com/jimmylion/vsf-payment-adyen.git ./vue-storefront/src/modules/adyen
 ```
 
 ## Configuration
 `config/local.json`
 Add API Key and paypal endpoint to hendle PayPal result from adyen.
 ```json
-"adyen": {
-  "originKey": "origin_key",
-  "paypalResultHandler": "https://your-backend/adyen-end-points/paypal"
-}
+  "adyen": {
+    "originKey": "origin_key",
+    "paypalResultHandler": "https://your-backend/adyen-end-points/paypal",
+    "environment": "test",
+    "saveCards": true/false,
+    "allow3DS2": true/false,
+    "originKeys": {
+      "http://localhost:3000": "your localhost origin_key",
+      "https://staging.your-vsf.com": "your staging origin_key",
+      "https://your-vsf.com": "your production origin key"
+    }
+  },
 ```
 
 set Driver for adyen
@@ -40,11 +64,6 @@ set Driver for adyen
   }
 
 ```
-[How to get the API key](https://docs.adyen.com/developers/user-management/how-to-get-the-api-key)
-
-`sprykerConfirm` - used in /store/actions.ts -> backConfirmation 
-
-
 
 ## Register the Adyen module
 
@@ -52,11 +71,11 @@ In `./src/modules/index.ts`
 
 ```js
 ...
-import { Adyen } from './adyen'
+import { PaymentAdyen } from './payment-adyen';
 
 export const registerModules: VueStorefrontModule[] = [
   ...,
-  Adyen
+  PaymentAdyen
 ]
 ```
 
@@ -64,61 +83,32 @@ export const registerModules: VueStorefrontModule[] = [
 Under your theme `components/core/blocks/Checkout/Payment.vue`.
 
 ```js
-import CardForm from 'src/modules/adyen/components/CardForm'
-import PayPal from 'src/modules/adyen/components/PayPal'
-
 export default {
   components: {
     ...
-    CardForm,
-    PayPal
-  },
-  ...
-  computed: {
-  ...
-    isAdyenValid () {
-      return this.$store.state.adyen.isAdyenValid
-    }
+    AdyenPayments: () =>
+      import("src/modules/payment-adyen/components/AdyenPayments.vue")
   },
 ```
 
+@todo - explain where and how to include the FinishPayment component.  In our case it is in:
+src/themes/jimmylion-theme/pages/Checkout.vue
+src/themes/jimmylion-theme/components/ui/Checkout/OrderReview.vue
+
 Also add form component to your template:
 
 ```html
-<card-form v-if="payment.paymentMethod === 'adyenCreditCard'"/>
-<pay-pal v-else-if="payment.paymentMethod === 'adyenPayPal'"/>
-```
-and !isAdyenValid to "Go review the order" button, for disabling it until all card data was validate.
-```html
-<button-full
-  @click.native="sendDataToCheckout"
-  data-testid="paymentSubmit"
-  :disabled="$v.payment.$invalid || !isAdyenValid"
->
-  {{ $t('Go review the order') }}
-</button-full>
+<AdyenPayments
+  v-show="payment.paymentMethod === 'adyen_cc' && adyenVisible"
+  @providedAdyenData="providedAdyenData"
+/>
 ```
 
-Your backend should return 
-`"paymentmethods_endpoint": "https://www.en.spryker-demo.melvin-hamilton.store/vsbridge/cart/payment-methods?token={{token}}&cartId={{cartId}}",`
-```json
-{
-    "code": 200,
-    "result": [
-        {
-            "code": "adyenCreditCard",
-            "title": "Credit Card"
-        },
-        {
-            "code": "adyenPayPal",
-            "title": "PayPal"
-        }
-    ]
-}
-```
-## References
-In vue-storefront/src/modules/adyen/components/CardForm.vue find `csfSetupObj` inside you can add styles, placeholders, define rootNode etc.
+## API Installation
+[How to get the API key](https://docs.adyen.com/developers/user-management/how-to-get-the-api-key)
 
+
+## References
 [Styling Secured Fields](https://docs.adyen.com/developers/checkout/api-integration/configure-secured-fields/styling-secured-fields)
 
 ```js
diff --git a/adyen-utils/.babelrc b/adyen-utils/.babelrc
deleted file mode 100644
index 4d83c57..0000000
--- a/adyen-utils/.babelrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "browsers": [ ">0.25%"]
-      }
-    }]
-  ]
-}
diff --git a/adyen-utils/.gitignore b/adyen-utils/.gitignore
deleted file mode 100644
index d3f255a..0000000
--- a/adyen-utils/.gitignore
+++ /dev/null
@@ -1,10 +0,0 @@
-node_modules
-/coverage
-/.idea
-/*.log
-.idea
-.env
-.idea/
-
-.DS_Store
-stats.json
diff --git a/adyen-utils/LICENSE b/adyen-utils/LICENSE
deleted file mode 100644
index 9df8200..0000000
--- a/adyen-utils/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2019 Adyen bv
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/adyen-utils/README.md b/adyen-utils/README.md
deleted file mode 100644
index 48ce5b4..0000000
--- a/adyen-utils/README.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# 3DS 2.0 JavaScript utilities
-
-These utilities are helper functions to get 3DS 2.0 integrated on to your webpage.
-
-## Requirements
-3DS 2.0 Back-end integration with Adyen:  https://docs.adyen.com/classic-integration/3d-secure-2-classic-integration/browser-based-integration/
-
-## Installation
-
-#### Option A: Clone the repo and import functions directly through UMD / ES2015
-```javascript
-import collectBrowserInfo from "./browser";
-import base64Url from "./base64url";
-import createIframe from "./iframe";
-import createForm from "./form";
-import config from "./config.js";
-```
-
-#### Option B: Build the file, link to it and use ThreeDS2Utils on the global scope
-
-Install the development dependencies:
-```terminal
-npm install
-```
-Build the file:
-```terminal
-npm run build
-```
-
-Embed it on your page:
-```
-<script type="text/javascript" src="YOUR_PATH/threeds2-js-utils.js">
-```
-Functionality can then be accessed via:
-```javascript
-window.ThreedDS2Utils
-```
-e.g.
-```javascript
-window.ThreedDS2Utils.getBrowserInfo()
-```
-
-## Usage
-
-N.B. The following code snippets are based on installation via Approach 1:
-
-### Gathering browser information
-
-Collects available frontend browser info and store it in the properties dictated by EMVCo specification.
-[EMV® 3-D Secure Protocol and Core Functions Specification](https://www.emvco.com/emv-technologies/3d-secure/)
-
-```javascript
-/**
- * @function collectBrowserInfo
- * @returns {Object} - browserInfo an object containing the retrieved browser properties
- */
-const browserInfo = collectBrowserInfo();
-```
-This returns an object with the following keys:
-```javascript
-{
-    screenWidth,
-    screenHeight,
-    colorDepth,
-    userAgent,
-    timeZoneOffset,
-    language,
-    javaEnabled
-}
-```
-
-### Base64Url encoding and decoding
-```javascript
-base64Url.encode
-```
-returns a base64URL encoded string
-```javascript
-base64Url.decode
-```
-returns a base64URL decoded string
-
-```javascript
-/**
- * @function base64Url
- * @param { String } - string to be encoded/decoded
- * @returns {String} - a regular string
- */
-const base64URLencodedString = base64Url.encode('STRING');
-const base64URLdecodedString = base64Url.decode('ENCODED_STRING')
-```
-
-### Creating an iframe
-Creates an ```iframe``` of specified size element with an ```onload``` listener and adds the ```iframe``` to the passed container element
-
-```javascript
-/**
- * @function createIframe
- * @param container {HTMLElement} - the container to place the iframe into, defaults to document body
- * @param name {String} - the name for the iframe element
- * @param width {String} - the width of the iframe, defaults to 0
- * @param height {String} - the height of the iframe, defaults to 0
- * @param callback { Function } - optional, the callback to fire after the iframe loads content
- *
- * @returns {Element} - Created iframe element
- */
-const iframe = createIframe(
-    container,
-    'IFRAME_NAME',
-    '400',
-    '600'
-);
-```
-
-### Creating a form
-Creates a ```form``` element with a ```target``` attribute
-```javascript
-/**
- * @function createForm
- * @param name {String} - the name of the form element
- * @param action {String} - the action for the form element
- * @param target {String} - the target for the form element (specifies where the submitted result will open i.e. an iframe)
- * @param inputName {String} - the name of the input element holding the base64Url encoded JSON
- * @param inputValue {String} - the base64Url encoded JSON
- *
- * @returns {Element} - Created form element
- */
-
-const form = createForm(
-    'FORM_ELEMENT NAME',
-    "FORM_ACTION",
-    "TARGET_NAME",
-    "INPUT_ELEMENT_NAME",
-    "DATA_TO_POST");
-```
-
-### Validating and retrieving challenge window sizes
-```javascript
-config.validateChallengeWindowSize
-
-```
-ensures that the passed string is one of values that the ACS expects, else returns ```'01'```
-
-```javascript
-config.getChallengeWindowSize
-```
-returns an array of pixel values based on the validated challenge window size e.g. ```['250px', '400px']```
-
-```javascript
-/**
- * @function config.validateChallengeWindowSize
- * @param sizeStr - a size string to confirm as valid
- * @returns {String} - a valid size string
- */
-const validWindowSize = config.validateChallengeWindowSize('STRING');
-```
-```javascript
-/**
- * @function config.getChallengeWindowSize
- * @param sizeStr - a size string to confirm as valid
- * @returns {array} - an array of values [WIDTH, HEIGHT]
- */
-const windowSizesArray = config.getChallengeWindowSize('STRING');
-```
-
-## Documentation
-[3DS 2.0 Helper Functions Implementation](https://docs.adyen.com/3d-secure-2-and-checkout-api/checkout-api-helper-functions/ "Documentation")
-
-## Support
-You can open tickets for any issues with the helper functions. In case of specific problems with your account or generic 3DS 2.0 issues and questions, please contact
-support@adyen.com.
-
-## License
-MIT license. For more information, see the LICENSE file.
diff --git a/adyen-utils/base64url/index.js b/adyen-utils/base64url/index.js
deleted file mode 100644
index f98d466..0000000
--- a/adyen-utils/base64url/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @function encodeBase64URL
- *
- * @desc Takes a string and encodes it as a base64url string
- * (https://en.wikipedia.org/wiki/Base64#URL_applications)
- * (See also https://tools.ietf.org/html/rfc7515)
- *
- * @example const jsonStr = JSON.stringify( {name:'john', surname:'smith'} );
- *          const base64url = base64URL.encode(jsonStr);
- *
- * @param dataStr {String} - data, as a string, to be encoded
- *
- * @returns base64url {String} : a base64url encoded string
- */
-const encodeBase64URL = (dataStr) => {
-    let base64 = window.btoa(dataStr);
-    let base64url = base64.split('=')[0]; // Remove any trailing '='s
-
-    base64url = base64url.replace(/\+/g, '-'); // 62nd char of encoding
-    base64url = base64url.replace(/\//g, '_'); // 63rd char of encoding
-
-    return base64url;
-};
-
-/**
- * @function decodeBase64URL
- *
- * @desc Takes a base64url encoded string and decodes it to a regular string
- * (See also https://tools.ietf.org/html/rfc7515)
- *
- * @example const dataStr = base64URL.decode(base64url)
- *          const decodedObj = JSON.parse(dataStr);
- *
- * @param str {String} - base64url encoded string
- *
- * @returns {String} - a regular string
- */
-const decodeBase64URL = (str) => {
-    let base64 = str;
-    base64 = base64.replace(/-/g, '+'); // 62nd char of encoding
-    base64 = base64.replace(/_/g, '/'); // 63rd char of encoding
-    switch (base64.length % 4) // Pad with trailing '='s
-    {
-        case 0:
-            break; // No pad chars in this case
-        case 2:
-            base64 += "=="; break; // Two pad chars
-        case 3:
-            base64 += "="; break; // One pad char
-        default:
-            if(window.console && window.console.log){
-                window.console.log('### base64url::decodeBase64URL::  Illegal base64url string!');
-            }
-    }
-
-    try {
-        return window.atob(base64);
-    } catch (e) {
-        throw new Error(e);
-    }
-};
-
-const base64URL = {
-    encode : encodeBase64URL,
-    decode: decodeBase64URL
-};
-
-export default base64URL;
diff --git a/adyen-utils/base64url/index.test.js b/adyen-utils/base64url/index.test.js
deleted file mode 100644
index 6af0893..0000000
--- a/adyen-utils/base64url/index.test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import base64URL from './index';
-
-describe('base64 URL encoding', () => {
-    describe('base64URL.encode', () => {
-        test('encodes any URL', () => {
-            expect(base64URL.encode("https://www.google.com?!5151290##!!515")).toBe('aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbT8hNTE1MTI5MCMjISE1MTU');
-            expect(base64URL.encode("gibber      ish")).toBe('Z2liYmVyICAgICAgaXNo');
-        });
-    });
-});
-
-describe('base64 URL decoding', () => {
-    describe('base64URL.decode', () => {
-        test('decodes a base64 encoded URL', () => {
-
-            window.log3dssdk = true;
-            expect(base64URL.decode("aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbT8hNTE1MTI5MCMjISE1MTU")).toBe('https://www.google.com?!5151290##!!515');
-            expect(() => {
-                base64URL.decode('gibberish');
-            }).toThrow();
-        });
-    });
-});
-
-describe('base64 URL encoding', () => {
-    test('replaces the plus character from a base64 URL string', () => {
-        expect(base64URL.encode('https://www.adyen.com/our+solution/online+payments')).toBe('aHR0cHM6Ly93d3cuYWR5ZW4uY29tL291citzb2x1dGlvbi9vbmxpbmUrcGF5bWVudHM');
-    });
-
-    test('replaces slashes in a base64 URL string', () => {
-        expect(base64URL.encode('https://www.adyen.com/our_solution//online_payments')).toBe('aHR0cHM6Ly93d3cuYWR5ZW4uY29tL291cl9zb2x1dGlvbi8vb25saW5lX3BheW1lbnRz');
-    });
-});
diff --git a/adyen-utils/config/index.js b/adyen-utils/config/index.js
deleted file mode 100644
index 6843c1d..0000000
--- a/adyen-utils/config/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export const THREEDS_METHOD_TIMEOUT = 10000;
-export const CHALLENGE_TIMEOUT = 600000;
-
-// Re. EMV 3-D Specification: EMVCo_3DS_Spec_210_1017.pdf
-export const challengeWindowSizes = {
-    '01': ['250px', '400px'],
-    '02': ['390px', '400px'],
-    '03': ['500px', '600px'],
-    '04': ['600px', '400px'],
-    '05': ['100%', '100%']
-};
-
-/**
- * @desc Accepts a size string for the challenge window & returns it if it is valid else returns a default value
- * @param sizeStr - the size string to check the validity of
- * @returns {string} - a valid size string
- */
-export function validateChallengeWindowSize(sizeStr){
-    let sizeString = (sizeStr.length === 1)? `0${sizeStr}` : sizeStr;
-    return (challengeWindowSizes.hasOwnProperty(sizeString)) ? sizeString : '01';
-}
-
-/**
- * @desc Accepts a size string for the challenge window & returns the corresponding array of w/h values
- * @param sizeStr
- * @returns {*}
- */
-export function getChallengeWindowSize(sizeStr){
-    return challengeWindowSizes[ validateChallengeWindowSize(sizeStr) ];
-}
-
-const config = {
-    challengeWindowSizes,
-    validateChallengeWindowSize,
-    getChallengeWindowSize,
-    THREEDS_METHOD_TIMEOUT,
-    CHALLENGE_TIMEOUT
-};
-
-export default config;
\ No newline at end of file
diff --git a/adyen-utils/config/index.test.js b/adyen-utils/config/index.test.js
deleted file mode 100644
index 042d653..0000000
--- a/adyen-utils/config/index.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import config from "./index";
-
-describe('config', () => {
-    describe('validateChallengeWindowSize', () => {
-        test('Validates a valid size', () => {
-
-            expect(config.validateChallengeWindowSize('05')).toBe('05');
-            expect(config.validateChallengeWindowSize('03')).toBe('03');
-        });
-
-        test('Returns 01 on an invalid size', () => {
-            expect(config.validateChallengeWindowSize('42')).toBe('01');
-            expect(config.validateChallengeWindowSize(true)).toBe('01');
-            expect(config.validateChallengeWindowSize('lol')).toBe('01');
-        });
-    });
-
-    describe('getChallengeWindowSizes', () => {
-        test('getting sizes with invalid string', () => {
-
-            const size01 = ['250px', '400px'];
-            expect(config.getChallengeWindowSize(41)).toEqual(size01);
-            expect(config.getChallengeWindowSize('test')).toEqual(size01);
-            expect(config.getChallengeWindowSize(true)).toEqual(size01);
-            expect(config.getChallengeWindowSize(false)).toEqual(size01);
-        });
-
-        test('getting sizes with valid string', () => {
-            const size01 = ['250px', '400px'];
-            const size05 = ['100%', '100%'];
-            expect(config.getChallengeWindowSize('01')).toEqual(size01);
-            expect(config.getChallengeWindowSize('05')).toEqual(size05);
-        });
-    });
-});
-
diff --git a/adyen-utils/dist/threeds2-js-utils.js b/adyen-utils/dist/threeds2-js-utils.js
deleted file mode 100644
index 939262a..0000000
--- a/adyen-utils/dist/threeds2-js-utils.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports.ThreedDS2Utils=n():e.ThreedDS2Utils=n()}(this,function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";t.r(n);var r={container:void 0},o={"01":["250px","400px"],"02":["390px","400px"],"03":["500px","600px"],"04":["600px","400px"],"05":["100%","100%"]};function a(e){return o.hasOwnProperty(e)?e:"01"}var i={createIframe:function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"0",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"0",a=arguments.length>4?arguments[4]:void 0;if(!n||0===n.length)throw new Error("Name parameter missing for iframe");e instanceof HTMLElement?r.container=e:r.container=document.body;var i=document.createElement("iframe");i.classList.add(n+"Class"),i.width=t,i.height=o,i.name=n,i.setAttribute("frameborder","0"),i.setAttribute("border","0");var d=document.createTextNode("<p>Your browser does not support iframes.</p>");return i.appendChild(d),r.container.appendChild(i),function(e,n){e.attachEvent?e.attachEvent("onload",function(){n&&"function"===typeof n&&n(e.contentWindow)}):e.onload=function(){n&&"function"===typeof n&&n(e.contentWindow)}}(i,a),i},createForm:function(e,n,t,r,o){if(!e||!n||!t||!r||!o)throw new Error("Not all required parameters provided for form creation");if(0===e.length||0===n.length||0===t.length||0===r.length||0===o.length)throw new Error("Not all required parameters have suitable values");var a=document.createElement("form");a.style.display="none",a.name=e,a.action=n,a.method="POST",a.target=t;var i=document.createElement("input");return i.name=r,i.value=o,a.appendChild(i),a},getBrowserInfo:function(){var e=window&&window.screen?window.screen.width:"",n=window&&window.screen?window.screen.height:"",t=window&&window.screen?window.screen.colorDepth:"",r=window&&window.navigator?window.navigator.userAgent:"",o=!(!window||!window.navigator)&&navigator.javaEnabled(),a="";return window&&window.navigator&&(a=window.navigator.language?window.navigator.language:window.navigator.browserLanguage),{screenWidth:e,screenHeight:n,colorDepth:t,userAgent:r,timeZoneOffset:(new Date).getTimezoneOffset(),language:a,javaEnabled:o}},base64Url:{encode:function(e){var n=window.btoa(e).split("=")[0];return n=(n=n.replace("/+/g","-")).replace("///g","_")},decode:function(e){var n=e;switch((n=(n=n.replace("/-/g","+")).replace("/_/g","/")).length%4){case 0:break;case 2:n+="==";break;case 3:n+="=";break;default:window.console&&window.console.log&&window.console.log("### base64url::decodeBase64URL::  Illegal base64url string!")}try{return window.atob(n)}catch(e){throw new Error(e)}}},config:{challengeWindowSizes:o,validateChallengeWindowSize:a,getChallengeWindowSize:function(e){return o[a(e)]},THREEDS_METHOD_TIMEOUT:1e4,CHALLENGE_TIMEOUT:6e5}};n.default=i}]).default});
\ No newline at end of file
diff --git a/adyen-utils/form/index.js b/adyen-utils/form/index.js
deleted file mode 100644
index 2e1541d..0000000
--- a/adyen-utils/form/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @function createForm
- *
- * @desc Generic function for creating a form element with a target attribute
- *
- * @param name {String} - the name of the form element
- * @param action {String} - the action for the form element
- * @param target {String} - the target for the form element (specifies where the submitted result will open i.e. an iframe)
- * @param inputName {String} - the name of the input element holding the base64Url encoded JSON
- * @param inputValue {String} - the base64Url encoded JSON
- *
- * @returns {Element} - Created form element
- */
-const createForm = (name, action, target, inputName, inputValue) => {
-
-    if (!name || !action || !target || !inputName || !inputValue) {
-        throw new Error('Not all required parameters provided for form creation');
-    }
-
-    if (name.length === 0 || action.length === 0 || target.length === 0 || inputName.length === 0 || inputValue.length === 0) {
-        throw new Error('Not all required parameters have suitable values');
-    }
-
-    const form = document.createElement( 'form' );
-    form.style.display = 'none';
-    form.name = name;
-    form.action = action;
-    form.method = "POST";
-    form.target = target;
-    const input = document.createElement( 'input' );
-    input.name = inputName;
-    input.value = inputValue;
-    form.appendChild( input );
-    return form;
-};
-
-export default createForm;
diff --git a/adyen-utils/form/index.test.js b/adyen-utils/form/index.test.js
deleted file mode 100644
index c046c49..0000000
--- a/adyen-utils/form/index.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import createForm from './index';
-
-const validFormInput = {
-    "name" : "test",
-    "action" : "action",
-    "target" : "targetURL",
-    "inputName" : "inputName",
-    "inputValue" : "inputValue"
-};
-
-describe('Checking if type is object', () => {
-    describe('with ', () => {
-        test('a valid input should return true', () => {
-            expect(typeof(createForm(validFormInput.name, validFormInput.action, validFormInput.target, validFormInput.inputName, validFormInput.inputValue)))
-                .toBe('object');
-
-            expect((createForm(validFormInput.name, validFormInput.action, validFormInput.target, validFormInput.inputName, validFormInput.inputValue)).attributes.getNamedItem('name').value)
-                .toEqual('test');
-
-            expect((createForm(validFormInput.name, validFormInput.action, validFormInput.target, validFormInput.inputName, validFormInput.inputValue)).attributes.getNamedItem('action').value)
-                .toEqual('action');
-        });
-
-        test('an invalid input (not all expected values are there', () => {
-            expect(() => {
-                createForm();
-            }).toThrow();
-
-
-            expect(() => {
-                createForm(validFormInput.name, validFormInput.action, validFormInput.target, validFormInput.inputName);
-            }).toThrow();
-
-        });
-    });
-});
diff --git a/adyen-utils/iframe/index.js b/adyen-utils/iframe/index.js
deleted file mode 100644
index 0591787..0000000
--- a/adyen-utils/iframe/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const configObject = {};
-configObject.container = void 0;
-
-const addIframeListener = (iframe, callback) => {
-    if (iframe.attachEvent){
-        // IE fallback
-        iframe.attachEvent("onload", function(){
-            if (callback && typeof callback === "function") {
-                callback(iframe.contentWindow);
-            }
-        });
-    } else {
-        iframe.onload = function(){
-            if (callback && typeof callback === "function") {
-                callback(iframe.contentWindow);
-            }
-        };
-    }
-};
-
-/**
- * @function createIframe
- *
- * @desc Generic function for creating an iframe element with onload listener and adding iframe to passed container element
- *
- * @param container {HTMLElement} - the container to place the iframe onto, defaults to document body
- * @param name {String} - the name for the iframe element
- * @param width {String} - the width of the iframe, defaults to 0
- * @param height {String} - the height of the iframe, defaults to 0
- * @param callback { Function } - optional, the callback to fire after the iframe loaded content
- *
- * @returns {Element} - Created iframe element
- */
-const createIframe = (container, name, width = '0', height = '0', callback) => {
-    if (!name || name.length === 0){
-        throw new Error('Name parameter missing for iframe');
-    }
-
-    // Resolve holding element for generated iframe else default to body
-    if (container instanceof HTMLElement) {
-        configObject.container = container;
-    } else {
-        configObject.container = document.body;
-    }
-
-    const iframe = document.createElement('iframe');
-
-    iframe.classList.add(name + 'Class');
-    iframe.width = width;
-    iframe.height = height;
-    iframe.name = name;
-    iframe.setAttribute('frameborder', '0');
-    iframe.setAttribute('border', '0');
-
-    const noIframeElContent = document.createTextNode('<p>Your browser does not support iframes.</p>');
-    iframe.appendChild(noIframeElContent);
-
-    configObject.container.appendChild(iframe);
-
-    addIframeListener(iframe, callback);
-
-    return iframe;
-};
-
-export default createIframe;
diff --git a/adyen-utils/iframe/index.test.js b/adyen-utils/iframe/index.test.js
deleted file mode 100644
index c1a62a6..0000000
--- a/adyen-utils/iframe/index.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import createIframe from './index';
-
-const mockCallback = jest.fn();
-
-describe('creating an iframe ', () => {
-    test('should attach to the body', () => {
-        expect( () => {
-            createIframe(false , 'name', 'no-id', '12', '12', mockCallback).reject.toEqual('');
-        });
-    });
-});
diff --git a/adyen-utils/jest.config.js b/adyen-utils/jest.config.js
deleted file mode 100644
index 9395eb3..0000000
--- a/adyen-utils/jest.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
-    transform: {
-        '^.+\\.js?$': 'babel-jest'
-    },
-    moduleNameMapper: {
-        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/testMocks/fileMock.js',
-    },
-    verbose: true,
-    globals: {
-        NODE_ENV: 'test',
-        BABEL_ENV: 'test'
-    },
-    moduleFileExtensions: ['js', 'json', 'jsx'],
-    rootDir: './',
-    testURL: 'https://localhost:8011'
-};
diff --git a/adyen-utils/package.json b/adyen-utils/package.json
deleted file mode 100644
index 38d4808..0000000
--- a/adyen-utils/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "private": false,
-  "name": "@adyen/threeds2-js-utils",
-  "version": "1.0.2",
-  "license": "MIT",
-  "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "test": "BABEL_ENV=test jest --watchAll --config jest.config.js"
-  },
-  "eslintIgnore": [
-    "build/*",
-    "dist/*"
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/preset-env": "^7.1.6",
-    "babel-loader": "^8.0.4",
-    "fsevents": "^1.2.4",
-    "jest": "^24.0.0",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.23.1",
-    "webpack-cli": "^3.1.2"
-  }
-}
diff --git a/adyen-utils/src/index.js b/adyen-utils/src/index.js
deleted file mode 100644
index e4d544d..0000000
--- a/adyen-utils/src/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import createIframe from '../iframe';
-import createForm from '../form';
-import getBrowserInfo from '../browser';
-import base64Url from '../base64url';
-import config from '../config';
-
-
-const threeds2utilities = {
-    createIframe,
-    createForm,
-    getBrowserInfo,
-    base64Url,
-    config
-};
-
-export default threeds2utilities;
\ No newline at end of file
diff --git a/adyen-utils/webpack.config.js b/adyen-utils/webpack.config.js
deleted file mode 100644
index ae5f8a3..0000000
--- a/adyen-utils/webpack.config.js
+++ /dev/null
@@ -1,73 +0,0 @@
-var path = require('path');
-
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-module.exports = {
-    entry: './src/index.js',
-    mode: 'production',
-    output: {
-        path: path.resolve(__dirname, './dist'),
-        filename: 'threeds2-js-utils.js',
-        library: 'ThreedDS2Utils',
-        libraryTarget: 'umd',
-        libraryExport: 'default',
-        globalObject: 'this'
-    },
-    module: {
-        rules: [{
-            test: /\.js?$/,
-            use: [
-                {
-                    loader: require.resolve('babel-loader'),
-                    options: {
-                        compact: true,
-                        highlightCode: true
-                    }
-                }
-            ]
-        }]
-    },
-    optimization: {
-        minimizer: [
-            new UglifyJsPlugin({
-                uglifyOptions: {
-                    parse: {
-                        // we want uglify-js to parse ecma 8 code. However, we don't want it
-                        // to apply any minfication steps that turns valid ecma 5 code
-                        // into invalid ecma 5 code. This is why the 'compress' and 'output'
-                        // sections only apply transformations that are ecma 5 safe
-                        // https://github.com/facebook/create-react-app/pull/4234
-                        ecma: 8
-                    },
-                    compress: {
-                        ecma: 5,
-                        warnings: false,
-                        // Disabled because of an issue with Uglify breaking seemingly valid code:
-                        // https://github.com/facebook/create-react-app/issues/2376
-                        // Pending further investigation:
-                        // https://github.com/mishoo/UglifyJS2/issues/2011
-                        comparisons: false
-                    },
-                    mangle: {
-                        // Pass true to work around the Safari 10 loop
-                        // iterator bug "Cannot declare a let variable twice".
-                        safari10: true
-                    },
-                    output: {
-                        ecma: 5,
-                        comments: false,
-                        // Turned on because emoji and regex is not minified properly using default
-                        // https://github.com/facebook/create-react-app/issues/2488
-                        ascii_only: true
-                    }
-                },
-                // Use multi-process parallel running to improve the build speed
-                // Default number of concurrent runs: os.cpus().length - 1
-                parallel: true,
-                // Enable file caching
-                cache: true,
-                sourceMap: false
-            })
-        ]
-    }
-};
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..ba241b5 100644
--- a/components/AdyenPayments.vue
+++ b/components/AdyenPayments.vue
@@ -1,85 +1,40 @@
 <template>
   <div class="adyen-block">
     <div id="adyen-payments-dropin"></div>
-    <!-- <div id="threeDS2Container"></div>
-    <transition name="fade">
-      <div class="threeds-challenge" v-show="threedsChallenge">
-        <div id="threeDS2Challenge"></div>
-      </div>
-    </transition> -->
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import store from '@vue-storefront/core/store';
-
-import { currentStoreView } from '@vue-storefront/core/lib/multistore';
-import collectBrowserInfo from '../adyen-utils/browser';
-import i18n from '@vue-storefront/i18n';
-// import base64Url from "./adyen-3ds2-js-utils/base64url";
-// import createIframe from "./adyen-3ds2-js-utils/iframe";
-// import createForm from "./adyen-3ds2-js-utils/form";
-// import {validateChallengeWindowSize, getChallengeWindowSize} from "./adyen-3ds2-js-utils/config.js";
+import { currentStoreView } from "@vue-storefront/core/lib/multistore";
+import collectBrowserInfo from "../adyen-utils/browser";
+import i18n from "@vue-storefront/i18n";
+import Shared from './Shared'
 
 export default {
-  name: 'AdyenPayments',
+  name: "AdyenPayments",
+
+  mixins: [Shared],
 
   data() {
     return {
       payment: this.$store.state.checkout.paymentDetails,
-      tst: this.$store.getters['payment-adyen/methods'],
       adyenCheckoutInstance: null,
-      threeDS2IdentifyComponent: null,
-      threeDS2ChallengeComponent: null,
-      payloadToSend: null,
       dropin: null,
-      threedsChallenge: false,
       cardMaps: {
-        "amex":"AE",
-        "discover":"DI",
-        "jcb":"JCB",
-        "mc":"MC",
-        "visa":"VI",
-        "maestro":"MI",
-        "diners":"DN",
-        "unionpay":"CUP"
-      }
+        amex: "AE",
+        discover: "DI",
+        jcb: "JCB",
+        mc: "MC",
+        visa: "VI",
+        maestro: "MI",
+        diners: "DN",
+        unionpay: "CUP",
+      },
     };
   },
 
-  async mounted() {
-    if (!document.getElementById('adyen-secured-fields')) {
-      if (typeof window !== 'undefined') {
-        try {
-          await this.loadScript(
-            'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.3.0/adyen.js'
-          );
-          this.createForm();
-        } catch (err) {
-          console.info(err, "Couldnt fetch adyen's library");
-        }
-      }
-    } else {
-      this.createForm();
-    }
-  },
-
   methods: {
-    /**
-     * @description - Dynamicly fetches AdyenCheckout class
-     */
-    loadScript(src) {
-      return new Promise((resolve, reject) => {
-        let script = document.createElement('script');
-        script.setAttribute('id', 'adyen-secured-fields');
-        script.src = src;
-        script.onload = () => resolve(script);
-        script.onerror = () => reject(new Error('Script load error: ' + src));
-        document.head.append(script);
-      });
-    },
-
+    
     async createForm() {
       if (
         this.payment &&
@@ -89,1823 +44,139 @@ export default {
         this.payment.paymentMethodAdditional = {};
       }
 
-      const originKeys = this.$store.state.config.adyen.originKeys;
-      const environment = this.$store.state.config.adyen.environment;
+      const { originKeys, environment } = this.$store.state.config.adyen;
       const origin = window.location.origin;
       if (!originKeys[origin]) {
-        console.error('[Adyen] Set origin key in the config!');
+        console.error("[Adyen] Set origin key in the config!");
       }
 
-      const storedPaymentMethods = this.$store.getters['payment-adyen/cards']
-      
-      if (this.$store.getters['user/isLoggedIn'] && this.$store.state.config.adyen.saveCards) {
+      if (
+        this.$store.getters["user/isLoggedIn"] &&
+        this.$store.state.config.adyen.saveCards
+      ) {
         await Promise.all([
           this.$store.dispatch("payment-adyen/loadVault"),
-          this.$store.dispatch("payment-adyen/loadPaymentMethods", {})
+          this.$store.dispatch("payment-adyen/loadPaymentMethods", {}),
         ]);
       } else {
-        await this.$store.dispatch("payment-adyen/loadPaymentMethods", {})
+        await this.$store.dispatch("payment-adyen/loadPaymentMethods", {});
       }
 
       const translations = {
         "en-US": {
-          "payButton": "Pay Now"
+          payButton: "Pay Now",
         },
         "es-ES": {
-          "payButton": "Pagar"
+          payButton: "Pagar",
         },
         "es-MX": {
-          "payButton": "Pagar"
+          payButton: "Pagar",
         },
         "fr-FR": {
-          "payButton": "Payer"
+          payButton: "Payer",
         },
         "de-DE": {
-          "payButton": "Zahlen"
+          payButton: "Zahlen",
         },
         "it-IT": {
-          "payButton": "Pagar"
-        }
+          payButton: "Pagar",
+        },
       };
 
       const storeView = currentStoreView();
-      let locale = storeView.i18n.defaultLocale
 
       const configuration = {
-        locale,
+        locale: storeView.i18n.defaultLocale,
         translations,
-        environment: environment,
+        environment,
         originKey: originKeys[origin],
         paymentMethodsResponse: {
           // There I am setting payment methods
           // For now only scheme === adyen_cc
-          paymentMethods: this.$store.getters['payment-adyen/methods'].filter(
-            method => method.type === 'scheme'
+          paymentMethods: this.$store.getters["payment-adyen/methods"].filter(
+            (method) => method.type === "scheme"
           ),
           ...(
-            this.$store.getters['user/isLoggedIn'] && this.$store.getters['payment-adyen/cards'] && !!this.$store.getters['payment-adyen/cards'].length
+            this.hasStoredCards()
             ? { storedPaymentMethods: this.$store.getters['payment-adyen/cards'] }
             : {}
           )
-        }
+        },
       };
       this.adyenCheckoutInstance = new AdyenCheckout(configuration);
-      const self = this
+      const self = this;
 
-      const showStored = this.$store.getters['user/isLoggedIn'] && this.$store.state.config.adyen.saveCards
+      const showStored =
+        this.$store.getters["user/isLoggedIn"] &&
+        this.$store.state.config.adyen.saveCards;
 
       this.dropin = this.adyenCheckoutInstance
-        .create('dropin', {
+        .create("dropin", {
           paymentMethodsConfiguration: {
-            // applepay: { // Example required configuration for Apple Pay
-            //   configuration: {
-            //     merchantName: 'Adyen Test merchant', // Name to be displayed on the form
-            //     merchantIdentifier: 'adyen.test.merchant' // Your Apple merchant identifier as described in https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequest/2951611-merchantidentifier
-            //   }
-            // },
-            // paywithgoogle: { // Example required configuration for Google Pay
-            //   environment: "TEST", // Change this to PRODUCTION when you're ready to accept live Google Pay payments
-            //   configuration: {
-            //   gatewayMerchantId: "YourCompanyOrMerchantAccount", // Your Adyen merchant or company account name
-            //   merchantIdentifier: "12345678910111213141" // Your Google Merchant ID as described in https://developers.google.com/pay/api/web/guides/test-and-deploy/deploy-production-environment#obtain-your-merchantID
-            //   }
-            // },
             card: {
-              // Example optional configuration for Cards
               hasHolderName: true,
               holderNameRequired: true,
               enableStoreDetails: showStored,
               showStoredPaymentMethods: showStored,
-              name: 'Credit or debit card',
-              brands: Object.keys(self.cardMaps)
+              name: "Credit or debit card",
+              brands: Object.keys(self.cardMaps),
             },
-            // paypal: {
-            //   enableStoreDetails: true,
-            //   name: 'PayPal'
-            // }
           },
 
-          onSelect (state, dropin) {
-            state.props.hasCVC = !state.props.storedPaymentMethodId
+          onSelect(state, dropin) {
+            state.props.hasCVC = !state.props.storedPaymentMethodId;
           },
 
           onSubmit: async (state, dropin) => {
             try {
-              const storeView = currentStoreView();
 
-              // Saved card needs only that
               if (!!state.data.paymentMethod.storedPaymentMethodId) {
-                const cards = self.$store.getters['payment-adyen/cards']
-                const card = cards.find(card => card.id === state.data.paymentMethod.storedPaymentMethodId)
+                const cards = self.$store.getters["payment-adyen/cards"];
+                const card = cards.find(
+                  (card) =>
+                    card.id === state.data.paymentMethod.storedPaymentMethodId
+                );
                 if (card) {
-                  self.$store.dispatch('payment-adyen/setPublicHash', card.public_hash)
-                  this.$emit('providedAdyenData')
-                  // self.$emit('payed', {
-                  //   method: state.data.paymentMethod.type,
-                  //   additional_data: {
-                  //     ...state.data.paymentMethod
-                  //   },
-                  //   browserInfo: {
-                  //     ...collectBrowserInfo(),
-                  //     language: storeView.i18n.defaultLocale,
-                  //     origin: window.location.origin
-                  //   }
-                  // });
+                  self.$store.dispatch(
+                    "payment-adyen/setPublicHash",
+                    card.public_hash
+                  );
+                  this.$emit("providedAdyenData");
                 } else {
-                  self.$store.dispatch('notification/spawnNotification', {
-                    type: 'error',
-                    message: i18n.t(
-                      'Bad data provided for the card'
-                    ),
-                    action1: { label: i18n.t('OK') }
+                  self.$store.dispatch("notification/spawnNotification", {
+                    type: "error",
+                    message: i18n.t("Bad data provided for the card"),
+                    action1: { label: i18n.t("OK") },
                   });
                 }
-                return
+                return;
               }
 
-              this.$store.dispatch('payment-adyen/setCardData', {
+              this.$store.dispatch("payment-adyen/setCardData", {
                 method: state.data.paymentMethod.type,
                 additional_data: {
-                  ...state.data.paymentMethod
+                  ...state.data.paymentMethod,
+                  ...(state.data.storePaymentMethod
+                  ? { storePaymentMethod: state.data.storePaymentMethod }
+                  : {})
                 },
                 browserInfo: {
                   ...collectBrowserInfo(),
                   language: storeView.i18n.defaultLocale,
-                  origin: window.location.origin
+                  origin: window.location.origin,
                 },
-                ...(state.data.storePaymentMethod ? { storePaymentMethod: state.data.storePaymentMethod } : {})
-              })
-
-              this.$emit('providedAdyenData')
-
-              // And that's all!
-              // For now...
+              });
 
-              // let result = await this.$store.dispatch(
-              //   'payment-adyen/initPayment',
-              //   {
-              //     method: state.data.paymentMethod.type,
-              //     additional_data: {
-              //       ...state.data.paymentMethod
-              //     },
-              //     browserInfo: {
-              //       ...collectBrowserInfo(),
-              //       language: storeView.i18n.defaultLocale,
-              //       origin: window.location.origin
-              //     },
-              //     ...(state.data.storePaymentMethod ? { storePaymentMethod: state.data.storePaymentMethod } : {})
-              //   }
-              // );
-
-              // If it requires 3DS Auth
-              // if (result.threeDS2) {
-              //   const { token, type } = result;
-              //   self.payloadToSend = {
-              //     method: state.data.paymentMethod.type,
-              //     additional_data: {
-              //       ...state.data.paymentMethod
-              //     },
-              //     browserInfo: {
-              //       ...collectBrowserInfo(),
-              //       language: storeView.i18n.defaultLocale,
-              //       // I am sending origin for my custom change in magento's Adyen
-              //       // Then 3DS Challenge will send window.postMessage which can be only opened in the `origin`
-              //       origin: window.location.origin
-              //     }
-              //   };
-
-              //   switch (type) {
-              //     case 'IdentifyShopper':
-              //       self.renderThreeDS2DeviceFingerprint(token);
-              //       break;
-              //     case 'ChallengeShopper':
-              //       self.renderThreeDS2Challenge(token);
-              //       break;
-              //     default:
-              //       self.$store.dispatch('notification/spawnNotification', {
-              //         type: 'error',
-              //         message: i18n.t(
-              //           'Unsupported authentication method: ' + type
-              //         ),
-              //         action1: { label: i18n.t('OK') }
-              //       });
-              //       break;
-              //   }
-              // } else if (result.errorMessage) {
-              //   self.$store.dispatch('notification/spawnNotification', {
-              //     type: 'error',
-              //     message: result.errorMessage,
-              //     action1: { label: i18n.t('OK') }
-              //   });
-              // } else {
-              //   // 3DS Auth not needed, go further...
-              //   self.$emit('payed', {
-              //     method: state.data.paymentMethod.type,
-              //     additional_data: {
-              //       ...state.data.paymentMethod
-              //     },
-              //     browserInfo: {
-              //       ...collectBrowserInfo(),
-              //       language: storeView.i18n.defaultLocale,
-              //       origin: window.location.origin
-              //     }
-              //   });
-              // }
+              this.$emit("providedAdyenData");
             } catch (err) {
-              console.error(err, 'Adyen');
+              console.error(err, "Adyen");
             }
-          }
+          },
         })
-        .mount('#adyen-payments-dropin');
+        .mount("#adyen-payments-dropin");
     },
-
-    // renderThreeDS2DeviceFingerprint(token) {
-    //   const self = this;
-
-    //   this.threeDS2IdentifyComponent = this.adyenCheckoutInstance.create(
-    //     'threeDS2DeviceFingerprint',
-    //     {
-    //       fingerprintToken: token,
-    //       async onComplete({ data }) {
-    //         // It sends request to /adyen/threeDS2Process
-    //         if (!data && data.details && data.details['threeds2.fingerprint']) {
-    //           self.$store.dispatch('notification/spawnNotification', {
-    //             type: 'error',
-    //             message: i18n.t('Could not verify card data, sorry...'),
-    //             action1: { label: i18n.t('OK') }
-    //           });
-    //           return;
-    //         }
-    //         let response = await self.$store.dispatch(
-    //           'payment-adyen/fingerprint3ds',
-    //           {
-    //             fingerprint:
-    //               data && data.details && data.details['threeds2.fingerprint']
-    //           }
-    //         );
-
-    //         if (response.threeDS2) {
-    //           // ChallengeShopper
-    //           self.renderThreeDS2Challenge(response.token)
-    //         } else {
-    //           self.$emit('payed', self.payloadToSend);
-    //         }
-    //       },
-    //       onError(error) {
-    //         console.log('Error', error);
-    //       }
-    //     }
-    //   );
-    //   this.threeDS2IdentifyComponent.mount('#threeDS2Container');
-    // },
-
-    // renderThreeDS2Challenge(token) {
-    //   // Open fullscreen modal
-    //   this.threedsChallenge = true;
-
-    //   // Create Challenge component
-    //   const self = this
-    //   this.threeDS2ChallengeComponent = this.adyenCheckoutInstance.create(
-    //     'threeDS2Challenge',
-    //     {
-    //       challengeToken: token,
-    //       // We have a few sizes, 05 is full 100% width 100% height
-    //       // Other ones have certain sizes
-    //       size: '05',
-    //       async onComplete({ data }) {
-    //         if (
-    //           data &&
-    //           data.details &&
-    //           data.details['threeds2.challengeResult']
-    //         ) {
-    //           let challengeResponse = await self.$store.dispatch(
-    //             'payment-adyen/fingerprint3ds',
-    //             {
-    //               fingerprint: data.details['threeds2.challengeResult'],
-    //               challenge: true,
-    //               noPaymentData: true
-    //             }
-    //           );
-
-    //           self.threedsChallenge = false;
-
-    //           // Finish the hardest way
-    //           self.$emit('payed', self.payloadToSend);
-    //         } else {
-    //           this.$store.dispatch('notification/spawnNotification', {
-    //             type: 'error',
-    //             message: i18n.t('Challenge authentication failed'),
-    //             action1: { label: i18n.t('OK') }
-    //           });
-    //         }
-    //       },
-    //       onError(error) {
-    //         console.log('error', error);
-    //       }
-    //     }
-    //   );
-    //   self.threeDS2ChallengeComponent.mount('#threeDS2Challenge');
-    // }
-  }
+  },
 };
 </script>
 
-<style>
-.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;
-}
-</style>
\ No newline at end of file
+<style lang="scss" src="./AdyenPayments.scss" />
\ No newline at end of file
diff --git a/components/FinishPayment.vue b/components/FinishPayment.vue
index e38140f..716503f 100644
--- a/components/FinishPayment.vue
+++ b/components/FinishPayment.vue
@@ -14,10 +14,13 @@
 import config from 'config'
 import i18n from '@vue-storefront/i18n';
 import { currentStoreView } from '@vue-storefront/core/lib/multistore';
+import Shared from './Shared'
 
 export default {
   name: 'FinishPayment',
 
+  mixins: [Shared],
+
   props: {
     callback: {
       type: Function,
@@ -40,43 +43,9 @@ export default {
     }
   },
 
-  async mounted() {
-    if (!document.getElementById('adyen-secured-fields')) {
-      if (typeof window !== 'undefined') {
-        try {
-          await this.loadScript(
-            'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.3.0/adyen.js'
-          );
-
-          this.createForm()
-
-        } catch (err) {
-          console.info(err, "Couldnt fetch adyen's library");
-        }
-      }
-    } else {
-      this.createForm();
-    }
-  },
-
   methods: {
-    /**
-     * @description - Dynamicly fetches AdyenCheckout class
-     */
-    loadScript(src) {
-      return new Promise((resolve, reject) => {
-        let script = document.createElement('script');
-        script.setAttribute('id', 'adyen-secured-fields');
-        script.src = src;
-        script.onload = () => resolve(script);
-        script.onerror = () => reject(new Error('Script load error: ' + src));
-        document.head.append(script);
-      });
-    },
-
-    createForm () {
-      const originKeys = this.$store.state.config.adyen.originKeys;
-      const environment = this.$store.state.config.adyen.environment;
+    async createForm () {
+      const { originKeys, environment } = this.$store.state.config.adyen;
       const origin = window.location.origin;
       if (!originKeys[origin]) {
         console.error('[Adyen] Set origin key in the config!');
@@ -93,9 +62,7 @@ export default {
             method => method.type === 'scheme'
           ),
           ...(
-            this.$store.getters['user/isLoggedIn']
-            && this.$store.getters['payment-adyen/cards']
-            && !!this.$store.getters['payment-adyen/cards'].length
+            this.hasStoredCards()
             ? { storedPaymentMethods: this.$store.getters['payment-adyen/cards'] }
             : {}
           )
@@ -107,10 +74,7 @@ export default {
 
     async initPayment () {
       try {
-        let result = await this.$store.dispatch(
-          'payment-adyen/initPayment',
-          this.$store.state['payment-adyen'].adyenCard
-        );
+        const result = this.$store.state['payment-adyen'].three3ds2Details
 
         // If it requires 3DS Auth
         if (result.type) {
@@ -123,17 +87,17 @@ export default {
             case 'ChallengeShopper':
               this.renderThreeDS2Challenge(result.token);
               break;
-            case 'RedirectShopper':
-              const self = this
-              const { storeCode } = currentStoreView()
-              const testsmth = this.adyenCheckoutInstance.createFromAction({
-                ...result.action,
-                data: {
-                  ...result.action.data,
-                  'TermUrl': `${config.server.baseUrl.endsWith('/') ? config.server.baseUrl : (config.server.baseUrl + '/')}${storeCode}/finalize-3ds1`
-                }
-              }).mount('#redirectTo3ds1')
-              break;
+            // case 'RedirectShopper':
+            //   const self = this
+            //   const { storeCode } = currentStoreView()
+            //   const testsmth = this.adyenCheckoutInstance.createFromAction({
+            //     ...result.action,
+            //     data: {
+            //       ...result.action.data,
+            //       'TermUrl': `${config.server.baseUrl.endsWith('/') ? config.server.baseUrl : (config.server.baseUrl + '/')}${storeCode}/finalize-3ds1`
+            //     }
+            //   }).mount('#redirectTo3ds1')
+            //   break;
             default:
               this.$store.dispatch('notification/spawnNotification', {
                 type: 'error',
@@ -150,10 +114,6 @@ export default {
             message: result.errorMessage,
             action1: { label: i18n.t('OK') }
           });
-        } else {
-          // 3DS Auth not needed, go further...
-          this.callback()
-          // self.$emit('payed', this.adyenCard);
         }
       } catch (err) {
         console.error(err, 'Adyen');
@@ -169,7 +129,7 @@ export default {
           fingerprintToken: token,
           async onComplete({ data }) {
             // It sends request to /adyen/threeDS2Process
-            if (!data && data.details && data.details['threeds2.fingerprint']) {
+            if (!data || !data.details || !data.details['threeds2.fingerprint']) {
               self.$store.dispatch('notification/spawnNotification', {
                 type: 'error',
                 message: i18n.t('Could not verify card data, sorry...'),
@@ -180,8 +140,8 @@ export default {
             let response = await self.$store.dispatch(
               'payment-adyen/fingerprint3ds',
               {
-                fingerprint:
-                  data && data.details && data.details['threeds2.fingerprint']
+                fingerprint: data && data.details && data.details['threeds2.fingerprint'],
+                orderId: self.$store.state['payment-adyen'].three3ds2Details.orderId
               }
             );
 
@@ -230,15 +190,15 @@ export default {
                 'payment-adyen/fingerprint3ds',
                 {
                   fingerprint: data.details['threeds2.challengeResult'],
+                  orderId: self.$store.state['payment-adyen'].three3ds2Details.orderId,
                   challenge: true,
                   noPaymentData: true
                 }
               );
 
               self.threedsChallenge = false;
-              // Finish the hardest way
-              // self.$emit('payed', self.payloadToSend);
               self.callback()
+              self.$store.dispatch('payment-adyen/setShowFinishPayment', false)
             } else {
               self.$store.dispatch('notification/spawnNotification', {
                 type: 'error',
@@ -249,6 +209,7 @@ export default {
           },
           onError(error) {
             console.log('error', error);
+            self.$store.dispatch('payment-adyen/setShowFinishPayment', false)
           }
         }
       );
diff --git a/components/Shared.ts b/components/Shared.ts
new file mode 100644
index 0000000..0aa14d0
--- /dev/null
+++ b/components/Shared.ts
@@ -0,0 +1,43 @@
+export default {
+    async mounted() {
+        if (!document.getElementById('adyen-secured-fields')) {
+          if (typeof window !== 'undefined') {
+            try {
+              await this.loadScript(
+                'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.3.0/adyen.js'
+              );
+    
+              this.createForm()
+    
+            } catch (err) {
+              console.info(err, "Couldnt fetch adyen's library");
+            }
+          }
+        } else {
+          this.createForm();
+        }
+      },
+    
+    methods: {
+        /**
+         * @description - Dynamicly fetches AdyenCheckout SDK
+         */
+        loadScript(src) {
+            return new Promise((resolve, reject) => {
+                let script = document.createElement("script");
+                script.setAttribute("id", "adyen-secured-fields");
+                script.src = src;
+                script.onload = () => resolve(script);
+                script.onerror = () => reject(new Error("Script load error: " + src));
+                document.head.append(script);
+            });
+        },
+
+        hasStoredCards() {
+          const storedPaymentMethods = this.$store.getters["payment-adyen/cards"];
+          return this.$store.getters["user/isLoggedIn"] &&
+            storedPaymentMethods &&
+            !!storedPaymentMethods.length
+        }
+    }
+}
\ No newline at end of file
diff --git a/store/actions.ts b/store/actions.ts
index 10925b8..c56c21a 100644
--- a/store/actions.ts
+++ b/store/actions.ts
@@ -1,18 +1,14 @@
-import { AdyenState } from '../types/AdyenState';
-import rootStore from '@vue-storefront/core/store'
+import { AdyenState, AuthDetails } from '../types/AdyenState';
 import { ActionTree } from 'vuex';
 import * as types from './mutation-types';
 import Vue from 'vue';
-// import axios from 'axios'
 import { Logger } from '@vue-storefront/core/lib/logger'
 import fetch from 'isomorphic-fetch'
 import config from 'config'
 import { currentStoreView, adjustMultistoreApiUrl } from '@vue-storefront/core/lib/multistore';
 import SideRequest from '@vue-storefront/core/lib/side-request';
 
-// it's a good practice for all actions to return Promises with effect of their execution
 export const actions: ActionTree<AdyenState, any> = {
-  // if you are using cache in your module it's a good practice to allow develoeprs to choose either to use it or not
   saveCardData ({ commit }, { cardData }) {
     return new Promise ((resolve, reject) => {
         commit(types.ADD_CARD_DATA, cardData)
@@ -63,7 +59,7 @@ export const actions: ActionTree<AdyenState, any> = {
       if (rootGetters['user/getUserToken']) {
         token = `?token=${rootGetters['user/getUserToken']}`
       }
-      
+
       let response = await fetch(adjustMultistoreApiUrl(`${baseUrl}vault${token}`), {
         method: 'POST'
       })
@@ -96,7 +92,7 @@ export const actions: ActionTree<AdyenState, any> = {
       if (rootGetters['user/getUserToken']) {
         token = `?token=${rootGetters['user/getUserToken']}`
       }
-      
+
       let response = await fetch(`${baseUrl}methods/${storeCode}/${cartId}${token}`, {
         method: 'POST',
         body: JSON.stringify({
@@ -113,65 +109,86 @@ export const actions: ActionTree<AdyenState, any> = {
     }
   },
 
-  async initPayment ({ commit, rootGetters, rootState }, { method, additional_data, browserInfo, storePaymentMethod = false }) {
+  // async initPayment ({ commit, rootGetters, rootState }, { method, additional_data, browserInfo, storePaymentMethod = false }) {
+  //   const cartId = rootGetters['cart/getCartToken']
+  //   if (!cartId) {
+  //     console.error('[Adyen] CartId does not exist')
+  //     return
+  //   }
+  //   let token = ''
+  //   if (rootGetters['user/getUserToken']) {
+  //     token = `?token=${rootGetters['user/getUserToken']}`
+  //   }
+
+  //   // let customer_id = null
+  //   // if (rootState.user.current && rootState.user.current.id) {
+  //   //   customer_id = rootState.user.current.id
+  //   // }
+
+  //   const baseUrl = `${SideRequest(config.api, 'url')}ext/payment-adyen/`
+
+  //   try {
+  //     const { storeCode } = currentStoreView()
+  //     let response = await fetch(`${baseUrl}payment/start/${storeCode}/${cartId}${token}`, {
+  //       method: 'POST',
+  //       headers: {
+  //         'Content-Type': 'application/json'
+  //       },
+  //       body: JSON.stringify({
+  //         method,
+  //         additional_data: {
+  //           number: additional_data.encryptedCardNumber,
+  //           expiryMonth: additional_data.encryptedExpiryMonth,
+  //           cvc: additional_data.encryptedSecurityCode,
+  //           expiryYear: additional_data.encryptedExpiryYear,
+  //           holderName: additional_data.holderName,
+  //           ...browserInfo,
+  //           allow3DS2: config.adyen.allow3DS2,
+  //           channel: 'web',
+  //           is_active_payment_token_enabler: !!storePaymentMethod,
+  //           store_cc: !!storePaymentMethod,
+  //           ...(additional_data.storedPaymentMethodId ? {
+  //             storedPaymentMethodId: additional_data.storedPaymentMethodId,
+  //             shopperInteraction: 'ContAuth',
+  //             recurringProcessingModel: 'CardOnFile'
+  //           } : {})
+  //         }
+  //       })
+  //     })
+
+  //     commit(types.SET_SAVE_CARD, !!storePaymentMethod)
+
+  //     let { result } = await response.json()
+
+  //     return result
+
+  //   } catch (err) {
+  //     console.error('[Adyen Payments]', err)
+  //   }
+  // },
+
+  async checkPaymentStatus ({ rootGetters }, orderId) {
     const cartId = rootGetters['cart/getCartToken']
     if (!cartId) {
       console.error('[Adyen] CartId does not exist')
       return
     }
-    let token = ''
-    if (rootGetters['user/getUserToken']) {
-      token = `?token=${rootGetters['user/getUserToken']}`
-    }
-
-    // let customer_id = null
-    // if (rootState.user.current && rootState.user.current.id) {
-    //   customer_id = rootState.user.current.id
-    // }
-
     const baseUrl = `${SideRequest(config.api, 'url')}ext/payment-adyen/`
+    // const baseUrl = `http://localhost:8080/api/ext/payment-adyen/`
 
     try {
       const { storeCode } = currentStoreView()
-      let response = await fetch(`${baseUrl}payment/start/${storeCode}/${cartId}${token}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          method,
-          additional_data: {
-            number: additional_data.encryptedCardNumber,
-            expiryMonth: additional_data.encryptedExpiryMonth,
-            cvc: additional_data.encryptedSecurityCode,
-            expiryYear: additional_data.encryptedExpiryYear,
-            holderName: additional_data.holderName,
-            ...browserInfo,
-            allow3DS2: config.adyen.allow3DS2,
-            channel: 'web',
-            is_active_payment_token_enabler: !!storePaymentMethod,
-            store_cc: !!storePaymentMethod,
-            ...(additional_data.storedPaymentMethodId ? {
-              storedPaymentMethodId: additional_data.storedPaymentMethodId,
-              shopperInteraction: 'ContAuth',
-              recurringProcessingModel: 'CardOnFile'
-            } : {})
-          }
-        })
-      })
-
-      commit(types.SET_SAVE_CARD, !!storePaymentMethod)
-
+      let response = await fetch(`${baseUrl}payment/status/${orderId}?storeCode=${storeCode}`)
       let { result } = await response.json()
 
       return result
-      
+
     } catch (err) {
       console.error('[Adyen Payments]', err)
     }
   },
 
-  async fingerprint3ds ({ commit, rootGetters, rootState }, { fingerprint, noPaymentData = false, challenge = false }) {
+  async fingerprint3ds ({ commit, rootGetters, rootState }, { orderId, fingerprint, noPaymentData = false, challenge = false }) {
     const cartId = rootGetters['cart/getCartToken']
     if (!cartId) {
       console.error('[Adyen] CartId does not exist')
@@ -188,6 +205,7 @@ export const actions: ActionTree<AdyenState, any> = {
     // }
 
     const baseUrl = `${SideRequest(config.api, 'url')}ext/payment-adyen/`
+    // const baseUrl = `http://localhost:8080/api/ext/payment-adyen/`
 
     try {
       const { storeCode } = currentStoreView()
@@ -198,6 +216,7 @@ export const actions: ActionTree<AdyenState, any> = {
         },
         body: JSON.stringify({
           fingerprint,
+          orderId,
           ...(noPaymentData ? {noPaymentData} : {}),
           ...(challenge ? {challenge} : {})
         })
@@ -206,7 +225,7 @@ export const actions: ActionTree<AdyenState, any> = {
       let { result } = await response.json()
 
       return result
-      
+
     } catch (err) {
       console.error('[Adyen Payments]', err)
     }
@@ -218,6 +237,14 @@ export const actions: ActionTree<AdyenState, any> = {
 
   setPublicHash ({ commit }, value) {
     commit(types.SET_PUBLIC_HASH, value)
+  },
+
+  setShowFinishPayment ({ commit }, value) {
+    commit(types.SET_SHOW_FINISH_PAYMENT, value)
+  },
+
+  set3dsDetails ({ commit }, value: AuthDetails) {
+    commit(types.SET_3DS_DETAILS, value)
   }
 
 }
diff --git a/store/mutation-types.ts b/store/mutation-types.ts
index b17f93e..140dda0 100644
--- a/store/mutation-types.ts
+++ b/store/mutation-types.ts
@@ -6,3 +6,5 @@ export const SET_PAYMENT_METHODS = 'SET_PAYMENT_METHODS'
 export const SET_SAVE_CARD = 'SET_SAVE_CARD'
 export const SET_LOADED_CARDS = 'SET_LOADED_CARDS'
 export const SET_PUBLIC_HASH = 'SET_PUBLIC_HASH'
+export const SET_SHOW_FINISH_PAYMENT = 'SET_SHOW_FINISH_PAYMENT'
+export const SET_3DS_DETAILS = 'SET_3DS_DETAILS'
diff --git a/store/mutations.ts b/store/mutations.ts
index aea9493..fe34ed3 100644
--- a/store/mutations.ts
+++ b/store/mutations.ts
@@ -1,6 +1,7 @@
 import { MutationTree } from 'vuex'
 import * as types from './mutation-types'
 import Vue from 'vue'
+import { AuthDetails } from '../types/AdyenState'
 
 export const mutations: MutationTree<any> = {
   [types.ADD_CARD_DATA] (state, payload) {
@@ -47,6 +48,14 @@ export const mutations: MutationTree<any> = {
 
   [types.SET_PUBLIC_HASH] (state, value) {
     state.publicHash = value
+  },
+
+  [types.SET_SHOW_FINISH_PAYMENT] (state, value) {
+    state.showFinishPayment = value
+  },
+
+  [types.SET_3DS_DETAILS] (state, details: AuthDetails) {
+    Vue.set(state, 'three3ds2Details', details)
   }
 
 }
diff --git a/store/state.ts b/store/state.ts
index d59e694..0be19ce 100644
--- a/store/state.ts
+++ b/store/state.ts
@@ -6,5 +6,7 @@ export const state: AdyenState = {
     paymentMethods: [],
     saveCard: false,
     loadedCards: [],
-    publicHash: null
+    publicHash: null,
+    showFinishPayment: false,
+    three3ds2Details: null
 }
diff --git a/types/AdyenState.ts b/types/AdyenState.ts
index 2d0a461..335351f 100644
--- a/types/AdyenState.ts
+++ b/types/AdyenState.ts
@@ -20,11 +20,18 @@ interface PaymentMethod {
     brands?: Array<string>
 }
 
+export interface AuthDetails {
+    type: string,
+    token: string
+}
+
 export interface AdyenState {
     isAdyenValid: boolean | null,
     adyenCard: any | null,
     paymentMethods: Array<PaymentMethod>,
     saveCard: Boolean,
     loadedCards: Array<any>,
-    publicHash: string | null
+    publicHash: string | null,
+    showFinishPayment: boolean,
+    three3ds2Details: AuthDetails
 }