diff --git a/assets/dist/introScripts.js b/assets/dist/introScripts.js
new file mode 100644
index 00000000..63aa79f0
--- /dev/null
+++ b/assets/dist/introScripts.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jQuery")):"function"==typeof define&&define.amd?define("paytrail",["jQuery"],t):"object"==typeof exports?exports.paytrail=t(require("jQuery")):e.paytrail=t(e.jQuery)}(self,(e=>(()=>{"use strict";var t={1145:t=>{t.exports=e}},o={};return function e(n){var r=o[n];if(void 0!==r)return r.exports;var i=o[n]={exports:{}};return t[n](i,i.exports,e),i.exports}(1145)(document).ready((function(e){e("#paytrail-overlay-container").length;var t;t={autoOpen:!1,modal:!0,width:500,open:function(t,o){e(this).parent().css("z-index",9998)},close:function(t,o){e(this).parent().css("z-index","")}},e(document).on("click","#open-lightbox",(function(){e("#user-data-form").dialog(t).dialog("open")})),e(document).on("click","#credentials",(function(){e("#paytrail-overlay-container").remove()})),e(document).on("click","#test-mode-button",(function(){e("#woocommerce_paytrail_enable_test_mode").prop("checked",(function(){return!e(this).prop("checked")})),e("#woocommerce_paytrail_enable_test_mode").trigger("change"),e('#mainform [name="save"]').click()})),e(document).on("submit","#user-data-form",(function(t){t.preventDefault();var o=e(this).serialize();window.open("https://www.paytrail.com/tilaa-palvelu/lisatiedot?"+o+"&tekninen_alusta=WooCommerce","_blank").focus()}))})),{}})()));
\ No newline at end of file
diff --git a/assets/dist/main.css b/assets/dist/main.css
index c9341a5e..6b5dd72d 100644
--- a/assets/dist/main.css
+++ b/assets/dist/main.css
@@ -1 +1,2 @@
-.paytrail-provider-group{background-color:#ebebeb;padding:8px 12px;margin:10px 0;cursor:pointer;-ms-flex-flow:row;flex-flow:row}.paytrail-provider-group,.paytrail-provider-group-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.paytrail-provider-group-title{margin-top:2px;line-height:1.2em;font-size:100%;width:100%;padding-top:8px;padding-bottom:8px}.paytrail-provider-group-title i{width:5px;height:28px;display:inline-block;padding-right:35px}.paytrail-provider-group-title.bank i,.paytrail-provider-group-title.creditcard i,.paytrail-provider-group-title.credit i,.paytrail-provider-group-title.mobile i{background-position-y:center;background-size:28px 28px}.paytrail-provider-group-title .icon{float:none;margin-right:8px}.paytrail-provider-group .provider-list{text-align:right;float:right;font-style:italic;margin-left:2em;width:100%;font-size:75%}.paytrail-provider-group.selected{background-color:#33798d;color:#fff}.paytrail-provider-group.selected .paytrail-provider-group-title{color:#fff}.paytrail-provider-group.selected .paytrail-provider-group-title i{filter:brightness(5)}.paytrail-provider-group.selected .paytrail-provider-group-title.bank,.paytrail-provider-group.selected .paytrail-provider-group-title.credit,.paytrail-provider-group.selected .paytrail-provider-group-title.creditcard,.paytrail-provider-group.selected .paytrail-provider-group-title.mobile{background-position-y:center;background-size:28px 28px}.paytrail-provider-group:hover{background-color:#d0d0d0}.paytrail-provider-group.selected:hover{background-color:#33798d}.paytrail-woocommerce-payment-fields{margin:0;padding:0;min-height:90px}.paytrail-woocommerce-payment-fields.hidden{display:none}.paytrail-woocommerce-payment-fields--list-item{position:relative;display:inline-block;width:48%;list-style-type:none!important;margin-bottom:20px}.paytrail-woocommerce-payment-fields--list-item label{display:inline}.paytrail-woocommerce-payment-fields--list-item--wrapper{text-align:center;max-width:100%;height:100%;overflow:hidden;padding:4px}.paytrail-woocommerce-payment-fields--list-item--input{position:absolute;top:0;left:0;opacity:0}.paytrail-woocommerce-payment-fields--list-item--input+.paytrail-woocommerce-payment-fields--list-item--wrapper{border:2px solid #ebebeb}.paytrail-woocommerce-payment-fields--list-item--input:checked+.paytrail-woocommerce-payment-fields--list-item--wrapper,.paytrail-woocommerce-payment-fields--list-item:hover .paytrail-woocommerce-payment-fields--list-item--wrapper{border:2px solid #33798d}.paytrail-woocommerce-payment-fields--list-item--img{float:none!important;cursor:pointer;width:100%;max-width:100%!important;min-height:5em!important;max-height:9em!important;padding:5% 4%!important;margin-left:0!important}.checkout-terms-link{font-size:75%;margin-bottom:10px}.woocommerce-checkout #payment ul.payment_methods li.paytrail-woocommerce-payment-fields--list-item{margin-bottom:5px;margin-left:4px;margin-right:4px}.woocommerce-checkout #payment ul.payment_methods .col-narrow li.paytrail-woocommerce-payment-fields--list-item{margin-left:3px;margin-right:3px}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method{width:100%;max-width:275px;position:relative;display:inline-block}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title{border:2px solid #ebebeb;padding:8px}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title:hover{border:2px solid #33798d}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-input{display:none}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-input:checked+div{border:2px solid #33798d}.paytrail-for-woocommerce-tokenized-payment-methods-saved-payment-methods-title{font-weight:700}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-links{display:inline-block!important;font-size:75%;max-width:50%;margin-top:10px!important;margin-bottom:10px!important;margin-right:5px!important;text-align:center}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods{padding-top:0;padding-bottom:5px}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods li{margin-top:5px;margin-left:3px;margin-right:3px}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods label{cursor:pointer}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title-image{float:left!important;margin-left:-5px;display:inline-block;max-width:55px;margin-top:2px;margin-right:7px}.woocommerce-checkout #paytrail-for-woocommerce-tokenized-payment-method-card-expire-date{font-weight:700;margin-left:15px}.woocommerce-checkout span.paytrail-for-woocommerce-tokenized-payment-add-card-button.dashicons.dashicons-plus{float:left;text-align:left;margin-left:-8px;margin-right:5px}.theme-generatepress .paytrail-woocommerce-payment-fields .paytrail-woocommerce-payment-fields--list-item--img{margin-left:-4px!important;max-width:90%!important}.col-wide .paytrail-woocommerce-payment-fields--list-item{width:18%}.col-wide .paytrail-for-woocommerce-tokenized-payment-method{width:30%}.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:47%}@media only screen and (max-width:1000px){.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:31%}}@media only screen and (max-width:600px){.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:47%}}@media only screen and (max-width:360px){.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-links{max-width:75%}}.col-narrow .provider-list{display:none}.col-narrow .paytrail-provider-group-title{margin-bottom:4px}
\ No newline at end of file
+.paytrail-provider-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;background-color:#ebebeb;cursor:pointer;-ms-flex-flow:row;flex-flow:row;margin:10px 0;padding:8px 12px}.paytrail-provider-group,.paytrail-provider-group-title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.paytrail-provider-group-title{font-size:100%;line-height:1.2em;margin-top:2px;padding-bottom:8px;padding-top:8px;width:100%}.paytrail-provider-group-title i{display:inline-block;height:28px;padding-right:35px;width:5px}.paytrail-provider-group-title.bank i,.paytrail-provider-group-title.credit i,.paytrail-provider-group-title.creditcard i,.paytrail-provider-group-title.mobile i{background-position-y:center;background-size:28px 28px}.paytrail-provider-group-title .icon{float:none;margin-right:8px}.paytrail-provider-group .provider-list{float:right;font-size:75%;font-style:italic;margin-left:2em;text-align:right;width:100%}.paytrail-provider-group.selected{background-color:#33798d;color:#fff}.paytrail-provider-group.selected .paytrail-provider-group-title{color:#fff}.paytrail-provider-group.selected .paytrail-provider-group-title i{-webkit-filter:brightness(5);filter:brightness(5)}.paytrail-provider-group.selected .paytrail-provider-group-title.bank,.paytrail-provider-group.selected .paytrail-provider-group-title.credit,.paytrail-provider-group.selected .paytrail-provider-group-title.creditcard,.paytrail-provider-group.selected .paytrail-provider-group-title.mobile{background-position-y:center;background-size:28px 28px}.paytrail-provider-group:hover{background-color:#d0d0d0}.paytrail-provider-group.selected:hover{background-color:#33798d}.paytrail-woocommerce-payment-fields{margin:0;min-height:90px;padding:0}.paytrail-woocommerce-payment-fields.hidden{display:none}.paytrail-woocommerce-payment-fields--list-item{display:inline-block;list-style-type:none!important;margin-bottom:20px;position:relative;width:48%}.paytrail-woocommerce-payment-fields--list-item label{display:inline}.paytrail-woocommerce-payment-fields--list-item--wrapper{height:100%;max-width:100%;overflow:hidden;padding:4px;text-align:center}.paytrail-woocommerce-payment-fields--list-item--input{left:0;opacity:0;position:absolute;top:0}.paytrail-woocommerce-payment-fields--list-item--input+.paytrail-woocommerce-payment-fields--list-item--wrapper{border:2px solid #ebebeb}.paytrail-woocommerce-payment-fields--list-item--input:checked+.paytrail-woocommerce-payment-fields--list-item--wrapper,.paytrail-woocommerce-payment-fields--list-item:hover .paytrail-woocommerce-payment-fields--list-item--wrapper{border:2px solid #33798d}.paytrail-woocommerce-payment-fields--list-item--img{cursor:pointer;float:none!important;margin-left:0!important;max-height:9em!important;max-width:100%!important;min-height:5em!important;padding:5% 4%!important;width:100%}.checkout-terms-link{font-size:75%;margin-bottom:10px}.woocommerce-checkout #payment ul.payment_methods li.paytrail-woocommerce-payment-fields--list-item{margin-bottom:5px;margin-left:4px;margin-right:4px}.woocommerce-checkout #payment ul.payment_methods .col-narrow li.paytrail-woocommerce-payment-fields--list-item{margin-left:3px;margin-right:3px}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method{display:inline-block;max-width:275px;position:relative;width:100%}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title{border:2px solid #ebebeb;padding:8px}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title:hover{border:2px solid #33798d}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-input{display:none}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-input:checked+div{border:2px solid #33798d}.paytrail-for-woocommerce-tokenized-payment-methods-saved-payment-methods-title{font-weight:700}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-links{display:inline-block!important;font-size:75%;margin-bottom:10px!important;margin-right:5px!important;margin-top:10px!important;max-width:50%;text-align:center}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods{padding-bottom:5px;padding-top:0}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods li{margin-left:3px;margin-right:3px;margin-top:5px}.woocommerce-checkout #payment .payment_methods li .payment_box .woocommerce-SavedPaymentMethods label{cursor:pointer}.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-title-image{display:inline-block;float:left!important;margin-left:-5px;margin-right:7px;margin-top:2px;max-width:55px}.woocommerce-checkout #paytrail-for-woocommerce-tokenized-payment-method-card-expire-date{font-weight:700;margin-left:15px}.woocommerce-checkout span.paytrail-for-woocommerce-tokenized-payment-add-card-button.dashicons.dashicons-plus{float:left;margin-left:-8px;margin-right:5px;text-align:left}.theme-generatepress .paytrail-woocommerce-payment-fields .paytrail-woocommerce-payment-fields--list-item--img{margin-left:-4px!important;max-width:90%!important}.col-wide .paytrail-woocommerce-payment-fields--list-item{width:18%}.col-wide .paytrail-for-woocommerce-tokenized-payment-method{width:30%}.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:47%}@media only screen and (max-width:1000px){.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:31%}}@media only screen and (max-width:600px){.col-narrow .paytrail-woocommerce-payment-fields--list-item{width:47%}}@media only screen and (max-width:360px){.woocommerce-checkout .paytrail-for-woocommerce-tokenized-payment-method-links{max-width:75%}}.col-narrow .provider-list{display:none}.col-narrow .paytrail-provider-group-title{margin-bottom:4px}
+.form-columns{display:-webkit-box;display:-ms-flexbox;display:flex}.form-column{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:20px}.button-primary{background-color:#d92d83;border-color:#d92d83}.form-group{margin-bottom:20px}label{display:block;font-weight:700}input[type=text]{border:1px solid #ccc;padding:10px;width:100%}.button-primary{background-color:#0073e6;border:none;color:#fff;cursor:pointer;padding:10px 20px}.overlay-hidden{display:none!important}#paytrail-overlay-container{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:100}.paytrail-intro-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;border:1px solid #d92d83;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:100px auto 0;max-width:770px}.paytrail-intro-header{-ms-flex-negative:0;background-color:#d92d83;flex-shrink:0;width:100%}.paytrail-intro-logo-container{display:inline-block;width:17%}.paytrail-intro-title-container{display:inline-block;width:82%}.paytrail-intro-title-container h2{color:#fff;font-size:36px;margin-bottom:5px}.modern-button,.paytrail-intro-title-container p{color:#fff;font-size:16px}.modern-button{background-color:#d92d83;border:none;border-radius:10px;cursor:pointer;font-weight:700;margin-right:8px;padding:10px 25px;text-transform:uppercase;-webkit-transition:.3s;transition:.3s}.modern-button.gray{background:#fff;border:1px solid #555;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 3px 10px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 3px 10px 0 rgba(0,0,0,.19);color:#555}.modern-button:hover{background-color:#fff;color:#d92d83}.ui-dialog-titlebar{background:none;border:none}.ui-widget-content{border:none}
diff --git a/assets/dist/main.js b/assets/dist/main.js
index cc8f1c6c..b24b36a1 100644
--- a/assets/dist/main.js
+++ b/assets/dist/main.js
@@ -1 +1 @@
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("paytrail",[],n):"object"==typeof exports?exports.paytrail=n():t.paytrail=n()}("undefined"!=typeof self?self:this,function(){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=27)}([function(t,n,e){var r=e(22)("wks"),o=e(23),i=e(1).Symbol,u="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=r},function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n){var e=t.exports={version:"2.6.0"};"number"==typeof __e&&(__e=e)},function(t,n,e){var r=e(4),o=e(11);t.exports=e(6)?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n,e){var r=e(5),o=e(34),i=e(35),u=Object.defineProperty;n.f=e(6)?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return u(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n,e){var r=e(10);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n,e){t.exports=!e(17)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n){t.exports={}},function(t,n,e){var r=e(22)("keys"),o=e(23);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,n){t.exports=!0},function(t,n,e){var r=e(1),o=e(2),i=e(16),u=e(3),c=e(7),a=function(t,n,e){var f,s,l,p=t&a.F,d=t&a.G,v=t&a.S,y=t&a.P,h=t&a.B,m=t&a.W,x=d?o:o[n]||(o[n]={}),g=x.prototype,w=d?r:v?r[n]:(r[n]||{}).prototype;d&&(e=n);for(f in e)(s=!p&&w&&void 0!==w[f])&&c(x,f)||(l=s?w[f]:e[f],x[f]=d&&"function"!=typeof w[f]?e[f]:h&&s?i(l,r):m&&w[f]==l?function(t){var n=function(n,e,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(n);case 2:return new t(n,e)}return new t(n,e,r)}return t.apply(this,arguments)};return n.prototype=t.prototype,n}(l):y&&"function"==typeof l?i(Function.call,l):l,y&&((x.virtual||(x.virtual={}))[f]=l,t&a.R&&g&&!g[f]&&u(g,f,l)))};a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,t.exports=a},function(t,n,e){var r=e(33);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n,e){var r=e(10),o=e(1).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,n,e){var r=e(42),o=e(9);t.exports=function(t){return r(o(t))}},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){var r=e(8),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,n,e){var r=e(2),o=e(1),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,n){return i[t]||(i[t]=void 0!==n?n:{})})("versions",[]).push({version:r.version,mode:e(14)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,e){var r=e(4).f,o=e(7),i=e(0)("toStringTag");t.exports=function(t,n,e){t&&!o(t=e?t:t.prototype,i)&&r(t,i,{configurable:!0,value:n})}},function(t,n,e){var r=e(9);t.exports=function(t){return Object(r(t))}},function(t,n,e){"use strict";var r=e(28),o=function(t){return t&&t.__esModule?t:{default:t}}(r);e(54);var i=function(t,n){n<600?(t.classList.remove("col-wide"),t.classList.add("col-narrow")):(t.classList.remove("col-narrow"),t.classList.add("col-wide"))},u=void 0,c=!1,a=function t(){var n=document.getElementById("payment"),e=document.getElementsByClassName("payment_method_paytrail");new Date-u<300?setTimeout(t,300):(c=!1,i(e[0],Math.round(n.offsetWidth)))};window.initPaytrail=function(){var t=document.getElementsByClassName("paytrail-provider-group");1===t.length?(0,o.default)(t).map(function(t){t.style="display: none;";var n=document.getElementsByClassName("paytrail-woocommerce-payment-fields");(0,o.default)(n).map(function(t){return t.classList.remove("hidden")})}):t.length>1&&(0,o.default)(t).map(function(t){t.addEventListener("click",function(t){if(t.preventDefault(),this.classList.contains("selected"))return this.classList.remove("selected"),void this.nextSibling.classList.add("hidden");var n=document.getElementsByClassName("paytrail-provider-group selected");0!==n.length&&n[0].classList.remove("selected");var e=document.getElementsByClassName("paytrail-woocommerce-payment-fields");(0,o.default)(e).map(function(t){return t.classList.add("hidden")}),this.classList.add("selected"),this.nextSibling.classList.remove("hidden"),this.nextSibling.closest("ul").scrollIntoView(!1)})});var n=document.getElementsByClassName("paytrail-woocommerce-payment-fields--list-item paytrail-for-woocommerce-tokenized-payment-method");n.length>0&&(0,o.default)(n).map(function(t){t.addEventListener("click",function(t){t.preventDefault(),(0,o.default)(n).map(function(t){return t.classList.remove("selected")});var e=this.childNodes[0].childNodes[0];void 0!==e&&(e.checked=!0,this.classList.add("selected"))})}),a()},document.addEventListener("DOMContentLoaded",function(t){initPaytrail()}),window.addEventListener("resize",function(){u=new Date,!1===c&&(c=!0,setTimeout(a,300))})},function(t,n,e){t.exports={default:e(29),__esModule:!0}},function(t,n,e){e(30),e(47),t.exports=e(2).Array.from},function(t,n,e){"use strict";var r=e(31)(!0);e(32)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,e=this._i;return e>=n.length?{value:void 0,done:!0}:(t=r(n,e),this._i+=t.length,{value:t,done:!1})})},function(t,n,e){var r=e(8),o=e(9);t.exports=function(t){return function(n,e){var i,u,c=String(o(n)),a=r(e),f=c.length;return a<0||a>=f?t?"":void 0:(i=c.charCodeAt(a),i<55296||i>56319||a+1===f||(u=c.charCodeAt(a+1))<56320||u>57343?t?c.charAt(a):i:t?c.slice(a,a+2):u-56320+(i-55296<<10)+65536)}}},function(t,n,e){"use strict";var r=e(14),o=e(15),i=e(36),u=e(3),c=e(12),a=e(37),f=e(25),s=e(46),l=e(0)("iterator"),p=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,n,e,v,y,h,m){a(e,n,v);var x,g,w,b=function(t){if(!p&&t in E)return E[t];switch(t){case"keys":case"values":return function(){return new e(this,t)}}return function(){return new e(this,t)}},_=n+" Iterator",O="values"==y,j=!1,E=t.prototype,S=E[l]||E["@@iterator"]||y&&E[y],L=S||b(y),P=y?O?b("entries"):L:void 0,M="Array"==n?E.entries||S:S;if(M&&(w=s(M.call(new t)))!==Object.prototype&&w.next&&(f(w,_,!0),r||"function"==typeof w[l]||u(w,l,d)),O&&S&&"values"!==S.name&&(j=!0,L=function(){return S.call(this)}),r&&!m||!p&&!j&&E[l]||u(E,l,L),c[n]=L,c[_]=d,y)if(x={values:O?L:b("values"),keys:h?L:b("keys"),entries:P},m)for(g in x)g in E||i(E,g,x[g]);else o(o.P+o.F*(p||j),n,x);return x}},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,e){t.exports=!e(6)&&!e(17)(function(){return 7!=Object.defineProperty(e(18)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(10);t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n,e){t.exports=e(3)},function(t,n,e){"use strict";var r=e(38),o=e(11),i=e(25),u={};e(3)(u,e(0)("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=r(u,{next:o(1,e)}),i(t,n+" Iterator")}},function(t,n,e){var r=e(5),o=e(39),i=e(24),u=e(13)("IE_PROTO"),c=function(){},a=function(){var t,n=e(18)("iframe"),r=i.length;for(n.style.display="none",e(45).appendChild(n),n.src="javascript:",t=n.contentWindow.document,t.open(),t.write("<script>document.F=Object<\/script>"),t.close(),a=t.F;r--;)delete a.prototype[i[r]];return a()};t.exports=Object.create||function(t,n){var e;return null!==t?(c.prototype=r(t),e=new c,c.prototype=null,e[u]=t):e=a(),void 0===n?e:o(e,n)}},function(t,n,e){var r=e(4),o=e(5),i=e(40);t.exports=e(6)?Object.defineProperties:function(t,n){o(t);for(var e,u=i(n),c=u.length,a=0;c>a;)r.f(t,e=u[a++],n[e]);return t}},function(t,n,e){var r=e(41),o=e(24);t.exports=Object.keys||function(t){return r(t,o)}},function(t,n,e){var r=e(7),o=e(19),i=e(43)(!1),u=e(13)("IE_PROTO");t.exports=function(t,n){var e,c=o(t),a=0,f=[];for(e in c)e!=u&&r(c,e)&&f.push(e);for(;n.length>a;)r(c,e=n[a++])&&(~i(f,e)||f.push(e));return f}},function(t,n,e){var r=e(20);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(19),o=e(21),i=e(44);t.exports=function(t){return function(n,e,u){var c,a=r(n),f=o(a.length),s=i(u,f);if(t&&e!=e){for(;f>s;)if((c=a[s++])!=c)return!0}else for(;f>s;s++)if((t||s in a)&&a[s]===e)return t||s||0;return!t&&-1}}},function(t,n,e){var r=e(8),o=Math.max,i=Math.min;t.exports=function(t,n){return t=r(t),t<0?o(t+n,0):i(t,n)}},function(t,n,e){var r=e(1).document;t.exports=r&&r.documentElement},function(t,n,e){var r=e(7),o=e(26),i=e(13)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,n,e){"use strict";var r=e(16),o=e(15),i=e(26),u=e(48),c=e(49),a=e(21),f=e(50),s=e(51);o(o.S+o.F*!e(53)(function(t){Array.from(t)}),"Array",{from:function(t){var n,e,o,l,p=i(t),d="function"==typeof this?this:Array,v=arguments.length,y=v>1?arguments[1]:void 0,h=void 0!==y,m=0,x=s(p);if(h&&(y=r(y,v>2?arguments[2]:void 0,2)),void 0==x||d==Array&&c(x))for(n=a(p.length),e=new d(n);n>m;m++)f(e,m,h?y(p[m],m):p[m]);else for(l=x.call(p),e=new d;!(o=l.next()).done;m++)f(e,m,h?u(l,y,[o.value,m],!0):o.value);return e.length=m,e}})},function(t,n,e){var r=e(5);t.exports=function(t,n,e,o){try{return o?n(r(e)[0],e[1]):n(e)}catch(n){var i=t.return;throw void 0!==i&&r(i.call(t)),n}}},function(t,n,e){var r=e(12),o=e(0)("iterator"),i=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||i[o]===t)}},function(t,n,e){"use strict";var r=e(4),o=e(11);t.exports=function(t,n,e){n in t?r.f(t,n,o(0,e)):t[n]=e}},function(t,n,e){var r=e(52),o=e(0)("iterator"),i=e(12);t.exports=e(2).getIteratorMethod=function(t){if(void 0!=t)return t[o]||t["@@iterator"]||i[r(t)]}},function(t,n,e){var r=e(20),o=e(0)("toStringTag"),i="Arguments"==r(function(){return arguments}()),u=function(t,n){try{return t[n]}catch(t){}};t.exports=function(t){var n,e,c;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=u(n=Object(t),o))?e:i?r(n):"Object"==(c=r(n))&&"function"==typeof n.callee?"Arguments":c}},function(t,n,e){var r=e(0)("iterator"),o=!1;try{var i=[7][r]();i.return=function(){o=!0},Array.from(i,function(){throw 2})}catch(t){}t.exports=function(t,n){if(!n&&!o)return!1;var e=!1;try{var i=[7],u=i[r]();u.next=function(){return{done:e=!0}},i[r]=function(){return u},t(i)}catch(t){}return e}},function(t,n){}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("paytrail",[],e):"object"==typeof exports?exports.paytrail=e():t.paytrail=e()}(self,(()=>(()=>{var t={4043:(t,e,r)=>{t.exports={default:r(7185),__esModule:!0}},7185:(t,e,r)=>{r(1867),r(2586),t.exports=r(4579).Array.from},5663:t=>{t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},2159:(t,e,r)=>{var n=r(6727);t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},7428:(t,e,r)=>{var n=r(7932),o=r(8728),i=r(6531);t.exports=function(t){return function(e,r,u){var a,c=n(e),s=o(c.length),f=i(u,s);if(t&&r!=r){for(;s>f;)if((a=c[f++])!=a)return!0}else for(;s>f;f++)if((t||f in c)&&c[f]===r)return t||f||0;return!t&&-1}}},4677:(t,e,r)=>{var n=r(2894),o=r(2939)("toStringTag"),i="Arguments"==n(function(){return arguments}());t.exports=function(t){var e,r,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?r:i?n(e):"Object"==(u=n(e))&&"function"==typeof e.callee?"Arguments":u}},2894:t=>{var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},4579:t=>{var e=t.exports={version:"2.6.12"};"number"==typeof __e&&(__e=e)},2445:(t,e,r)=>{"use strict";var n=r(4743),o=r(3101);t.exports=function(t,e,r){e in t?n.f(t,e,o(0,r)):t[e]=r}},9216:(t,e,r)=>{var n=r(5663);t.exports=function(t,e,r){if(n(t),void 0===e)return t;switch(r){case 1:return function(r){return t.call(e,r)};case 2:return function(r,n){return t.call(e,r,n)};case 3:return function(r,n,o){return t.call(e,r,n,o)}}return function(){return t.apply(e,arguments)}}},8333:t=>{t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},9666:(t,e,r)=>{t.exports=!r(7929)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},7467:(t,e,r)=>{var n=r(6727),o=r(3938).document,i=n(o)&&n(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},3338:t=>{t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},3856:(t,e,r)=>{var n=r(3938),o=r(4579),i=r(9216),u=r(1818),a=r(7069),c="prototype",s=function(t,e,r){var f,l,p,d=t&s.F,v=t&s.G,y=t&s.S,m=t&s.P,h=t&s.B,x=t&s.W,g=v?o:o[e]||(o[e]={}),w=g[c],b=v?n:y?n[e]:(n[e]||{})[c];for(f in v&&(r=e),r)(l=!d&&b&&void 0!==b[f])&&a(g,f)||(p=l?b[f]:r[f],g[f]=v&&"function"!=typeof b[f]?r[f]:h&&l?i(p,n):x&&b[f]==p?function(t){var e=function(e,r,n){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,r)}return new t(e,r,n)}return t.apply(this,arguments)};return e[c]=t[c],e}(p):m&&"function"==typeof p?i(Function.call,p):p,m&&((g.virtual||(g.virtual={}))[f]=p,t&s.R&&w&&!w[f]&&u(w,f,p)))};s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},7929:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},3938:t=>{var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},7069:t=>{var e={}.hasOwnProperty;t.exports=function(t,r){return e.call(t,r)}},1818:(t,e,r)=>{var n=r(4743),o=r(3101);t.exports=r(9666)?function(t,e,r){return n.f(t,e,o(1,r))}:function(t,e,r){return t[e]=r,t}},4881:(t,e,r)=>{var n=r(3938).document;t.exports=n&&n.documentElement},3758:(t,e,r)=>{t.exports=!r(9666)&&!r(7929)((function(){return 7!=Object.defineProperty(r(7467)("div"),"a",{get:function(){return 7}}).a}))},799:(t,e,r)=>{var n=r(2894);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==n(t)?t.split(""):Object(t)}},5991:(t,e,r)=>{var n=r(5449),o=r(2939)("iterator"),i=Array.prototype;t.exports=function(t){return void 0!==t&&(n.Array===t||i[o]===t)}},6727:t=>{t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},5602:(t,e,r)=>{var n=r(2159);t.exports=function(t,e,r,o){try{return o?e(n(r)[0],r[1]):e(r)}catch(e){var i=t.return;throw void 0!==i&&n(i.call(t)),e}}},3945:(t,e,r)=>{"use strict";var n=r(8989),o=r(3101),i=r(5378),u={};r(1818)(u,r(2939)("iterator"),(function(){return this})),t.exports=function(t,e,r){t.prototype=n(u,{next:o(1,r)}),i(t,e+" Iterator")}},5700:(t,e,r)=>{"use strict";var n=r(6227),o=r(3856),i=r(7470),u=r(1818),a=r(5449),c=r(3945),s=r(5378),f=r(5089),l=r(2939)("iterator"),p=!([].keys&&"next"in[].keys()),d="keys",v="values",y=function(){return this};t.exports=function(t,e,r,m,h,x,g){c(r,e,m);var w,b,O,_=function(t){if(!p&&t in L)return L[t];switch(t){case d:case v:return function(){return new r(this,t)}}return function(){return new r(this,t)}},j=e+" Iterator",S=h==v,E=!1,L=t.prototype,P=L[l]||L["@@iterator"]||h&&L[h],M=P||_(h),A=h?S?_("entries"):M:void 0,T="Array"==e&&L.entries||P;if(T&&(O=f(T.call(new t)))!==Object.prototype&&O.next&&(s(O,j,!0),n||"function"==typeof O[l]||u(O,l,y)),S&&P&&P.name!==v&&(E=!0,M=function(){return P.call(this)}),n&&!g||!p&&!E&&L[l]||u(L,l,M),a[e]=M,a[j]=y,h)if(w={values:S?M:_(v),keys:x?M:_(d),entries:A},g)for(b in w)b in L||i(L,b,w[b]);else o(o.P+o.F*(p||E),e,w);return w}},6630:(t,e,r)=>{var n=r(2939)("iterator"),o=!1;try{var i=[7][n]();i.return=function(){o=!0},Array.from(i,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var r=!1;try{var i=[7],u=i[n]();u.next=function(){return{done:r=!0}},i[n]=function(){return u},t(i)}catch(t){}return r}},5449:t=>{t.exports={}},6227:t=>{t.exports=!0},8989:(t,e,r)=>{var n=r(2159),o=r(7856),i=r(3338),u=r(7281)("IE_PROTO"),a=function(){},c="prototype",s=function(){var t,e=r(7467)("iframe"),n=i.length;for(e.style.display="none",r(4881).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),s=t.F;n--;)delete s[c][i[n]];return s()};t.exports=Object.create||function(t,e){var r;return null!==t?(a[c]=n(t),r=new a,a[c]=null,r[u]=t):r=s(),void 0===e?r:o(r,e)}},4743:(t,e,r)=>{var n=r(2159),o=r(3758),i=r(3206),u=Object.defineProperty;e.f=r(9666)?Object.defineProperty:function(t,e,r){if(n(t),e=i(e,!0),n(r),o)try{return u(t,e,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(t[e]=r.value),t}},7856:(t,e,r)=>{var n=r(4743),o=r(2159),i=r(6162);t.exports=r(9666)?Object.defineProperties:function(t,e){o(t);for(var r,u=i(e),a=u.length,c=0;a>c;)n.f(t,r=u[c++],e[r]);return t}},5089:(t,e,r)=>{var n=r(7069),o=r(6530),i=r(7281)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),n(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},2963:(t,e,r)=>{var n=r(7069),o=r(7932),i=r(7428)(!1),u=r(7281)("IE_PROTO");t.exports=function(t,e){var r,a=o(t),c=0,s=[];for(r in a)r!=u&&n(a,r)&&s.push(r);for(;e.length>c;)n(a,r=e[c++])&&(~i(s,r)||s.push(r));return s}},6162:(t,e,r)=>{var n=r(2963),o=r(3338);t.exports=Object.keys||function(t){return n(t,o)}},3101:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},7470:(t,e,r)=>{t.exports=r(1818)},5378:(t,e,r)=>{var n=r(4743).f,o=r(7069),i=r(2939)("toStringTag");t.exports=function(t,e,r){t&&!o(t=r?t:t.prototype,i)&&n(t,i,{configurable:!0,value:e})}},7281:(t,e,r)=>{var n=r(250)("keys"),o=r(5730);t.exports=function(t){return n[t]||(n[t]=o(t))}},250:(t,e,r)=>{var n=r(4579),o=r(3938),i="__core-js_shared__",u=o[i]||(o[i]={});(t.exports=function(t,e){return u[t]||(u[t]=void 0!==e?e:{})})("versions",[]).push({version:n.version,mode:r(6227)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},510:(t,e,r)=>{var n=r(1052),o=r(8333);t.exports=function(t){return function(e,r){var i,u,a=String(o(e)),c=n(r),s=a.length;return c<0||c>=s?t?"":void 0:(i=a.charCodeAt(c))<55296||i>56319||c+1===s||(u=a.charCodeAt(c+1))<56320||u>57343?t?a.charAt(c):i:t?a.slice(c,c+2):u-56320+(i-55296<<10)+65536}}},6531:(t,e,r)=>{var n=r(1052),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=n(t))<0?o(t+e,0):i(t,e)}},1052:t=>{var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},7932:(t,e,r)=>{var n=r(799),o=r(8333);t.exports=function(t){return n(o(t))}},8728:(t,e,r)=>{var n=r(1052),o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},6530:(t,e,r)=>{var n=r(8333);t.exports=function(t){return Object(n(t))}},3206:(t,e,r)=>{var n=r(6727);t.exports=function(t,e){if(!n(t))return t;var r,o;if(e&&"function"==typeof(r=t.toString)&&!n(o=r.call(t)))return o;if("function"==typeof(r=t.valueOf)&&!n(o=r.call(t)))return o;if(!e&&"function"==typeof(r=t.toString)&&!n(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},5730:t=>{var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},2939:(t,e,r)=>{var n=r(250)("wks"),o=r(5730),i=r(3938).Symbol,u="function"==typeof i;(t.exports=function(t){return n[t]||(n[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=n},3728:(t,e,r)=>{var n=r(4677),o=r(2939)("iterator"),i=r(5449);t.exports=r(4579).getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||i[n(t)]}},2586:(t,e,r)=>{"use strict";var n=r(9216),o=r(3856),i=r(6530),u=r(5602),a=r(5991),c=r(8728),s=r(2445),f=r(3728);o(o.S+o.F*!r(6630)((function(t){Array.from(t)})),"Array",{from:function(t){var e,r,o,l,p=i(t),d="function"==typeof this?this:Array,v=arguments.length,y=v>1?arguments[1]:void 0,m=void 0!==y,h=0,x=f(p);if(m&&(y=n(y,v>2?arguments[2]:void 0,2)),null==x||d==Array&&a(x))for(r=new d(e=c(p.length));e>h;h++)s(r,h,m?y(p[h],h):p[h]);else for(l=x.call(p),r=new d;!(o=l.next()).done;h++)s(r,h,m?u(l,y,[o.value,h],!0):o.value);return r.length=h,r}})},1867:(t,e,r)=>{"use strict";var n=r(510)(!0);r(5700)(String,"String",(function(t){this._t=String(t),this._i=0}),(function(){var t,e=this._t,r=this._i;return r>=e.length?{value:void 0,done:!0}:(t=n(e,r),this._i+=t.length,{value:t,done:!1})}))},9529:(t,e,r)=>{"use strict";r.r(e)},1932:(t,e,r)=>{"use strict";r.r(e)}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}return r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},(()=>{"use strict";var t,e=(t=r(4043))&&t.__esModule?t:{default:t};r(1932),r(9529);var n=void 0,o=!1,i=function t(){var e,r=document.getElementById("payment"),i=document.getElementsByClassName("payment_method_paytrail");new Date-n<300?setTimeout(t,300):(o=!1,e=i[0],Math.round(r.offsetWidth)<600?(e.classList.remove("col-wide"),e.classList.add("col-narrow")):(e.classList.remove("col-narrow"),e.classList.add("col-wide")))};window.initPaytrail=function(){var t=document.getElementsByClassName("paytrail-provider-group");1===t.length?(0,e.default)(t).map((function(t){t.style="display: none;";var r=document.getElementsByClassName("paytrail-woocommerce-payment-fields");(0,e.default)(r).map((function(t){return t.classList.remove("hidden")}))})):t.length>1&&(0,e.default)(t).map((function(t){t.addEventListener("click",(function(t){if(t.preventDefault(),this.classList.contains("selected"))return this.classList.remove("selected"),void this.nextSibling.classList.add("hidden");var r=document.getElementsByClassName("paytrail-provider-group selected");0!==r.length&&r[0].classList.remove("selected");var n=document.getElementsByClassName("paytrail-woocommerce-payment-fields");(0,e.default)(n).map((function(t){return t.classList.add("hidden")})),this.classList.add("selected"),this.nextSibling.classList.remove("hidden"),this.nextSibling.closest("ul").scrollIntoView(!1)}))}));var r=document.getElementsByClassName("paytrail-woocommerce-payment-fields--list-item paytrail-for-woocommerce-tokenized-payment-method");r.length>0&&(0,e.default)(r).map((function(t){t.addEventListener("click",(function(t){t.preventDefault(),(0,e.default)(r).map((function(t){return t.classList.remove("selected")}));var n=this.childNodes[0].childNodes[0];void 0!==n&&(n.checked=!0,this.classList.add("selected"))}))})),i()},document.addEventListener("DOMContentLoaded",(function(t){initPaytrail()})),window.addEventListener("resize",(function(){n=new Date,!1===o&&(o=!0,setTimeout(i,300))}))})(),{}})()));
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 779133cc..9d6713f4 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,5 +1,6 @@
 // Require main style file here for concatenation.
 require( __dirname + '/../scss/payment_fields.scss' );
+require( __dirname + '/../scss/introStyles.scss' );
 const handleSize = function(elem, size) {
     if (size < 600) {
         elem.classList.remove('col-wide');
diff --git a/assets/js/paytrail-intro-scripts.js b/assets/js/paytrail-intro-scripts.js
new file mode 100644
index 00000000..ce40bfc4
--- /dev/null
+++ b/assets/js/paytrail-intro-scripts.js
@@ -0,0 +1,65 @@
+jQuery(document).ready(function ($) {
+    let isPaytrailOverlayOpen = $('#paytrail-overlay-container').length > 0;
+
+    // Function to initialize the dialog
+    const initializeDialog = () => {
+        const dialogOptions = {
+            autoOpen: false,
+            modal: true,
+            width: 500,
+            open: function (event, ui) {
+                $(this).parent().css('z-index', 9998);
+                isPaytrailOverlayOpen = true; // Set to true when the overlay is opened
+            },
+            close: function (event, ui) {
+                $(this).parent().css('z-index', '');
+                isPaytrailOverlayOpen = false; // Set to false when the overlay is closed
+            },
+        };
+
+        // Open the dialog when the button is clicked
+        $(document).on('click', '#open-lightbox', function () {
+            $('#user-data-form').dialog(dialogOptions).dialog('open');
+        });
+
+        // Event handling for credentials button
+        $(document).on('click', '#credentials', function () {
+            closePaytrailOverlayContainer();
+        });
+
+        // Event handling for test mode button
+        $(document).on('click', '#test-mode-button', function () {
+            // Toggle the "test mode" checkbox
+            $('#woocommerce_paytrail_enable_test_mode').prop('checked', function () {
+                return !$(this).prop('checked');
+            });
+
+            // Trigger a change event on the checkbox
+            $('#woocommerce_paytrail_enable_test_mode').trigger('change');
+
+            // Simulate a click on the "Save changes" button
+            $('#mainform [name="save"]').click();
+        });
+    };
+
+    // Function to handle form submission
+    const handleFormSubmission = () => {
+        $(document).on('submit', '#user-data-form', function (event) {
+            event.preventDefault();
+            const formData = $(this).serialize();
+            const customUrl = 'https://www.paytrail.com/tilaa-palvelu/lisatiedot';
+            const popup = window.open(customUrl + '?' + formData + '&tekninen_alusta=WooCommerce', '_blank');
+            popup.focus();
+        });
+    };
+
+    // Function to close the paytrail overlay container
+    const closePaytrailOverlayContainer = () => {
+        $('#paytrail-overlay-container').remove(); // Remove the overlay container from the DOM
+        isPaytrailOverlayOpen = false; // Set to false when the overlay is closed
+    };
+
+    // Call the functions when the DOM is ready
+    initializeDialog();
+    handleFormSubmission();
+});
diff --git a/assets/scss/introStyles.scss b/assets/scss/introStyles.scss
new file mode 100644
index 00000000..5d74cae1
--- /dev/null
+++ b/assets/scss/introStyles.scss
@@ -0,0 +1,111 @@
+.form-columns{
+    display:flex;
+}
+.form-column{
+    flex: 1;
+    margin-right: 20px;
+}
+.button-primary {
+    background-color: #D92D83;
+    border-color: #D92D83;
+    color: #fff; /* Text color */
+}
+.form-group {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+}
+
+.button-primary {
+    background-color: #0073e6;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+.overlay-hidden {
+      display: none !important;
+}
+#paytrail-overlay-container {
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.5);
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   z-index: 100;
+}
+.paytrail-intro-container {
+   max-width:770px;
+   border: 1px solid #D92D83;
+   margin:0 auto;
+   display:flex;
+   flex-direction:row;
+   flex-wrap:wrap;
+   margin-top:100px;
+}
+.paytrail-intro-header{
+   background-color:#D92D83;
+   width:100%;
+   flex-shrink:0;
+}
+.paytrail-intro-logo-container{
+   width:17%;
+   display:inline-block;
+}
+.paytrail-intro-title-container{
+   width:82%;
+   display:inline-block;
+}
+.paytrail-intro-title-container h2 {
+   color:#fff;
+   font-size:36px;
+   margin-bottom:5px;
+}
+.paytrail-intro-title-container p {
+   color:#fff;
+   font-size:16px;
+}
+.modern-button {
+   background-color: #D92D83;
+   color: #fff;
+   border: none;
+   padding: 10px 25px;
+   cursor: pointer;
+   border-radius: 10px;
+   font-size: 16px;
+   transition: 0.3s;
+   margin-right: 8px;
+   text-transform: uppercase;
+   font-weight: bold;
+}
+.modern-button.gray{
+   background: #fff;
+   border:1px solid #555;
+   color: #555;
+   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
+   
+}
+.modern-button:hover {
+   background-color: #fff;
+   color:#D92D83;
+}
+.ui-dialog-titlebar {
+background: none;
+border:none
+}
+.ui-widget-content {
+   border: none; 
+}
diff --git a/package.json b/package.json
index 284555ea..69764da3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "fastclick": "^1.0.6",
         "file-loader": "^1.1.9",
         "font-awesome": "^4.7.0",
+        "mini-css-extract-plugin": "^2.7.7",
         "node-sass": "^9.0.0",
         "normalize-css": "^2.3.1",
         "postcss-loader": "^7.2.4",
@@ -29,13 +30,14 @@
         "sass-loader": "^6.0.6",
         "style-loader": "^0.20.2",
         "url-loader": "^0.6.2",
-        "webpack": "^5.76.0"
+        "webpack": "^5.76.0",
+        "webpack-cli": "^5.1.4"
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch": "webpack --watch",
         "dev": "webpack",
-        "build": "webpack -p"
+        "build": "webpack"
     },
     "homepage": "https://github.com/paytrail/paytrail-for-woocommerce",
     "author": "Paytrail <asiakaspalvelu@paytrail.com> (https://www.paytrail.com)",
diff --git a/plugin.php b/plugin.php
index 0e82c4dd..654a0278 100644
--- a/plugin.php
+++ b/plugin.php
@@ -113,6 +113,10 @@ final class Plugin {
         'Text Domain',
         'Domain Path',
     ];
+    public function enqueue_jquery() {
+        // Enqueue jQuery script
+        wp_enqueue_script('jquery');
+    }
 
     /**
      * Constructor function
@@ -135,11 +139,57 @@ protected function __construct() {
         add_action( 'wp_enqueue_scripts', function() {
             wp_enqueue_style( 'dashicons' );
         } );
-	    add_action( 'before_woocommerce_init', function() {
-		    if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
-			    \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__, true );
-		    }
-	    } );
+        
+        add_action( 'before_woocommerce_init', function() {
+            if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
+                \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__, true );
+            }
+        } );
+
+        // Enqueue jQuery
+        add_action('admin_enqueue_scripts', array($this, 'enqueue_jquery'));
+        add_action('admin_enqueue_scripts', array($this, 'enque_jquery_scripts'));
+    }
+
+    /**
+     * Register intro scripts
+     */
+    public static function register_intro_scripts() {
+        // Get plugin directory URL
+        $plugin_instance = Plugin::instance();
+		$plugin_dir_url = $plugin_instance->get_plugin_dir_url();
+		$plugin_version = $plugin_instance->get_plugin_info()['Version'];
+    
+        // Register the custom script
+        wp_register_script(
+            'introScripts',
+            $plugin_dir_url . 'assets/dist/introScripts.js',
+            ['jquery'], // Dependency on jQuery
+            $plugin_version,
+            true // Enqueue in the footer
+        );
+    
+        // Enqueue the custom script
+        wp_enqueue_script('introScripts');
+    }
+
+    /**
+     * Enqueue jQuery UI from WordPress core
+     */
+    public function enque_jquery_scripts($hook) {
+        if ($hook == 'woocommerce_page_wc-settings' && isset($_GET['tab']) && $_GET['tab'] == 'checkout' && isset($_GET['section']) && $_GET['section'] == 'paytrail') {
+
+        wp_enqueue_script('jquery');
+        // Enqueue jQuery UI Core
+        wp_enqueue_script('jquery-ui-core');
+        // Enqueue jQuery UI Dialog
+        wp_enqueue_script('jquery-ui-dialog');
+        // Add jQuery UI styles
+        wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
+        // Enqueue intro scripts
+        self::register_intro_scripts();
+
+        }
     }
 
     /**
@@ -167,7 +217,7 @@ public function paytrail_checkout_customize_css() {
                     background-color: <?php echo get_theme_mod('paytrail_group_highlighted_background', '#33798d'); ?> !important;
                     color: <?php echo get_theme_mod('paytrail_group_highlighted_text', '#ffffff'); ?> !important;
                 }
-                .woocommerce-checkout #payment .paytrail-woocommerce-payment-fields--list-item--input:checked+.paytrail-woocommerce-payment-fields--list-item--wrapper, .woocommerce-checkout #payment .paytrail-woocommerce-payment-fields--list-item:hover .paytrail-woocommerce-payment-fields--list-item--wrapper {
+                .woocommerce-checkout #payment .paytrail-woocommerce-payment-fields--list-item--input:checked+.paytrail-woocommerce-payment-fields--list-item--wrapper, .woocommerce-checkout #payment .paytrail-woocommerce-payment-fields--list-item:hover .paytrail-woocommerce-payment-fields--list-item--wrapper {                    
                     border: 2px solid <?php esc_html_e( get_theme_mod('paytrail_method_highlighted', '#33798d')); ?> !important;
                 }
                 .woocommerce-checkout #payment ul.payment_methods li.paytrail-woocommerce-payment-fields--list-item .paytrail-woocommerce-payment-fields--list-item--wrapper:hover {
diff --git a/src/Gateway.php b/src/Gateway.php
index 396c1599..2f3c73c2 100644
--- a/src/Gateway.php
+++ b/src/Gateway.php
@@ -202,8 +202,78 @@ protected function add_actions() {
 		add_filter('woocommerce_admin_order_items_after_refunds', [ $this, 'refund_items' ], 10, 1);
 		add_filter('woocommerce_order_data_store_cpt_get_orders_query', [ $this, 'handle_custom_searches' ], 10, 2);
 		add_filter('woocommerce_payment_gateway_get_saved_payment_method_option_html', [ $this, 'get_token_payment_option_html' ], 10, 2);
+		add_action('admin_footer', [$this, 'display_user_data_form']);
+		add_action('admin_notices', [$this, 'admin_notices']);
+		add_action('admin_enqueue_scripts', [$this, 'enqueue_admin_scripts']);
+		add_action('admin_enqueue_scripts', [$this, 'enqueue_admin_styles']);
+
+	}
+
+	/**
+	 * Display the user_data_form as an overlay
+	 */
+	public function display_user_data_form() {
+		$merchant_id = $this->get_option('merchant_id');
+
+		$current_screen = get_current_screen();
+		$is_paytrail_settings_page = (
+			!$test_mode_enabled &&
+			$current_screen && 'woocommerce_page_wc-settings' === $current_screen->id &&
+			isset($_GET['tab']) && 'checkout' === $_GET['tab'] &&
+			isset($_GET['section']) && 'paytrail' === $_GET['section']
+		);
+		
+		// Check if merchant_id is already submitted
+		if (!empty($merchant_id) || $this->get_option('enable_test_mode', 'no') === 'yes') {
+			return;
+		}
+
+		if ($is_paytrail_settings_page) {
+			$template_path = plugin_dir_path(__FILE__) . 'View/Intro-form.php';
+			if (file_exists($template_path)) {
+				include_once $template_path;
+			}
+		}
+		$this->user_data_form(); // Output the user_data_form content
+	}
+
+	/**
+	 * Function to display the form
+	 */
+	public function user_data_form() {
+		$current_user = wp_get_current_user();
+		$user_email = $current_user->user_email;
+		$first_name = $current_user->first_name;
+		$last_name = $current_user->last_name;
+
+		if (class_exists('WooCommerce')) {
+			$wc_billing_data = get_user_meta($current_user->ID, 'billing', true);
+			$company_name = isset($wc_billing_data['company']) ? $wc_billing_data['company'] : '';
+			$phone_number = isset($wc_billing_data['phone']) ? $wc_billing_data['phone'] : '';
+
+			// Fetch shop's address using WC_Countries
+			$wc_countries = WC()->countries;
+			$shop_address = $wc_countries->get_base_address();
+			$shop_city = $wc_countries->get_base_city();
+			$shop_postcode = $wc_countries->get_base_postcode();
+		} else {
+			$company_name = '';
+			$phone_number = '';
+			$shop_address = '';
+			$shop_city = '';
+			$shop_postcode = '';
+		}
+
+
+		$site_url = esc_url(get_site_url());
+
+		$template_path = plugin_dir_path(__FILE__) . 'View/User-data-form.php';
+		if (file_exists($template_path)) {
+			include_once $template_path;
+		}
 	}
 
+
 	/**
 	 * Returns the payment method description string.
 	 *
@@ -224,6 +294,12 @@ protected function get_method_info() {
 	 * @return void
 	 */
 	protected function set_form_fields() {
+		$merchant_id_disabled = $this->get_option( 'enable_test_mode', 'no' ) === 'yes';
+		$secret_key_disabled = $this->get_option( 'enable_test_mode', 'no' ) === 'yes';
+		$enable_test_mode_disabled = (
+			!empty($this->get_option('merchant_id')) ||
+			!empty($this->get_option('secret_key'))
+		);
 		$this->form_fields = [
 			// Whether the payment gateway is enabled.
 			'enabled'     => [
@@ -232,32 +308,48 @@ protected function set_form_fields() {
 				'label'   => __('Enable Paytrail for WooCommerce', 'paytrail-for-woocommerce'),
 				'default' => 'yes',
 			],
-			// Whether test mode is enabled
-			'testmode'    => [
-				'title'   => __('Test mode', 'paytrail-for-woocommerce'),
-				'type'    => 'checkbox',
-				'label'   => __('Enable test mode', 'paytrail-for-woocommerce'),
-				'default' => 'no',
+			// Credentials
+			'credentials_title' => [
+				'title' => __('Credentials', 'paytrail-for-woocommerce'),
+				'type' => 'title',
 			],
-			// Whether debug mode is enabled
-			'debug'       => [
-				'title'       => __('Debug log', 'paytrail-for-woocommerce'),
+			// Paytrail credentials
+			'merchant_id' => [
+				'title'   => __('Merchant ID', 'paytrail-for-woocommerce'),
+				'type'    => 'text',
+				'label'   => __('Merchant ID', 'paytrail-for-woocommerce'),
+				'default' => '',
+				'disabled' => $merchant_id_disabled, // Disable if enable_test_mode is checked
+			],
+			'secret_key'  => [
+				'title'   => __('Secret key', 'paytrail-for-woocommerce'),
+				'type'    => 'password',
+				'label'   => __('Secret key', 'paytrail-for-woocommerce'),
+				'default' => '',
+				'disabled' => $secret_key_disabled, // Disable if enable_test_mode is checked
+			],
+			// Whether test mode is enabled
+			'enable_test_mode' => [
+				'title'       => __('Enable test mode', 'paytrail-for-woocommerce'),
 				'type'        => 'checkbox',
-				'label'       => __('Enable logging', 'paytrail-for-woocommerce'),
+				'label'       => __('Enable test mode', 'paytrail-for-woocommerce'),
 				'default'     => 'no',
-				// translators: %s: URL
-				'description' => sprintf(__('This enables logging all payment gateway events. The log will be written in %1$s. Recommended only for debugging purposes as this might save personal data. All logs can be viewed here: %2$s', 'paytrail-for-woocommerce'), '<code>' . \WC_Log_Handler_File::get_log_file_path(Plugin::GATEWAY_ID) . '</code>', '<a target="_blank" href="/wp-admin/admin.php?page=wc-status&tab=logs">Logs</a>'),
+				'description' => __('Enable test mode to process payments in the test environment.', 'paytrail-for-woocommerce'),
+				'disabled'    => $enable_test_mode_disabled, // Disable the checkbox if merchant_id or secret_key has a value
 			],
-			// Update tokens if enabled
-			'tokenize'       => [
-				'title'       => __('Update tokens', 'paytrail-for-woocommerce'),
+			// General settings
+			'general_settings_title' => [
+				'title' => __('General settings', 'paytrail-for-woocommerce'),
+				'type' => 'title',
+			],
+			// Whether to show the payment provider wall or choose the method in the store
+			'provider_selection' => [
+				'title'       => __('Payment provider selection', 'paytrail-for-woocommerce'),
 				'type'        => 'checkbox',
-				'label'       => __('Enable token update', 'paytrail-for-woocommerce'),
-				'default'     => 'no',
-				// translators: %s: URL
-				'description' => __('Choose this to update card information (tokens) from the old Checkout Finland for WooCommerce -plugin. The update is done upon saving settings. This will also update tokens for the current WooCommerce Subscriptions orders, if that module is in use. </br> <b>CAUTION:</b> This action cannot be reverted.', 'paytrail-for-woocommerce'),
+				'label'       => __('Enable payment provider selection in the checkout page', 'paytrail-for-woocommerce'),
+				'default'     => 'yes',
+				'description' => __('Choose whether you want the payment provider selection to happen in the checkout page or in a separate page.', 'paytrail-for-woocommerce'),
 			],
-
 			// Alternative text + description to show on the Checkout page
 			'custom_provider_name' => [
 				'title'       => __('Payment provider title', 'paytrail-for-woocommerce'),
@@ -273,26 +365,10 @@ protected function set_form_fields() {
 				'default'     => 'Paytrail for WooCommerce',
 				'description' => __('Depending on your theme, this description might be displayed on the Checkout page before the payment provider images.', 'paytrail-for-woocommerce')
 			],
-			// Whether to show the payment provider wall or choose the method in the store
-			'provider_selection' => [
-				'title'       => __('Payment provider selection', 'paytrail-for-woocommerce'),
-				'type'        => 'checkbox',
-				'label'       => __('Enable payment provider selection in the checkout page', 'paytrail-for-woocommerce'),
-				'default'     => 'yes',
-				'description' => __('Choose whether you want the payment provider selection to happen in the checkout page or in a separate page.', 'paytrail-for-woocommerce'),
-			],
-			// Paytrail credentials
-			'merchant_id' => [
-				'title'   => __('Merchant ID', 'paytrail-for-woocommerce'),
-				'type'    => 'text',
-				'label'   => __('Merchant ID', 'paytrail-for-woocommerce'),
-				'default' => '',
-			],
-			'secret_key'  => [
-				'title'   => __('Secret key', 'paytrail-for-woocommerce'),
-				'type'    => 'password',
-				'label'   => __('Secret key', 'paytrail-for-woocommerce'),
-				'default' => '',
+			// Advanced settings
+			'advanced_settings_title' => [
+				'title' => __('Advanced settings', 'paytrail-for-woocommerce'),
+				'type' => 'title',
 			],
 			'fallback_country'  => [
 				'title'   => __('Fallback country', 'paytrail-for-woocommerce'),
@@ -302,6 +378,24 @@ protected function set_form_fields() {
 				'description' => __('Select country to be used as fallback if no country specified in checkout.', 'paytrail-for-woocommerce'),
 				'options' => array_merge(['' => 'Select country'], WC()->countries->get_countries())
 			],
+			// Whether debug mode is enabled
+			'debug'       => [
+				'title'       => __('Debug log', 'paytrail-for-woocommerce'),
+				'type'        => 'checkbox',
+				'label'       => __('Enable logging', 'paytrail-for-woocommerce'),
+				'default'     => 'no',
+				// translators: %s: URL
+				'description' => sprintf(__('This enables logging all payment gateway events. The log will be written in %1$s. Recommended only for debugging purposes as this might save personal data. All logs can be viewed here: %2$s', 'paytrail-for-woocommerce'), '<code>' . \WC_Log_Handler_File::get_log_file_path(Plugin::GATEWAY_ID) . '</code>', '<a target="_blank" href="/wp-admin/admin.php?page=wc-status&tab=logs">Logs</a>'),
+			],
+			// Update tokens if enabled
+			'tokenize'       => [
+				'title'       => __('Update tokens', 'paytrail-for-woocommerce'),
+				'type'        => 'checkbox',
+				'label'       => __('Enable token update', 'paytrail-for-woocommerce'),
+				'default'     => 'no',
+				// translators: %s: URL
+				'description' => __('Choose this to update card information (tokens) from the old Checkout Finland for WooCommerce -plugin. The update is done upon saving settings. This will also update tokens for the current WooCommerce Subscriptions orders, if that module is in use. </br> <b>CAUTION:</b> This action cannot be reverted.', 'paytrail-for-woocommerce'),
+			],
 		];
 	}
 
@@ -333,6 +427,39 @@ public function process_admin_options() {
 		return $saved;
 	}
 
+	/**
+	 * Display a notice when test mode is enabled.
+	 */
+	public function display_test_mode_notice() {
+		// Check if test mode is enabled
+		$test_mode_enabled = $this->get_option('enable_test_mode', 'no') === 'yes';
+
+		// Check if the notice should be displayed
+		if ($test_mode_enabled) {
+			?>
+			<div class="notice notice-warning">
+				<p>
+				<?php
+					esc_html_e('Paytrail for WooCommerce test mode is enabled. Please disable it to insert your Merchant ID and secret key.', 'paytrail-for-woocommerce');
+					echo ' ' . sprintf(
+						/* translators: If you have not registered yet, you can do so on our website %s to get your credentials! */
+						esc_html__('</br>If you have not registered yet, you can do so on our website %s to get your credentials!', 'paytrail-for-woocommerce'),
+						'<a href="https://www.paytrail.com/en/get-started" target="_blank">' . esc_html__('here', 'paytrail-for-woocommerce') . '</a>'
+					);	
+				?>
+				</p>
+			</div>
+			<?php
+		}
+	}
+
+	/**
+	 * Callback to display the notice on the admin page.
+	 */
+	public function admin_notices() {
+		$this->display_test_mode_notice();
+	}
+
 	/**
 	 * Receipt page to redirect user forward.
 	 *
@@ -1967,7 +2094,7 @@ public function handle_custom_searches( $query, $query_vars) {
 	}
 
 	/**
-	 * Register payment fields scripts
+	 * Register scripts
 	 *
 	 * @return void
 	 */
@@ -1986,8 +2113,18 @@ protected function register_scripts() {
 		);
 	}
 
+	public function enqueue_admin_scripts() {
+		$screen = get_current_screen();
+	
+		// Check if the current screen is the WooCommerce settings page
+		if ($screen && 'woocommerce_page_wc-settings' === $screen->id) {
+			// Enqueue the introScripts only on the WooCommerce settings page
+			wp_enqueue_script('introScripts');
+		}
+	}
+
 	/**
-	 * Register payment fields styles
+	 * Register styles
 	 *
 	 * @return void
 	 */
@@ -2004,6 +2141,23 @@ protected function register_styles() {
 			[],
 			$plugin_version
 		);
+
+		wp_register_style(
+			'introStyles',
+			$plugin_dir_url . 'assets/dist/main.css',
+			[],
+			$plugin_version
+		);
+	}
+
+	public function enqueue_admin_styles() {
+		$screen = get_current_screen();
+		
+		// Check if the current screen is the WooCommerce settings page
+		if ($screen && 'woocommerce_page_wc-settings' === $screen->id) {
+			// Enqueue the style 'paytrail-woocommerce-payment-fields'
+			wp_enqueue_style('introStyles');
+		}
 	}
 
 	/**
diff --git a/src/View/Intro-form.php b/src/View/Intro-form.php
new file mode 100644
index 00000000..8eec124f
--- /dev/null
+++ b/src/View/Intro-form.php
@@ -0,0 +1,59 @@
+<div id="paytrail-overlay-container">
+	<div class="paytrail-intro-container">
+		<div class="paytrail-intro-header">
+			<div style="padding:25px;">
+				<div class="paytrail-intro-logo-container">
+					<img style="max-width:100px" src="https://www.paytrail.com/hubfs/images/Banners_and_logos/logo-white.svg"/>
+				</div>
+				<div class="paytrail-intro-title-container">
+					<h2><?php /* translators: Get started with Paytrail */ esc_html_e('Get started with Paytrail', 'paytrail-for-woocommerce'); ?></h2>
+					<p><?php /* translators: To start accepting payments with Paytrail, you need an account. */ esc_html_e('To start accepting payments with Paytrail, you need an account.', 'paytrail-for-woocommerce'); ?></p>
+				</div>
+			</div>
+		</div>
+		<div style="width:calc(50% - 2px);background-color:#fff;;border:1px solid #D92D83;">
+			<div style="padding:25px 90px;text-align:center;">
+				<h3 style="font-size:20px;"><?php /* translators: I need an account */ esc_html_e('I need an account', 'paytrail-for-woocommerce'); ?></h3>
+				<p style="font-size:15px;line-height:1.2;"><?php esc_html_e('You can start our fast on-boarding process by clicking the register button', 'paytrail-for-woocommerce'); ?></p>
+				<button class="modern-button" id="open-lightbox"><?php esc_html_e('Register now', 'paytrail-for-woocommerce'); ?></button>
+				<?php
+				$sales_link = 'https://www.paytrail.com/en/contact-us';
+				?>
+				<p style="font-size:15px;">
+					<?php /* translators: Or <a href="%s" target="_blank">contact sales</a> */ echo sprintf(__('Or <a href="%s" target="_blank">contact sales</a>'), esc_html($sales_link)); ?>
+				</p>
+			</div>
+		</div>
+		<div style="width:calc(50% - 2px);background-color:#F3C0D9;border:1px solid #D92D83;align-items:center;display:flex;">
+			<div style="padding:25px 90px;text-align:center;">
+				<h3 style="font-size:20px;"><?php /* translators: I already have an account */ esc_html_e('I already have an account', 'paytrail-for-woocommerce'); ?></h3>
+				<button class="modern-button" id="credentials"><?php esc_html_e('Add credentials', 'paytrail-for-woocommerce'); ?></button>
+				<?php
+				$merchant_link = 'https://merchant.paytrail.com/';
+				?>
+				<p style="font-size:15px;">
+					<?php /* translators: Credentials can be found in the <a href="%s" target="_blank">merchant panel</a> */ echo sprintf(__('Credentials can be found in the <a href="%s" target="_blank">merchant panel</a>'), esc_html($merchant_link)); ?>
+				</p>
+			</div>
+		</div>
+		<div classs="paytrail-intro-support" style="display:flex;align-items: center;justify-content:center;width:100%;background-color:#D92D83;">
+			<?php
+			$customer_service_link = 'https://www.paytrail.com/en/customer-service#merchants/';
+			?>
+			<h2 style="font-weight:300;color:#fff;">
+				<?php /* translators: <b>Need help?</b> Dont hesitate to <a href="%s" target="_blank" style="color:#fff;">contact support!</a> */ echo sprintf(__('<b>Need help?</b> Dont hesitate to <a href="%s" target="_blank" style="color:#fff;">contact support!</a>'), esc_html($customer_service_link)); ?>
+			</h2>
+		</div>
+		<div classs="paytrail-intro-footer" style="display:flex;align-items: center;justify-content:center;padding-top:25px;padding-bottom:25px;width:calc(100% - 2px);background-color:#fff;;border:1px solid #D92D83;">
+			<div style="display:inline-block;width:24%;text-align:center;font-size:0px;">
+				<p style="font-weight:bold;font-size:15px;margin-bottom:0px;margin-top:0px;"><?php esc_html_e('I just want to try it', 'paytrail-for-woocommerce'); ?></p>
+			</div>
+			<div style="display:inline-block;width:50%;font-size:0px;">
+				<p style="font-size:14px;"><?php esc_html_e('Activate the test mode and try out the test credentials for various payment methods from our API documentation', 'paytrail-for-woocommerce'); ?></p>
+			</div>
+			<div style="display:inline-block;width:25%;font-size:0px;text-align:center">
+				<button class="modern-button gray" id="test-mode-button"><?php esc_html_e('Test mode', 'paytrail-for-woocommerce'); ?></button>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/View/User-data-form.php b/src/View/User-data-form.php
new file mode 100644
index 00000000..42fea4f2
--- /dev/null
+++ b/src/View/User-data-form.php
@@ -0,0 +1,51 @@
+<div class="wrap" style="display:none">
+	<div class="paytrail-registration-container">
+		<form id="user-data-form" method="get" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
+			<p><?php esc_html_e('To begin the Paytrail registration process, please review the following information', 'paytrail-for-woocommerce'); ?></p>
+			<div class="form-columns">
+				<div class="form-column">
+					<div class="form-group">
+						<label for="firstname"><?php esc_html_e('First Name:', 'paytrail-for-woocommerce'); ?>:</label>
+						<input type="text" name="firstname" id="firstname" value="<?php echo esc_attr($first_name); ?>" placeholder="First Name">
+					</div>
+					<div class="form-group">
+						<label for="lastname"><?php esc_html_e('Last Name:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="lastname" id="lastname" value="<?php echo esc_attr($last_name); ?>" placeholder="Last Name">
+					</div>
+					<div class="form-group">
+						<label for="email"><?php esc_html_e('Email:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="email" id="email" value="<?php echo esc_attr($user_email); ?>" placeholder="Email">
+					</div>
+					<div class="form-group">
+						<label for="puhelinnumero"><?php esc_html_e('Phone:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="puhelinnumero" id="puhelinnumero" value="<?php echo esc_attr($phone_number); ?>" placeholder="Phone number">
+					</div>
+				</div>
+				<div class="form-column">
+					<div class="form-group">
+						<label for="verkkokaupan_www_osoite"><?php esc_html_e('Site URL:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="verkkokaupan_www_osoite" id="verkkokaupan_www_osoite" value="<?php echo esc_attr($site_url); ?>" placeholder="Site URL">
+					</div>
+					<div class="form-group">
+						<label for="company"><?php esc_html_e('Company Name:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="company" id="company" value="<?php echo esc_attr($company_name); ?>" placeholder="Company Name">
+					</div>
+					<div class="form-group">
+						<label for="address"><?php esc_html_e('Shop Address:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="address" id="address" value="<?php echo esc_attr($shop_address); ?>" placeholder="Shop Address">
+					</div>
+					<div class="form-group">
+						<label for="city"><?php esc_html_e('Shop City:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="city" id="city" value="<?php echo esc_attr($shop_city); ?>" placeholder="Shop City">
+					</div>
+					<div class="form-group">
+						<label for="postinumero"><?php esc_html_e('Shop Postcode:', 'paytrail-for-woocommerce'); ?></label>
+						<input type="text" name="postinumero" id="postinumero" value="<?php echo esc_attr($shop_postcode); ?>" placeholder="Shop Postcode">
+					</div>
+				</div>
+			</div>
+			<input type="submit" style=" background-color: #D92D83;color: #fff;border:none;padding:5px 15px;border-radius:10px;font-size:14px;;margin-right: 8px;text-transform:uppercase;font-weight: bold;" class="button-primary" value="Submit">
+		</form>
+		<button id="close-lightbox"><?php esc_html_e('Close', 'paytrail-for-woocommerce'); ?></button>
+	</div>
+</div>
diff --git a/webpack.config.js b/webpack.config.js
index 6252d087..c8a2ded9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,5 @@
 const webpack           = require( 'webpack' );
-const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path              = require( 'path' ); // This resolves into the absolute path of the theme root.
 const env               = process.env.NODE_ENV;
 
@@ -27,8 +27,10 @@ const sassLoader = {
 
 const config = {
     entry: {
-        main: './assets/js/main.js'
+        main: './assets/js/main.js',
+        introScripts: './assets/js/paytrail-intro-scripts.js'  // Add this line for your new file
     },
+    
     output: {
         path: path.resolve( './assets/dist' ),
         filename: '[name].js',
@@ -43,15 +45,15 @@ const config = {
     },
     plugins: [
 
-        // Extract all css into one file.
-        new ExtractTextPlugin( '[name].css', {
-            allChunks: true
-        }),
-
         // Provide jQuery instance for all modules.
         new webpack.ProvidePlugin({
             jQuery: 'jquery'
-        })
+        }),
+
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css',
+          }),
     ],
     module: {
         rules: [
@@ -83,18 +85,23 @@ const config = {
             },
             {
                 test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: [ cssLoader, postCss ]
-                })
+                use: [
+                MiniCssExtractPlugin.loader,
+                'css-loader',
+                'postcss-loader',
+                ],
             },
             {
                 test: /\.scss$/,
                 include: [
-                    path.resolve( __dirname, 'assets/scss' )
+                    path.resolve(__dirname, 'assets/scss'),
+                ],
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'postcss-loader',
+                    'sass-loader',
                 ],
-                use: ExtractTextPlugin.extract({
-                    use: [ cssLoader, postCss, sassLoader ]
-                })
             },
             {
                 test: /\.(woff(2)?|eot|ttf|otf)(\?[a-z0-9=\.]+)?$/,