straumur-web-component 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +254 -81
- package/dist/index.d.cts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.mjs +246 -70
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/straumur-checkout.tsx
|
|
2
|
-
import { h as
|
|
2
|
+
import { h as h31, render } from "preact";
|
|
3
3
|
import "@adyen/adyen-web/styles/adyen.css";
|
|
4
4
|
|
|
5
5
|
// #style-inject:#style-inject
|
|
@@ -31,7 +31,7 @@ styleInject(':root {\n --straumur__color-primary: #002649;\n --straumur__color
|
|
|
31
31
|
var getEnv = () => {
|
|
32
32
|
return {
|
|
33
33
|
STAGING_BASE_URL: "https://checkout-api.staging.straumur.is/api/v1/embeddedcheckout",
|
|
34
|
-
PRODUCTION_BASE_URL: "",
|
|
34
|
+
PRODUCTION_BASE_URL: "https://greidslugatt.straumur.is/api/v1/embeddedcheckout",
|
|
35
35
|
GET_PAYMENT_METHODS_URL: "payment-methods",
|
|
36
36
|
POST_PAYMENT_URL: "payment",
|
|
37
37
|
POST_DETAILS_URL: "details",
|
|
@@ -119,7 +119,7 @@ async function setupPaymentMethods(environment, sessionId) {
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
// src/features/straumur-checkout-container.tsx
|
|
122
|
-
import { h as
|
|
122
|
+
import { h as h30 } from "preact";
|
|
123
123
|
|
|
124
124
|
// src/features/card/card-component.tsx
|
|
125
125
|
import { Fragment as Fragment2, h as h16 } from "preact";
|
|
@@ -222,7 +222,8 @@ var translations = {
|
|
|
222
222
|
"cards.securityCode3DigitsInfo": "3-digit on the back of the card",
|
|
223
223
|
"cards.securityCode4DigitsInfo": "4-digit on the back of the card",
|
|
224
224
|
"cards.storePaymentMethod": "Store payment information",
|
|
225
|
-
"
|
|
225
|
+
"googlePay.title": "Google Pay",
|
|
226
|
+
"applePay.title": "Apple Pay",
|
|
226
227
|
"stored-cards.expiryDate": "Expiry date",
|
|
227
228
|
"stored-cards.securityCode3Digits": "Security code",
|
|
228
229
|
"stored-cards.securityCode3DigitsOptional": "Security code (optional)",
|
|
@@ -242,6 +243,7 @@ var translations = {
|
|
|
242
243
|
"error.failedToSubmitPaymentDetails": "Failed to submit payment details",
|
|
243
244
|
"error.paymentDetailsFailed": "Payment details failed",
|
|
244
245
|
"error.googlePayNotAvailable": "Google Pay not available",
|
|
246
|
+
"error.applePayNotAvailable": "Apple Pay not available",
|
|
245
247
|
"error.failedToSubmitRemoveStoredPaymentCard": "Failed to remove stored payment card",
|
|
246
248
|
"error.failedToRemoveStoredPaymentCard": "Stored payment card was not removed"
|
|
247
249
|
},
|
|
@@ -254,7 +256,8 @@ var translations = {
|
|
|
254
256
|
"cards.securityCode3DigitsInfo": "3 t\xF6lustafir aftan \xE1 kortinu",
|
|
255
257
|
"cards.securityCode4DigitsInfo": "4 t\xF6lustafir aftan \xE1 kortinu",
|
|
256
258
|
"cards.storePaymentMethod": "Vista grei\xF0sluuppl\xFDsingar",
|
|
257
|
-
"
|
|
259
|
+
"googlePay.title": "Google Pay",
|
|
260
|
+
"applePay.title": "Apple Pay",
|
|
258
261
|
"stored-cards.expiryDate": "Gildisdagur",
|
|
259
262
|
"stored-cards.securityCode3Digits": "\xD6ryggisk\xF3\xF0i",
|
|
260
263
|
"stored-cards.securityCode3DigitsOptional": "\xD6ryggisk\xF3\xF0i (valkv\xE6tt)",
|
|
@@ -274,6 +277,7 @@ var translations = {
|
|
|
274
277
|
"error.failedToSubmitPaymentDetails": "Mist\xF3kst a\xF0 senda grei\xF0sluuppl\xFDsingar",
|
|
275
278
|
"error.paymentDetailsFailed": "Mist\xF3kst a\xF0 s\xE6kja grei\xF0sluuppl\xFDsingar",
|
|
276
279
|
"error.googlePayNotAvailable": "Google Pay ekki \xED bo\xF0i",
|
|
280
|
+
"error.applePayNotAvailable": "Apple Pay ekki \xED bo\xF0i",
|
|
277
281
|
"error.failedToSubmitRemoveStoredPaymentCard": "Mist\xF3kst a\xF0 fjarl\xE6gja geymdan grei\xF0slum\xE1ta",
|
|
278
282
|
"error.failedToRemoveStoredPaymentCard": "Geymdur grei\xF0slum\xE1ti var ekki fjarl\xE6g\xF0ur"
|
|
279
283
|
}
|
|
@@ -1173,7 +1177,7 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1173
1177
|
/* @__PURE__ */ h16("div", { className: "straumur__card-component__form--field-wrapper" }, /* @__PURE__ */ h16("div", { className: "straumur__card-component__form--wrapper" }, /* @__PURE__ */ h16(
|
|
1174
1178
|
"label",
|
|
1175
1179
|
{
|
|
1176
|
-
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "
|
|
1180
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1177
1181
|
},
|
|
1178
1182
|
i18n(configuration.locale, "cards.expiryDate")
|
|
1179
1183
|
), /* @__PURE__ */ h16(
|
|
@@ -1234,7 +1238,7 @@ import { h as h18 } from "preact";
|
|
|
1234
1238
|
import { useEffect as useEffect3, useRef as useRef4 } from "preact/hooks";
|
|
1235
1239
|
|
|
1236
1240
|
// src/features/google-pay/google-pay-component.css
|
|
1237
|
-
styleInject('.straumur__google-pay-component {\n position: relative;\n cursor: pointer;\n background: white;\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__google-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__google-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__google-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__google-pay-component__content:hover .straumur__google-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__google-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__google-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__google-pay-component__expandable {\n background: white;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__google-pay-component__radio-selector:checked ~ .straumur__google-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__google-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1241
|
+
styleInject('.straumur__google-pay-component {\n position: relative;\n cursor: pointer;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__google-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__google-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__google-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__google-pay-component__content:hover .straumur__google-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__google-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__google-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__google-pay-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__google-pay-component__radio-selector:checked ~ .straumur__google-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__google-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1238
1242
|
|
|
1239
1243
|
// src/features/google-pay/google-pay-component.tsx
|
|
1240
1244
|
import {
|
|
@@ -1437,42 +1441,214 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1437
1441
|
checked: activePaymentMethod === "googlepay",
|
|
1438
1442
|
onChange: handleBoxChange
|
|
1439
1443
|
}
|
|
1440
|
-
), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component__content" }, /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--circle" }), /* @__PURE__ */ h18(googlepay_default, null), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--text" }, i18n(configuration.locale, "
|
|
1444
|
+
), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component__content" }, /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--circle" }), /* @__PURE__ */ h18(googlepay_default, null), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--text" }, i18n(configuration.locale, "googlePay.title"))), /* @__PURE__ */ h18("div", { className: "straumur__google-pay-component__expandable" }, /* @__PURE__ */ h18("div", { ref: googlePayElementRef })));
|
|
1441
1445
|
}
|
|
1442
1446
|
var google_pay_component_default = GooglePayComponent;
|
|
1443
1447
|
|
|
1448
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1449
|
+
import { h as h20 } from "preact";
|
|
1450
|
+
import { useEffect as useEffect4, useRef as useRef5 } from "preact/hooks";
|
|
1451
|
+
|
|
1452
|
+
// src/features/apple-pay/apple-pay-component.css
|
|
1453
|
+
styleInject('.straumur__apple-pay-component {\n position: relative;\n cursor: pointer;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__apple-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__apple-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__apple-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__apple-pay-component__content:hover .straumur__apple-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__apple-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content .straumur__apple-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content .straumur__apple-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__apple-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__apple-pay-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__apple-pay-component__radio-selector:checked ~ .straumur__apple-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__apple-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1454
|
+
|
|
1455
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1456
|
+
import {
|
|
1457
|
+
AdyenCheckout as AdyenCheckout3,
|
|
1458
|
+
ApplePay
|
|
1459
|
+
} from "@adyen/adyen-web";
|
|
1460
|
+
|
|
1461
|
+
// src/assets/icons/applepay.tsx
|
|
1462
|
+
import { h as h19 } from "preact";
|
|
1463
|
+
var ApplePayIcon = () => /* @__PURE__ */ h19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "26", fill: "none", viewBox: "0 0 40 26" }, /* @__PURE__ */ h19(
|
|
1464
|
+
"path",
|
|
1465
|
+
{
|
|
1466
|
+
fill: "#000",
|
|
1467
|
+
d: "M36.42 0H3.58a69.25 69.25 0 0 0-.75 0c-.25.01-.5.03-.76.07a2.51 2.51 0 0 0-1.32.7A2.43 2.43 0 0 0 .07 2.1 5.14 5.14 0 0 0 0 3.22v19.91c.01.25.03.51.07.76a2.6 2.6 0 0 0 .68 1.35 2.39 2.39 0 0 0 1.32.69 4.98 4.98 0 0 0 1.1.07h34a5 5 0 0 0 .76-.07 2.5 2.5 0 0 0 1.32-.7 2.44 2.44 0 0 0 .68-1.34 5.13 5.13 0 0 0 .07-1.11V2.87a6.5 6.5 0 0 0-.07-.76 2.58 2.58 0 0 0-.68-1.35 2.4 2.4 0 0 0-1.32-.69 4.96 4.96 0 0 0-1.1-.07h-.41Z"
|
|
1468
|
+
}
|
|
1469
|
+
), /* @__PURE__ */ h19(
|
|
1470
|
+
"path",
|
|
1471
|
+
{
|
|
1472
|
+
fill: "#fff",
|
|
1473
|
+
d: "M36.42.87h.73c.2 0 .42.02.62.06a1.67 1.67 0 0 1 .88.44 1.58 1.58 0 0 1 .44.89 4.38 4.38 0 0 1 .06.97v19.55a14.67 14.67 0 0 1-.06.96 1.7 1.7 0 0 1-.44.89 1.54 1.54 0 0 1-.87.44 4.27 4.27 0 0 1-.96.06H2.85a3.7 3.7 0 0 1-.63-.06 1.66 1.66 0 0 1-.87-.45 1.56 1.56 0 0 1-.44-.88 4.35 4.35 0 0 1-.06-.97V2.9c.01-.2.02-.42.06-.63.03-.18.08-.34.16-.49A1.56 1.56 0 0 1 2.22.93a4.2 4.2 0 0 1 .96-.06h33.24"
|
|
1474
|
+
}
|
|
1475
|
+
), /* @__PURE__ */ h19(
|
|
1476
|
+
"path",
|
|
1477
|
+
{
|
|
1478
|
+
fill: "#000",
|
|
1479
|
+
d: "M10.92 8.61c.34-.43.57-1 .51-1.59a2.21 2.21 0 0 0-1.99 2.3c.56.04 1.12-.3 1.48-.7Zm.51.81c-.82-.05-1.52.46-1.9.46-.4 0-1-.43-1.64-.42-.84 0-1.62.48-2.05 1.24-.88 1.52-.23 3.76.62 5 .42.6.92 1.27 1.58 1.25.62-.02.86-.4 1.62-.4.75 0 .97.4 1.63.39.69-.01 1.11-.61 1.53-1.22.47-.7.67-1.37.68-1.4-.01-.02-1.32-.52-1.33-2.02-.01-1.26 1.03-1.85 1.07-1.9a2.34 2.34 0 0 0-1.81-.98Zm7.11-1.7a2.87 2.87 0 0 1 3.02 3c0 1.8-1.27 3.03-3.06 3.03h-1.97v3.12h-1.42V7.72h3.43Zm-2 4.83h1.62c1.24 0 1.94-.66 1.94-1.82 0-1.15-.7-1.81-1.93-1.81h-1.64v3.63Zm5.39 2.43c0-1.17.9-1.89 2.48-1.98l1.83-.1v-.52c0-.74-.5-1.18-1.34-1.18-.8 0-1.3.38-1.41.97h-1.3c.08-1.2 1.1-2.09 2.76-2.09 1.62 0 2.65.86 2.65 2.2v4.6h-1.31v-1.1h-.04a2.38 2.38 0 0 1-2.1 1.2c-1.3 0-2.22-.8-2.22-2Zm4.3-.6v-.53l-1.64.1c-.82.06-1.28.42-1.28.99 0 .58.48.96 1.22.96.96 0 1.7-.66 1.7-1.52Zm2.61 4.95v-1.11c.1.03.33.03.44.03.64 0 .98-.27 1.19-.96l.12-.4-2.41-6.69h1.48l1.7 5.43h.02l1.69-5.43h1.44l-2.5 7.02c-.57 1.62-1.23 2.14-2.61 2.14a5.3 5.3 0 0 1-.56-.03Z"
|
|
1480
|
+
}
|
|
1481
|
+
));
|
|
1482
|
+
var applepay_default = ApplePayIcon;
|
|
1483
|
+
|
|
1484
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1485
|
+
function ApplePayComponent({ configuration, paymentMethods }) {
|
|
1486
|
+
const applePayElementRef = useRef5(null);
|
|
1487
|
+
const adyenCardRef = useRef5();
|
|
1488
|
+
const applePayRef = useRef5();
|
|
1489
|
+
const {
|
|
1490
|
+
activePaymentMethod,
|
|
1491
|
+
setActivePaymentMethod,
|
|
1492
|
+
isPaymentMethodInitialized,
|
|
1493
|
+
updatePaymentMethodInitialization,
|
|
1494
|
+
threeDSecureRef,
|
|
1495
|
+
handleSuccess,
|
|
1496
|
+
handleError,
|
|
1497
|
+
setThreeDSecureActive
|
|
1498
|
+
} = usePaymentMethodGroup();
|
|
1499
|
+
const initializeAdyenComponent = async () => {
|
|
1500
|
+
adyenCardRef.current = await AdyenCheckout3({
|
|
1501
|
+
clientKey: paymentMethods.clientKey,
|
|
1502
|
+
locale: paymentMethods.locale,
|
|
1503
|
+
environment: configuration.environment,
|
|
1504
|
+
countryCode: "IS",
|
|
1505
|
+
onError: handleOnError,
|
|
1506
|
+
onSubmit: handleOnSubmit,
|
|
1507
|
+
onAdditionalDetails: handleOnSubmitAdditionalData,
|
|
1508
|
+
onPaymentCompleted: configuration.onPaymentCompleted,
|
|
1509
|
+
onPaymentFailed: configuration.onPaymentFailed
|
|
1510
|
+
});
|
|
1511
|
+
const gpayConfig = paymentMethods.paymentMethods.paymentMethods.find((x) => x.type === "applepay").configuration;
|
|
1512
|
+
const applePayConfiguration = {
|
|
1513
|
+
amount: {
|
|
1514
|
+
value: paymentMethods.minorUnitsAmount,
|
|
1515
|
+
currency: paymentMethods.currency
|
|
1516
|
+
},
|
|
1517
|
+
environment: configuration.environment,
|
|
1518
|
+
configuration: {
|
|
1519
|
+
...gpayConfig,
|
|
1520
|
+
merchantName: paymentMethods.merchantName
|
|
1521
|
+
}
|
|
1522
|
+
};
|
|
1523
|
+
applePayRef.current = new ApplePay(adyenCardRef.current, applePayConfiguration);
|
|
1524
|
+
applePayRef.current.isAvailable().then(() => {
|
|
1525
|
+
applePayRef.current.mount(applePayElementRef.current);
|
|
1526
|
+
updatePaymentMethodInitialization("applepay", true);
|
|
1527
|
+
}).catch((e) => {
|
|
1528
|
+
console.log(e);
|
|
1529
|
+
handleError("error.applePayNotAvailable");
|
|
1530
|
+
});
|
|
1531
|
+
};
|
|
1532
|
+
useEffect4(() => {
|
|
1533
|
+
if (activePaymentMethod === "applepay" && !isPaymentMethodInitialized.applepay) {
|
|
1534
|
+
initializeAdyenComponent();
|
|
1535
|
+
}
|
|
1536
|
+
}, [configuration, activePaymentMethod]);
|
|
1537
|
+
useEffect4(() => {
|
|
1538
|
+
if (applePayRef.current && isPaymentMethodInitialized.applepay) {
|
|
1539
|
+
initializeAdyenComponent();
|
|
1540
|
+
}
|
|
1541
|
+
}, [configuration]);
|
|
1542
|
+
const handleBoxChange = () => {
|
|
1543
|
+
setActivePaymentMethod("applepay");
|
|
1544
|
+
};
|
|
1545
|
+
function handleOnError(_, __) {
|
|
1546
|
+
handleError("error.unknownError");
|
|
1547
|
+
}
|
|
1548
|
+
async function handleOnSubmit(state, _, actions) {
|
|
1549
|
+
const data = {
|
|
1550
|
+
...state.data,
|
|
1551
|
+
origin: window.location.origin,
|
|
1552
|
+
sessionId: configuration.sessionId
|
|
1553
|
+
};
|
|
1554
|
+
const fetchResponse = await createPaymentRequest(configuration.environment, data);
|
|
1555
|
+
if (!fetchResponse.ok) {
|
|
1556
|
+
actions.reject();
|
|
1557
|
+
handleError("error.failedToSubmitPayment");
|
|
1558
|
+
return;
|
|
1559
|
+
}
|
|
1560
|
+
const response = await fetchResponse.json();
|
|
1561
|
+
if (!response.resultCode) {
|
|
1562
|
+
actions.reject();
|
|
1563
|
+
handleError("error.paymentFailed");
|
|
1564
|
+
return;
|
|
1565
|
+
}
|
|
1566
|
+
const { resultCode, action } = response;
|
|
1567
|
+
if (resultCode === "RedirectShopper" || resultCode === "IdentifyShopper") {
|
|
1568
|
+
setThreeDSecureActive(true);
|
|
1569
|
+
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef?.current);
|
|
1570
|
+
return;
|
|
1571
|
+
}
|
|
1572
|
+
actions.resolve({ resultCode, action });
|
|
1573
|
+
if (resultCode === "Authorised") {
|
|
1574
|
+
handleSuccess("success.paymentAuthorized");
|
|
1575
|
+
} else {
|
|
1576
|
+
handleError("error.paymentUnsuccessful");
|
|
1577
|
+
}
|
|
1578
|
+
}
|
|
1579
|
+
async function handleOnSubmitAdditionalData(state, _, actions) {
|
|
1580
|
+
const data = {
|
|
1581
|
+
...state.data,
|
|
1582
|
+
sessionId: configuration.sessionId
|
|
1583
|
+
};
|
|
1584
|
+
const fetchResponse = await createDetailsRequest(configuration.environment, data);
|
|
1585
|
+
if (!fetchResponse.ok) {
|
|
1586
|
+
actions.reject();
|
|
1587
|
+
handleError("error.failedToSubmitPaymentDetails");
|
|
1588
|
+
return;
|
|
1589
|
+
}
|
|
1590
|
+
const response = await fetchResponse.json();
|
|
1591
|
+
if (!response.resultCode) {
|
|
1592
|
+
actions.reject();
|
|
1593
|
+
handleError("error.paymentDetailsFailed");
|
|
1594
|
+
return;
|
|
1595
|
+
}
|
|
1596
|
+
const { resultCode, action } = response;
|
|
1597
|
+
actions.resolve({ resultCode, action });
|
|
1598
|
+
if (resultCode === "Authorised") {
|
|
1599
|
+
handleSuccess("success.paymentAuthorized");
|
|
1600
|
+
} else {
|
|
1601
|
+
handleError("error.paymentUnsuccessful");
|
|
1602
|
+
}
|
|
1603
|
+
}
|
|
1604
|
+
const hasApplePay = paymentMethods.paymentMethods.paymentMethods?.some((x) => x.type === "applepay");
|
|
1605
|
+
if (!hasApplePay) {
|
|
1606
|
+
return null;
|
|
1607
|
+
}
|
|
1608
|
+
return /* @__PURE__ */ h20("label", { className: "straumur__apple-pay-component" }, /* @__PURE__ */ h20(
|
|
1609
|
+
"input",
|
|
1610
|
+
{
|
|
1611
|
+
type: "radio",
|
|
1612
|
+
className: "straumur__apple-pay-component__radio-selector",
|
|
1613
|
+
checked: activePaymentMethod === "applepay",
|
|
1614
|
+
onChange: handleBoxChange
|
|
1615
|
+
}
|
|
1616
|
+
), /* @__PURE__ */ h20("span", { className: "straumur__apple-pay-component__content" }, /* @__PURE__ */ h20("span", { className: "straumur__apple-pay-component--circle" }), /* @__PURE__ */ h20(applepay_default, null), /* @__PURE__ */ h20("span", { className: "straumur__apple-pay-component--text" }, i18n(configuration.locale, "applePay.title"))), /* @__PURE__ */ h20("div", { className: "straumur__apple-pay-component__expandable" }, /* @__PURE__ */ h20("div", { ref: applePayElementRef })));
|
|
1617
|
+
}
|
|
1618
|
+
var apple_pay_component_default = ApplePayComponent;
|
|
1619
|
+
|
|
1444
1620
|
// src/features/stored-card/stored-card-container-component.tsx
|
|
1445
|
-
import { Fragment as Fragment4, h as
|
|
1621
|
+
import { Fragment as Fragment4, h as h23 } from "preact";
|
|
1446
1622
|
|
|
1447
1623
|
// src/features/stored-card/stored-card-component.tsx
|
|
1448
|
-
import { Fragment as Fragment3, h as
|
|
1449
|
-
import { useEffect as
|
|
1624
|
+
import { Fragment as Fragment3, h as h22 } from "preact";
|
|
1625
|
+
import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "preact/hooks";
|
|
1450
1626
|
|
|
1451
1627
|
// src/features/stored-card/stored-card-component.css
|
|
1452
|
-
styleInject('.straumur__stored-card-component {\n position: relative;\n background: white;\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n cursor: pointer;\n}\n.straumur__stored-card-component:has(.straumur__stored-card-component__radio-selector:checked) {\n cursor: default;\n}\n.straumur__stored-card-component__radio-selector {\n position: absolute;\n opacity: 0;\n}\n.straumur__stored-card-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n cursor: default;\n}\n.straumur__stored-card-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__stored-card-component__content:hover .straumur__stored-card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__stored-card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__stored-card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__stored-card-component--brands > svg {\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button {\n margin-left: auto;\n}\n.straumur__stored-card-component__remove-stored-card-button--text {\n color: #d03e00;\n text-decoration: none;\n background: none;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button--text:disabled {\n cursor: not-allowed;\n color: #72889d;\n}\n.straumur__stored-card-component__confirm-remove-stored-card {\n background-color: #fff7db;\n border-radius: var(--straumur__border-radius-s);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--expanded {\n padding: var(--
|
|
1628
|
+
styleInject('.straumur__stored-card-component {\n position: relative;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n cursor: pointer;\n}\n.straumur__stored-card-component:has(.straumur__stored-card-component__radio-selector:checked) {\n cursor: default;\n}\n.straumur__stored-card-component__radio-selector {\n position: absolute;\n opacity: 0;\n}\n.straumur__stored-card-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n cursor: default;\n}\n.straumur__stored-card-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__stored-card-component__content:hover .straumur__stored-card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__stored-card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__stored-card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__stored-card-component--brands > svg {\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button {\n margin-left: auto;\n}\n.straumur__stored-card-component__remove-stored-card-button--text {\n color: #d03e00;\n text-decoration: none;\n background: none;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button--text:disabled {\n cursor: not-allowed;\n color: #72889d;\n}\n.straumur__stored-card-component__confirm-remove-stored-card {\n background-color: #fff7db;\n border-radius: var(--straumur__border-radius-s);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--expanded {\n padding: var(--straumur__space-xxlg);\n max-height: 400px;\n opacity: 1;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--header {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n color: #262b31;\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__stored-card-component__confirm-remove-stored-card--actions {\n display: flex;\n gap: var(--straumur__space-lg);\n justify-content: end;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--actions--button {\n color: #775d00;\n background: none;\n border: none;\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n}\n.straumur__stored-card-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__loading-text {\n display: flex;\n justify-content: center;\n}\n.straumur__stored-card-component__radio-selector:checked ~ .straumur__stored-card-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__stored-card-component__form {\n display: flex;\n padding-top: var(--straumur__space-xxlg);\n flex-direction: column;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__stored-card-component__form--wrapper {\n display: flex;\n flex-direction: column;\n justify-items: start;\n position: relative;\n width: 100%;\n}\n.straumur__stored-card-component__form--wrapper--error {\n color: var(--straumur__color-red-beta);\n font-size: 12px;\n}\n.straumur__stored-card-component__form--wrapper--label {\n transform: translateX(10px) translateY(-50%);\n z-index: 1;\n background:\n linear-gradient(\n to top,\n var(--straumur__color-secondary-gamma) 53%,\n var(--straumur__color-transparent) 50%);\n position: absolute;\n font-weight: 500;\n font-size: 14px;\n padding: 0 var(--straumur__space-xxs);\n}\n.straumur__stored-card-component__form--wrapper--label--readonly {\n background:\n linear-gradient(\n to top,\n var(--straumur__color-gray-epsilon) 53%,\n var(--straumur__color-transparent) 50%);\n}\n.straumur__stored-card-component__form--wrapper--label--error {\n color: var(--straumur__color-red-beta);\n background:\n linear-gradient(\n to top,\n var(--straumur__color-red-gamma) 53%,\n var(--straumur__color-transparent) 50%);\n font-size: 13px;\n font-weight: 500;\n}\n.straumur__stored-card-component__form--wrapper--label--info {\n position: absolute;\n top: 33%;\n right: var(--straumur__space-md);\n}\n.straumur__stored-card-component__form--wrapper--input {\n background: var(--straumur__color-secondary-gamma);\n color: #00112c;\n display: flex;\n align-items: center;\n border: 1px solid var(--straumur__color-transparent);\n border-radius: var(--straumur__border-radius-s);\n font-size: 1rem;\n height: 48px;\n outline: none;\n padding-left: var(--straumur__space-lg);\n transition: border 0.2s ease-out, box-shadow 0.2s ease-out;\n position: relative;\n}\n.straumur__stored-card-component__form--wrapper--input--readonly {\n background-color: var(--straumur__color-gray-epsilon);\n}\n.straumur__stored-card-component__form--wrapper--input:hover {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component__form--wrapper--input--readonly:hover {\n border: 1px solid var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__form--wrapper--input--error {\n background: var(--straumur__color-red-gamma);\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__stored-card-component__form--wrapper--input--error:hover {\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__stored-card-component__form--field-wrapper {\n display: flex;\n width: 100%;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__stored-card-component__submit-button {\n background: var(--straumur__color-primary);\n border: none;\n border-radius: var(--straumur__border-radius-s);\n color: var(--straumur__color-white);\n cursor: pointer;\n font-size: 1rem;\n height: 40px;\n outline: none;\n padding: 0 var(--straumur__space-xxlg);\n transition: background 0.2s ease-out;\n width: 100%;\n}\n.straumur__stored-card-component__submit-button:hover {\n background: var(--straumur__color-primary);\n border: 1px solid #dbdee2;\n}\n.straumur__stored-card-component__submit-button:disabled {\n background: #72889d;\n border: 1px solid #dbdee2;\n cursor: not-allowed;\n}\n');
|
|
1453
1629
|
|
|
1454
1630
|
// src/features/stored-card/stored-card-component.tsx
|
|
1455
1631
|
import {
|
|
1456
|
-
AdyenCheckout as
|
|
1632
|
+
AdyenCheckout as AdyenCheckout4,
|
|
1457
1633
|
CustomCard as CustomCard2
|
|
1458
1634
|
} from "@adyen/adyen-web";
|
|
1459
1635
|
|
|
1460
1636
|
// src/assets/icons/warning.tsx
|
|
1461
|
-
import { h as
|
|
1462
|
-
var WarningIcon = () => /* @__PURE__ */
|
|
1637
|
+
import { h as h21 } from "preact";
|
|
1638
|
+
var WarningIcon = () => /* @__PURE__ */ h21("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h21("g", { "clip-path": "url(#clip0_10650_34968)" }, /* @__PURE__ */ h21(
|
|
1463
1639
|
"path",
|
|
1464
1640
|
{
|
|
1465
1641
|
d: "M12.0011 15C12.6245 15 13.1261 14.4984 13.1261 13.875V7.875C13.1261 7.25391 12.6222 6.75 12.0433 6.75C11.4644 6.75 10.8761 7.25625 10.8761 7.875V13.875C10.8761 14.4984 11.3823 15 12.0011 15ZM12.0011 16.5516C11.1873 16.5516 10.5273 17.2116 10.5273 18.0253C10.5292 18.8391 11.1855 19.5 12.0011 19.5C12.8167 19.5 13.4748 18.84 13.4748 18.0262C13.473 17.2125 12.8167 16.5516 12.0011 16.5516Z",
|
|
1466
1642
|
fill: "#DFAE00"
|
|
1467
1643
|
}
|
|
1468
|
-
), /* @__PURE__ */
|
|
1644
|
+
), /* @__PURE__ */ h21(
|
|
1469
1645
|
"path",
|
|
1470
1646
|
{
|
|
1471
1647
|
opacity: "0.4",
|
|
1472
1648
|
d: "M23.7312 19.5469L13.7328 2.48438C12.9673 1.17188 11.0356 1.17188 10.2649 2.48438L0.271188 19.5469C-0.49803 20.8547 0.460048 22.5 2.00181 22.5H21.9987C23.5343 22.5 24.4953 20.8594 23.7312 19.5469ZM10.8734 7.875C10.8734 7.25391 11.3773 6.75 11.9984 6.75C12.6195 6.75 13.1234 7.25625 13.1234 7.875V13.875C13.1234 14.4961 12.6195 15 12.0406 15C11.4617 15 10.8734 14.4984 10.8734 13.875V7.875ZM11.9984 19.5C11.1846 19.5 10.5246 18.84 10.5246 18.0262C10.5246 17.2125 11.1842 16.5525 11.9984 16.5525C12.8126 16.5525 13.4721 17.2125 13.4721 18.0262C13.4703 18.8391 12.814 19.5 11.9984 19.5Z",
|
|
1473
1649
|
fill: "#DFAE00"
|
|
1474
1650
|
}
|
|
1475
|
-
)), /* @__PURE__ */
|
|
1651
|
+
)), /* @__PURE__ */ h21("defs", null, /* @__PURE__ */ h21("clipPath", { id: "clip0_10650_34968" }, /* @__PURE__ */ h21("rect", { width: "24", height: "24", fill: "white" }))));
|
|
1476
1652
|
var warning_default = WarningIcon;
|
|
1477
1653
|
|
|
1478
1654
|
// src/features/stored-card/stored-card-component.tsx
|
|
@@ -1482,9 +1658,9 @@ function StoredCardComponent({
|
|
|
1482
1658
|
storedPaymentMethod,
|
|
1483
1659
|
onStoredCardRemoved
|
|
1484
1660
|
}) {
|
|
1485
|
-
const storedCardElementRef =
|
|
1486
|
-
const adyenCardRef =
|
|
1487
|
-
const customCardRef =
|
|
1661
|
+
const storedCardElementRef = useRef6(null);
|
|
1662
|
+
const adyenCardRef = useRef6();
|
|
1663
|
+
const customCardRef = useRef6();
|
|
1488
1664
|
const [payButtonDisabled, setPayButtonDisabled] = useState5(true);
|
|
1489
1665
|
const [securityCodePolicy, setSecurityCodePolicy] = useState5("required");
|
|
1490
1666
|
const [askConfirmRemoveStoredCard, setAskConfirmRemoveStoredCard] = useState5(false);
|
|
@@ -1504,7 +1680,7 @@ function StoredCardComponent({
|
|
|
1504
1680
|
setThreeDSecureActive
|
|
1505
1681
|
} = usePaymentMethodGroup();
|
|
1506
1682
|
const initializeAdyenComponent = async () => {
|
|
1507
|
-
adyenCardRef.current = await
|
|
1683
|
+
adyenCardRef.current = await AdyenCheckout4({
|
|
1508
1684
|
clientKey: paymentMethods.clientKey,
|
|
1509
1685
|
locale: configuration.locale,
|
|
1510
1686
|
environment: configuration.environment,
|
|
@@ -1545,18 +1721,18 @@ function StoredCardComponent({
|
|
|
1545
1721
|
customCardRef.current.mount(storedCardElementRef.current);
|
|
1546
1722
|
}
|
|
1547
1723
|
};
|
|
1548
|
-
|
|
1724
|
+
useEffect5(() => {
|
|
1549
1725
|
if (activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id && !isStoredCardInitialized[activeStoredPaymentMethodId]) {
|
|
1550
1726
|
initializeAdyenComponent();
|
|
1551
1727
|
}
|
|
1552
1728
|
}, [configuration, activePaymentMethod, activeStoredPaymentMethodId]);
|
|
1553
|
-
|
|
1729
|
+
useEffect5(() => {
|
|
1554
1730
|
if (customCardRef.current && isStoredCardInitialized[activeStoredPaymentMethodId]) {
|
|
1555
1731
|
initializeAdyenComponent();
|
|
1556
1732
|
setFormErrors({ encryptedSecurityCode: { visible: false, message: void 0 } });
|
|
1557
1733
|
}
|
|
1558
1734
|
}, [configuration]);
|
|
1559
|
-
|
|
1735
|
+
useEffect5(() => {
|
|
1560
1736
|
setAskConfirmRemoveStoredCard(false);
|
|
1561
1737
|
}, [activePaymentMethod, activeStoredPaymentMethodId]);
|
|
1562
1738
|
function handleBoxChange() {
|
|
@@ -1653,7 +1829,7 @@ function StoredCardComponent({
|
|
|
1653
1829
|
if (!customCardRef.current) return;
|
|
1654
1830
|
customCardRef.current.submit();
|
|
1655
1831
|
}
|
|
1656
|
-
return /* @__PURE__ */
|
|
1832
|
+
return /* @__PURE__ */ h22("label", { className: "straumur__stored-card-component" }, /* @__PURE__ */ h22(
|
|
1657
1833
|
"input",
|
|
1658
1834
|
{
|
|
1659
1835
|
type: "radio",
|
|
@@ -1661,7 +1837,7 @@ function StoredCardComponent({
|
|
|
1661
1837
|
checked: activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id,
|
|
1662
1838
|
onChange: handleBoxChange
|
|
1663
1839
|
}
|
|
1664
|
-
), /* @__PURE__ */
|
|
1840
|
+
), /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component__content" }, /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component--circle" }), /* @__PURE__ */ h22(
|
|
1665
1841
|
RenderBrandIcons,
|
|
1666
1842
|
{
|
|
1667
1843
|
brands: [
|
|
@@ -1671,7 +1847,7 @@ function StoredCardComponent({
|
|
|
1671
1847
|
}
|
|
1672
1848
|
]
|
|
1673
1849
|
}
|
|
1674
|
-
), /* @__PURE__ */
|
|
1850
|
+
), /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component--text" }, "\u2022\u2022\u2022\u2022 ", storedPaymentMethod.lastFour), activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id && isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__remove-stored-card-button" }, /* @__PURE__ */ h22(
|
|
1675
1851
|
"button",
|
|
1676
1852
|
{
|
|
1677
1853
|
onClick: handleAskToConfirmRemoveCard,
|
|
@@ -1679,20 +1855,20 @@ function StoredCardComponent({
|
|
|
1679
1855
|
disabled: askConfirmRemoveStoredCard
|
|
1680
1856
|
},
|
|
1681
1857
|
i18n(configuration.locale, "stored-cards.removeStoredCard")
|
|
1682
|
-
))), /* @__PURE__ */
|
|
1858
|
+
))), /* @__PURE__ */ h22(
|
|
1683
1859
|
"div",
|
|
1684
1860
|
{
|
|
1685
1861
|
className: `${"straumur__stored-card-component__confirm-remove-stored-card"} ${askConfirmRemoveStoredCard ? "straumur__stored-card-component__confirm-remove-stored-card--expanded" : ""}`
|
|
1686
1862
|
},
|
|
1687
|
-
/* @__PURE__ */
|
|
1688
|
-
/* @__PURE__ */
|
|
1863
|
+
/* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--header" }, /* @__PURE__ */ h22(warning_default, null), /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component__confirm-remove-stored-card--header--title" }, i18n(configuration.locale, "stored-cards.removeStoredCardQuestion"))),
|
|
1864
|
+
/* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--actions" }, /* @__PURE__ */ h22(
|
|
1689
1865
|
"button",
|
|
1690
1866
|
{
|
|
1691
1867
|
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1692
1868
|
onClick: handleConfirmRemoveStoredCard
|
|
1693
1869
|
},
|
|
1694
1870
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionYesRemove")
|
|
1695
|
-
), /* @__PURE__ */
|
|
1871
|
+
), /* @__PURE__ */ h22(
|
|
1696
1872
|
"button",
|
|
1697
1873
|
{
|
|
1698
1874
|
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
@@ -1700,7 +1876,7 @@ function StoredCardComponent({
|
|
|
1700
1876
|
},
|
|
1701
1877
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionCancel")
|
|
1702
1878
|
))
|
|
1703
|
-
), /* @__PURE__ */
|
|
1879
|
+
), /* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__expandable", ref: storedCardElementRef }, !isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__loading-text" }, /* @__PURE__ */ h22(loader_default, null)), /* @__PURE__ */ h22(
|
|
1704
1880
|
"div",
|
|
1705
1881
|
{
|
|
1706
1882
|
className: "straumur__stored-card-component__form",
|
|
@@ -1710,21 +1886,21 @@ function StoredCardComponent({
|
|
|
1710
1886
|
transition: "opacity 0.3s ease-in-out"
|
|
1711
1887
|
}
|
|
1712
1888
|
},
|
|
1713
|
-
/* @__PURE__ */
|
|
1889
|
+
/* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__form--field-wrapper" }, /* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__form--wrapper" }, /* @__PURE__ */ h22("label", { className: "straumur__stored-card-component__form--wrapper--label straumur__stored-card-component__form--wrapper--label--readonly" }, i18n(configuration.locale, "stored-cards.expiryDate")), /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component__form--wrapper--input straumur__stored-card-component__form--wrapper--input--readonly" }, storedPaymentMethod.expiryMonth, "/", storedPaymentMethod.expiryYear)), /* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ h22(Fragment3, null, /* @__PURE__ */ h22(
|
|
1714
1890
|
"label",
|
|
1715
1891
|
{
|
|
1716
1892
|
className: `${"straumur__stored-card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--label--error" : ""}`
|
|
1717
1893
|
},
|
|
1718
1894
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "stored-cards.securityCode3DigitsOptional") : i18n(configuration.locale, "stored-cards.securityCode3Digits")
|
|
1719
|
-
), /* @__PURE__ */
|
|
1895
|
+
), /* @__PURE__ */ h22(
|
|
1720
1896
|
"span",
|
|
1721
1897
|
{
|
|
1722
1898
|
className: `${"straumur__stored-card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--input--error" : ""}`,
|
|
1723
1899
|
"data-cse": "encryptedSecurityCode"
|
|
1724
1900
|
},
|
|
1725
|
-
/* @__PURE__ */
|
|
1726
|
-
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */
|
|
1727
|
-
/* @__PURE__ */
|
|
1901
|
+
/* @__PURE__ */ h22("div", { className: "straumur__stored-card-component__form--wrapper--label--info" }, /* @__PURE__ */ h22(Tooltip, { content: i18n(configuration.locale, "stored-cards.securityCode3DigitsInfo") }, /* @__PURE__ */ h22(info_default, null)))
|
|
1902
|
+
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ h22("span", { className: "straumur__stored-card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message))),
|
|
1903
|
+
/* @__PURE__ */ h22(
|
|
1728
1904
|
"button",
|
|
1729
1905
|
{
|
|
1730
1906
|
className: "straumur__stored-card-component__submit-button",
|
|
@@ -1754,7 +1930,7 @@ function StoredCardContainerComponent({
|
|
|
1754
1930
|
(prevStoredPaymentMethods) => prevStoredPaymentMethods.filter((storedPaymentMethod) => storedPaymentMethod.id !== storedPaymentMethodId)
|
|
1755
1931
|
);
|
|
1756
1932
|
}
|
|
1757
|
-
return /* @__PURE__ */
|
|
1933
|
+
return /* @__PURE__ */ h23(Fragment4, null, storedPaymentMethods?.map((storedPaymentMethod) => /* @__PURE__ */ h23(
|
|
1758
1934
|
stored_card_component_default,
|
|
1759
1935
|
{
|
|
1760
1936
|
key: storedPaymentMethod.id,
|
|
@@ -1768,26 +1944,26 @@ function StoredCardContainerComponent({
|
|
|
1768
1944
|
var stored_card_container_component_default = StoredCardContainerComponent;
|
|
1769
1945
|
|
|
1770
1946
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1771
|
-
import { h as
|
|
1947
|
+
import { h as h24 } from "preact";
|
|
1772
1948
|
|
|
1773
1949
|
// src/components/payment-method-group/payment-method-group.css
|
|
1774
1950
|
styleInject(".straumur__payment-method-group {\n display: flex;\n flex-direction: column;\n gap: var(--straumur__space-xxlg);\n width: 100%;\n}\n");
|
|
1775
1951
|
|
|
1776
1952
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1777
1953
|
function PaymentMethodGroup({ children, initialValue }) {
|
|
1778
|
-
return /* @__PURE__ */
|
|
1954
|
+
return /* @__PURE__ */ h24(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ h24("div", { className: "straumur__payment-method-group" }, children));
|
|
1779
1955
|
}
|
|
1780
1956
|
var payment_method_group_default = PaymentMethodGroup;
|
|
1781
1957
|
|
|
1782
1958
|
// src/features/result-component/result-component.tsx
|
|
1783
|
-
import { Fragment as Fragment5, h as
|
|
1959
|
+
import { Fragment as Fragment5, h as h27 } from "preact";
|
|
1784
1960
|
|
|
1785
1961
|
// src/features/result-component/result-component.css
|
|
1786
|
-
styleInject(".straumur__result-component {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 300px;\n background-color: white;\n border-radius: 16px;\n}\n");
|
|
1962
|
+
styleInject(".straumur__result-component {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 300px;\n background-color: var(--straumur__color-white);\n border-radius: 16px;\n}\n");
|
|
1787
1963
|
|
|
1788
1964
|
// src/assets/icons/success.tsx
|
|
1789
|
-
import { h as
|
|
1790
|
-
var SuccessIcon = () => /* @__PURE__ */
|
|
1965
|
+
import { h as h25 } from "preact";
|
|
1966
|
+
var SuccessIcon = () => /* @__PURE__ */ h25("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", viewBox: "0 0 120 120" }, /* @__PURE__ */ h25(
|
|
1791
1967
|
"circle",
|
|
1792
1968
|
{
|
|
1793
1969
|
cx: "60",
|
|
@@ -1799,8 +1975,8 @@ var SuccessIcon = () => /* @__PURE__ */ h23("svg", { xmlns: "http://www.w3.org/2
|
|
|
1799
1975
|
"stroke-dasharray": "314",
|
|
1800
1976
|
"stroke-dashoffset": "314"
|
|
1801
1977
|
},
|
|
1802
|
-
/* @__PURE__ */
|
|
1803
|
-
), /* @__PURE__ */
|
|
1978
|
+
/* @__PURE__ */ h25("animate", { attributeName: "stroke-dashoffset", from: "314", to: "0", dur: "1s", fill: "freeze" })
|
|
1979
|
+
), /* @__PURE__ */ h25("g", { transform: "translate(60,60)" }, /* @__PURE__ */ h25(
|
|
1804
1980
|
"path",
|
|
1805
1981
|
{
|
|
1806
1982
|
d: "M-25 5 L-5 25 L25 -15",
|
|
@@ -1812,8 +1988,8 @@ var SuccessIcon = () => /* @__PURE__ */ h23("svg", { xmlns: "http://www.w3.org/2
|
|
|
1812
1988
|
"stroke-dasharray": "100",
|
|
1813
1989
|
"stroke-dashoffset": "100"
|
|
1814
1990
|
},
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1991
|
+
/* @__PURE__ */ h25("animate", { attributeName: "stroke-dashoffset", from: "100", to: "0", dur: "0.5s", begin: "1s", fill: "freeze" }),
|
|
1992
|
+
/* @__PURE__ */ h25(
|
|
1817
1993
|
"animateTransform",
|
|
1818
1994
|
{
|
|
1819
1995
|
attributeName: "transform",
|
|
@@ -1826,7 +2002,7 @@ var SuccessIcon = () => /* @__PURE__ */ h23("svg", { xmlns: "http://www.w3.org/2
|
|
|
1826
2002
|
additive: "sum"
|
|
1827
2003
|
}
|
|
1828
2004
|
),
|
|
1829
|
-
/* @__PURE__ */
|
|
2005
|
+
/* @__PURE__ */ h25(
|
|
1830
2006
|
"animateTransform",
|
|
1831
2007
|
{
|
|
1832
2008
|
attributeName: "transform",
|
|
@@ -1843,8 +2019,8 @@ var SuccessIcon = () => /* @__PURE__ */ h23("svg", { xmlns: "http://www.w3.org/2
|
|
|
1843
2019
|
var success_default = SuccessIcon;
|
|
1844
2020
|
|
|
1845
2021
|
// src/assets/icons/failure.tsx
|
|
1846
|
-
import { h as
|
|
1847
|
-
var FailureIcon = () => /* @__PURE__ */
|
|
2022
|
+
import { h as h26 } from "preact";
|
|
2023
|
+
var FailureIcon = () => /* @__PURE__ */ h26("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", viewBox: "0 0 120 120" }, /* @__PURE__ */ h26(
|
|
1848
2024
|
"circle",
|
|
1849
2025
|
{
|
|
1850
2026
|
cx: "60",
|
|
@@ -1856,8 +2032,8 @@ var FailureIcon = () => /* @__PURE__ */ h24("svg", { xmlns: "http://www.w3.org/2
|
|
|
1856
2032
|
"stroke-dasharray": "314",
|
|
1857
2033
|
"stroke-dashoffset": "314"
|
|
1858
2034
|
},
|
|
1859
|
-
/* @__PURE__ */
|
|
1860
|
-
), /* @__PURE__ */
|
|
2035
|
+
/* @__PURE__ */ h26("animate", { attributeName: "stroke-dashoffset", from: "314", to: "0", dur: "1s", fill: "freeze" })
|
|
2036
|
+
), /* @__PURE__ */ h26("g", { transform: "translate(60,60)" }, /* @__PURE__ */ h26("g", { id: "crossGroup" }, /* @__PURE__ */ h26(
|
|
1861
2037
|
"line",
|
|
1862
2038
|
{
|
|
1863
2039
|
x1: "-20",
|
|
@@ -1870,8 +2046,8 @@ var FailureIcon = () => /* @__PURE__ */ h24("svg", { xmlns: "http://www.w3.org/2
|
|
|
1870
2046
|
"stroke-dasharray": "57",
|
|
1871
2047
|
"stroke-dashoffset": "57"
|
|
1872
2048
|
},
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
), /* @__PURE__ */
|
|
2049
|
+
/* @__PURE__ */ h26("animate", { attributeName: "stroke-dashoffset", from: "57", to: "0", dur: "0.3s", begin: "1s", fill: "freeze" })
|
|
2050
|
+
), /* @__PURE__ */ h26(
|
|
1875
2051
|
"line",
|
|
1876
2052
|
{
|
|
1877
2053
|
x1: "20",
|
|
@@ -1884,7 +2060,7 @@ var FailureIcon = () => /* @__PURE__ */ h24("svg", { xmlns: "http://www.w3.org/2
|
|
|
1884
2060
|
"stroke-dasharray": "57",
|
|
1885
2061
|
"stroke-dashoffset": "57"
|
|
1886
2062
|
},
|
|
1887
|
-
/* @__PURE__ */
|
|
2063
|
+
/* @__PURE__ */ h26("animate", { attributeName: "stroke-dashoffset", from: "57", to: "0", dur: "0.3s", begin: "1.3s", fill: "freeze" })
|
|
1888
2064
|
))));
|
|
1889
2065
|
var failure_default = FailureIcon;
|
|
1890
2066
|
|
|
@@ -1894,44 +2070,44 @@ function ResultComponent({ configuration }) {
|
|
|
1894
2070
|
if (!error && !success) {
|
|
1895
2071
|
return null;
|
|
1896
2072
|
}
|
|
1897
|
-
return /* @__PURE__ */
|
|
2073
|
+
return /* @__PURE__ */ h27("div", { className: "straumur__result-component" }, error && /* @__PURE__ */ h27(Fragment5, null, /* @__PURE__ */ h27(failure_default, null), /* @__PURE__ */ h27("p", { className: "straumur__result-component__error--message" }, i18n(configuration.locale, error))), success && /* @__PURE__ */ h27(Fragment5, null, /* @__PURE__ */ h27(success_default, null), /* @__PURE__ */ h27("p", { className: "straumur__result-component__success--message" }, i18n(configuration.locale, success))));
|
|
1898
2074
|
}
|
|
1899
2075
|
var result_component_default = ResultComponent;
|
|
1900
2076
|
|
|
1901
2077
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1902
|
-
import { h as
|
|
1903
|
-
import { useEffect as
|
|
2078
|
+
import { h as h28 } from "preact";
|
|
2079
|
+
import { useEffect as useEffect6, useRef as useRef7 } from "preact/hooks";
|
|
1904
2080
|
|
|
1905
2081
|
// src/features/three-d-secure-component/three-d-secure-component.css
|
|
1906
|
-
styleInject(".straumur__three-d-secure {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: white;\n border-radius: var(--straumur__border-radius-xxlg);\n}\n");
|
|
2082
|
+
styleInject(".straumur__three-d-secure {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-xxlg);\n}\n");
|
|
1907
2083
|
|
|
1908
2084
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1909
2085
|
function StraumurCheckoutContainer() {
|
|
1910
|
-
const threeDSecureRef =
|
|
2086
|
+
const threeDSecureRef = useRef7(null);
|
|
1911
2087
|
const { setThreeDSecureRef } = usePaymentMethodGroup();
|
|
1912
|
-
|
|
2088
|
+
useEffect6(() => {
|
|
1913
2089
|
if (threeDSecureRef.current) {
|
|
1914
2090
|
setThreeDSecureRef(threeDSecureRef.current);
|
|
1915
2091
|
}
|
|
1916
2092
|
}, []);
|
|
1917
|
-
return /* @__PURE__ */
|
|
2093
|
+
return /* @__PURE__ */ h28("div", { className: "straumur__three-d-secure", ref: threeDSecureRef });
|
|
1918
2094
|
}
|
|
1919
2095
|
var three_d_secure_component_default = StraumurCheckoutContainer;
|
|
1920
2096
|
|
|
1921
2097
|
// src/features/payment-methods-wrapper/payment-methods-wrapper.tsx
|
|
1922
|
-
import { Fragment as Fragment6, h as
|
|
2098
|
+
import { Fragment as Fragment6, h as h29 } from "preact";
|
|
1923
2099
|
function PaymentMethodsWrapper({ children }) {
|
|
1924
2100
|
const { error, success, threeDSecureActive } = usePaymentMethodGroup();
|
|
1925
2101
|
if (error || success || threeDSecureActive) {
|
|
1926
2102
|
return null;
|
|
1927
2103
|
}
|
|
1928
|
-
return /* @__PURE__ */
|
|
2104
|
+
return /* @__PURE__ */ h29(Fragment6, null, children);
|
|
1929
2105
|
}
|
|
1930
2106
|
var payment_methods_wrapper_default = PaymentMethodsWrapper;
|
|
1931
2107
|
|
|
1932
2108
|
// src/features/straumur-checkout-container.tsx
|
|
1933
2109
|
function StraumurCheckoutContainer2({ configuration, paymentMethods }) {
|
|
1934
|
-
return /* @__PURE__ */
|
|
2110
|
+
return /* @__PURE__ */ h30(payment_method_group_default, { initialValue: null }, /* @__PURE__ */ h30(payment_methods_wrapper_default, null, /* @__PURE__ */ h30(stored_card_container_component_default, { configuration, paymentMethods }), /* @__PURE__ */ h30(card_component_default, { configuration, paymentMethods }), /* @__PURE__ */ h30(google_pay_component_default, { configuration, paymentMethods }), /* @__PURE__ */ h30(apple_pay_component_default, { configuration, paymentMethods })), /* @__PURE__ */ h30(three_d_secure_component_default, null), /* @__PURE__ */ h30(result_component_default, { configuration }));
|
|
1935
2111
|
}
|
|
1936
2112
|
var straumur_checkout_container_default = StraumurCheckoutContainer2;
|
|
1937
2113
|
|
|
@@ -1951,7 +2127,7 @@ var StraumurCheckout = class {
|
|
|
1951
2127
|
return;
|
|
1952
2128
|
}
|
|
1953
2129
|
render(
|
|
1954
|
-
/* @__PURE__ */
|
|
2130
|
+
/* @__PURE__ */ h31(RootComponent, null, /* @__PURE__ */ h31("div", { className: "straumur__component" }, /* @__PURE__ */ h31(loader_default, null))),
|
|
1955
2131
|
this.mountElement
|
|
1956
2132
|
);
|
|
1957
2133
|
const response = await setupPaymentMethods(this.configuration.environment, this.configuration.sessionId);
|
|
@@ -1968,7 +2144,7 @@ var StraumurCheckout = class {
|
|
|
1968
2144
|
renderComponent() {
|
|
1969
2145
|
if (!this.mountElement) return;
|
|
1970
2146
|
render(
|
|
1971
|
-
/* @__PURE__ */
|
|
2147
|
+
/* @__PURE__ */ h31(RootComponent, null, /* @__PURE__ */ h31(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods })),
|
|
1972
2148
|
this.mountElement
|
|
1973
2149
|
);
|
|
1974
2150
|
}
|
|
@@ -1994,14 +2170,14 @@ var StraumurCheckout = class {
|
|
|
1994
2170
|
}
|
|
1995
2171
|
handleError(message) {
|
|
1996
2172
|
render(
|
|
1997
|
-
/* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ h31(RootComponent, null, /* @__PURE__ */ h31("div", { className: "straumur__component" }, /* @__PURE__ */ h31(failure_default, null), /* @__PURE__ */ h31("p", null, i18n(this.configuration.locale, message)))),
|
|
1998
2174
|
this.mountElement
|
|
1999
2175
|
);
|
|
2000
2176
|
}
|
|
2001
2177
|
};
|
|
2002
2178
|
var straumur_checkout_default = StraumurCheckout;
|
|
2003
2179
|
function RootComponent({ children }) {
|
|
2004
|
-
return /* @__PURE__ */
|
|
2180
|
+
return /* @__PURE__ */ h31("div", { className: "straumur__root-component" }, children);
|
|
2005
2181
|
}
|
|
2006
2182
|
export {
|
|
2007
2183
|
straumur_checkout_default as StraumurCheckout
|