diff --git a/example-1/script.js b/example-1/script.js index e8ef1fe..451252c 100644 --- a/example-1/script.js +++ b/example-1/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-1/styles.css b/example-1/styles.css index b2fe9dc..1f37c3b 100644 --- a/example-1/styles.css +++ b/example-1/styles.css @@ -2,7 +2,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; - background: #e6f1ff; + background: #eef; } .wrapper { @@ -24,15 +24,15 @@ label { opacity: 0.6; font-size: 18px; padding-bottom: 7px; - padding-top: 13px; + padding-top: 5px; font-weight: 500; display: block; } .mollie-component { background: #fff; - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), - 0px 4px 8px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 13px; border: 1px solid transparent; @@ -41,7 +41,7 @@ label { } .mollie-component.has-focus { - border-color: #0077ff; + border-color: #07f; transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1); } @@ -50,22 +50,30 @@ label { transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1); } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #f11; + margin-top: 10px; + border-radius: 4px; +} + .field-error { font-size: 12px; margin-top: 2px; - color: #ff1717; + color: #f11; font-weight: 400; } button.submit-button { width: 100%; border: 0; - background: #0077ff; - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), - 0px 4px 8px rgba(0, 0, 0, 0.05); + background: #07f; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 14px; - color: #ffffff; + color: #fff; font-weight: 600; font-size: 18px; opacity: 0.9; @@ -85,6 +93,7 @@ button.submit-button:hover { .form-group { width: 100%; + min-height: 100px; } .form-group--expiry-date { diff --git a/example-2/script.js b/example-2/script.js index e8ef1fe..451252c 100644 --- a/example-2/script.js +++ b/example-2/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-2/styles.css b/example-2/styles.css index 04f95b2..ac3a647 100644 --- a/example-2/styles.css +++ b/example-2/styles.css @@ -2,7 +2,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; - background: #000000; + background: #000; color: #fff; } @@ -13,10 +13,6 @@ body { max-width: 718px; } -input { - color: #fff; -} - .wrapper form { width: 100%; } @@ -25,7 +21,7 @@ label { opacity: 0.6; font-size: 16px; font-weight: 400; - color: #ffffff; + color: #fff; padding-bottom: 7px; display: block; } @@ -39,7 +35,7 @@ label { } .mollie-component.has-focus { - border-color: rgba(255,255,255,0.5); + border-color: rgba(255, 255, 255, 0.5); } .mollie-component.is-invalid { @@ -50,10 +46,17 @@ label { border-color: rgba(140, 252, 136, 0.5); } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #ff5555; + margin-top: 10px; +} + .field-error { font-size: 12px; margin-top: 2px; - color: #ff5555; + color: #f55; font-weight: 500; } @@ -61,7 +64,7 @@ button.submit-button { width: 100%; border: 0; border-radius: 0; - background: #fedd00; + background: #fd0; padding: 14px; color: #000; font-weight: 600; @@ -69,7 +72,6 @@ button.submit-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; outline: 0; - cursor: pointer; transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1); } @@ -84,11 +86,11 @@ button.submit-button:hover { .row { display: flex; width: 100%; - margin-bottom: 20px; + margin-bottom: 10px; } .row:last-child { - margin-bottom: 0px; + margin-bottom: 0; } .form-group:first-child { @@ -103,6 +105,7 @@ button.submit-button:hover { width: 100%; margin: 0 8px; flex: 1 1 20%; + min-height: 85px; } .form-group--card-holder { diff --git a/example-3/script.js b/example-3/script.js index e8ef1fe..5975059 100644 --- a/example-3/script.js +++ b/example-3/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,13 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); + return; } diff --git a/example-3/styles.css b/example-3/styles.css index bd3824e..cd3cfb8 100644 --- a/example-3/styles.css +++ b/example-3/styles.css @@ -13,10 +13,6 @@ body { max-width: 718px; } -input { - color: #fff; -} - .wrapper form { width: 100%; } @@ -31,7 +27,7 @@ label { } .mollie-component { - background: #dfedfa; + background: #def; border-radius: 56px; padding: 12px 24px; border: 1px solid transparent; @@ -40,7 +36,7 @@ label { } .mollie-component.has-focus { - border-color: #8799af; + border-color: #89a; } .mollie-component.is-invalid { @@ -49,13 +45,21 @@ label { } .mollie-component.is-valid { - border-color: #dfedfa; + border-color: #def; +} + +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #f11; + margin-top: 10px; + border-radius: 100px; } .field-error { font-size: 10px; margin-top: 4px; - color: #ce0000; + color: #c00; font-weight: normal; padding-left: 24px; } @@ -64,7 +68,7 @@ button.submit-button { width: 100%; border: 0; border-radius: 100px; - background: #173d68; + background: #036; padding: 18px; color: #fff; font-weight: 600; @@ -72,7 +76,6 @@ button.submit-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; outline: 0; - cursor: pointer; transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1); } @@ -82,11 +85,11 @@ button.submit-button:hover { .form-group { width: 100%; - margin: 14px 0 0 0; flex: 1 1 20%; display: flex; width: 100%; align-items: center; + min-height: 70px; } .form-group.button { diff --git a/example-4/index.html b/example-4/index.html index 0d09f38..4f9ca0b 100644 --- a/example-4/index.html +++ b/example-4/index.html @@ -15,6 +15,8 @@
+ +
@@ -111,7 +113,6 @@ -
diff --git a/example-4/script.js b/example-4/script.js index 9f9a892..2440a69 100644 --- a/example-4/script.js +++ b/example-4/script.js @@ -132,9 +132,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-4/styles.css b/example-4/styles.css index 8218aff..0d159ba 100644 --- a/example-4/styles.css +++ b/example-4/styles.css @@ -95,19 +95,28 @@ input:focus ~ label, bottom: -1px; width: 0%; left: 0; - border-bottom: 1px solid #ce0000; + border-bottom: 1px solid #c00; } .mollie-component.is-invalid::after { width: 100%; } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #c00; + color: #c00; + font-size: 13px; + margin-bottom: 10px; +} + .form-group.is-touched.is-valid .field-error { padding: 0; } .form-group.is-touched .field-error { - color: #ce0000; + color: #c00; font-weight: 400; padding: 1px 0; font-size: 10px; diff --git a/example-5/script.js b/example-5/script.js index df80171..799cf37 100644 --- a/example-5/script.js +++ b/example-5/script.js @@ -129,9 +129,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-5/styles.css b/example-5/styles.css index 212b02f..c1ffb45 100644 --- a/example-5/styles.css +++ b/example-5/styles.css @@ -71,12 +71,12 @@ body { .mollie-component.is-invalid::before { opacity: 1; - background-color: #ff1717; + background-color: #f11; } .mollie-component.is-valid::before { opacity: 1; - background-color: #4ddd9e; + background-color: #5d9; } .mollie-component.is-dirty::before, @@ -97,6 +97,32 @@ body { border-radius: 0 0 8px 0; } +#form-error.has-error { + margin-top: 4px; + background-color: #f9e1e1; + padding: 5px; + color: #ff1717; + font-size: 13px; + margin-bottom: 10px; + position: absolute; + max-width: 75vw; + left: 50%; + transform: translateX(-50%); + border-radius: 8px; +} + +#form-error.has-error::before { + position: absolute; + top: -8px; + left: 8px; + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #f9e1e1; +} + .form-group.is-touched.is-valid .field-error { padding: 0; } @@ -115,7 +141,7 @@ button.submit-button { background: #4a3eee; border-radius: 8px; padding: 14px; - color: #ffffff; + color: #fff; font-weight: 600; font-size: 18px; opacity: 0.9;