@paykka/card-checkout-ui 0.7.0 → 0.8.0

package/dist/es/components/GooglePay/index.js

@@ -1,6 +1,6 @@
 import { w, F, h, q, y, A, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentMethod, SessionMode } from "../../constant.js";
+import { SessionMode, PaymentMethod } from "../../constant.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
@@ -176,7 +176,7 @@ const loadGooglePayJS = (onload, onerror) => {
 const { bem } = useBEM("google-pay");
 const GooglePay = w((props, ref) => {
   var _a;
-  const { session, threeDSFrame } = props;
+  const { session, threeDSFrame, isDropIn } = props;
   F(ref, () => ({
     checkThreeDS
   }));
@@ -198,11 +198,18 @@ const GooglePay = w((props, ref) => {
     returnUrl: session == null ? void 0 : session.checkout.returnUrl
   });
   y(() => {
-    var _a2;
+    var _a2, _b, _c;
     if (!sessionReady) {
       return;
     }
     const { status, paymentMethod = [], sessionMode } = (session == null ? void 0 : session.checkout) || {};
+    if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
+      (_b = (_a2 = props.core.config).onInitError) == null ? void 0 : _b.call(
+        _a2,
+        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+      );
+      return;
+    }
     if (!paymentMethod.includes(PaymentMethod.GOOGLE_PAY)) {
       return;
     }
@@ -220,7 +227,7 @@ const GooglePay = w((props, ref) => {
     );
     setHosted(sessionMode === SessionMode.HOSTED);
     if (status === "SUCCESS") {
-      (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props, getPaymentSuccessData());
+      (_c = props.onSuccess) == null ? void 0 : _c.call(props, getPaymentSuccessData());
     }
   }, [sessionReady]);
   const processThreeDS = (threeDSUrl, incomplete) => {

package/dist/es/components/Sepa/index.js

@@ -26,7 +26,7 @@ import { AccountNameField } from "../AccountNameField/index.js";
 const { bem } = useBEM("sepa");
 const fieldClassNames = bem("field");
 const Sepa = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
@@ -91,9 +91,10 @@ const Sepa = w((props, ref) => {
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -262,6 +263,7 @@ const Sepa = w((props, ref) => {
           {
             ref: addressFieldRef,
             value: form.address,
+            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
             onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
           }
         ) }),

package/dist/es/components/WechatPay/index.js

@@ -1,10 +1,10 @@
 import { w, A, F, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { PaymentType } from "../../constant.js";
+import { COMMON_CLASS_NAME, PaymentType } from "../../constant.js";
 import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { formatAmount } from "../../utils/format.js";
+import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
 import { getWechatPayInfo, wechatPay } from "../../api/modules/wechat-pay/index.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
@@ -23,7 +23,7 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("wechat-pay");
 const WechatPay = w((props, ref) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { session } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
@@ -115,7 +115,7 @@ const WechatPay = w((props, ref) => {
     }
   );
   async function pay(search = false, timeout) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j;
     try {
       const res = search ? await getWechatPayInfo(
         {
@@ -143,26 +143,26 @@ const WechatPay = w((props, ref) => {
         { locale: i18n.locale, timeout }
       );
       const { status, orderStatus, errorMessage, payInfo, errorCode } = res;
-      !search && ((_b = props.onSubmitResponse) == null ? void 0 : _b.call(props, res));
+      !search && ((_b2 = props.onSubmitResponse) == null ? void 0 : _b2.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
         } else if (orderStatus === "SUCCESS") {
           setSubmitButtonStatus("success");
-          (_c = props.onSuccess) == null ? void 0 : _c.call(props);
+          (_c2 = props.onSuccess) == null ? void 0 : _c2.call(props);
           return {
             end: true
           };
         } else if (orderStatus === "FAILURE") {
           setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_d = props.onError) == null ? void 0 : _d.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          (_d2 = props.onError) == null ? void 0 : _d2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return {
             end: true
           };
         } else if (orderStatus === "PROCESSING") {
           if (!search) {
-            await ((_e = props.onCallWxPayBox) == null ? void 0 : _e.call(props, payInfo));
+            await ((_e2 = props.onCallWxPayBox) == null ? void 0 : _e2.call(props, payInfo));
             startReFetchPayInfo();
           }
           return {
@@ -170,26 +170,26 @@ const WechatPay = w((props, ref) => {
           };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_f = props.onTimeout) == null ? void 0 : _f.call(props, "channel");
+          (_f2 = props.onTimeout) == null ? void 0 : _f2.call(props, "channel");
           return {
             end: true
           };
         }
       } else if (status === "SUCCESS") {
         setSubmitButtonStatus("success");
-        (_g = props.onSuccess) == null ? void 0 : _g.call(props);
+        (_g2 = props.onSuccess) == null ? void 0 : _g2.call(props);
         return {
           end: true
         };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_h = props.onExpired) == null ? void 0 : _h.call(props);
+        (_h2 = props.onExpired) == null ? void 0 : _h2.call(props);
         return {
           end: true
         };
       }
       setSubmitButtonStatus("unSubmit");
-      (_i = props.onSuccess) == null ? void 0 : _i.call(props);
+      (_i2 = props.onSuccess) == null ? void 0 : _i2.call(props);
       return {
         end: true
       };
@@ -229,9 +229,10 @@ const WechatPay = w((props, ref) => {
   const Button = () => {
     const { transAmount } = (session == null ? void 0 : session.checkout) ?? {};
     let { symbol = "", amount = "", digits } = transAmount ?? {};
+    let amountStr = "";
     if (amount && !isUndefined(digits))
-      amount = formatAmount(+amount, digits);
-    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amount}` : "");
+      amountStr = formatAmount(+amount, digits);
+    const text = i18n.get("common.pay") + (Number(amount) ? ` ${symbol}${amountStr}` : "");
     return /* @__PURE__ */ u(
       SubmitButton,
       {
@@ -250,6 +251,13 @@ const WechatPay = w((props, ref) => {
     formRef.current = dom;
     dom && validateForm();
   };
+  const formStyle = {
+    [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
+    [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
+    [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
+    [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
+    [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
+  };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
     {
@@ -257,7 +265,7 @@ const WechatPay = w((props, ref) => {
         i18n,
         session
       },
-      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: [
+      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
         /* @__PURE__ */ u(
           EmailField,
           {
@@ -272,13 +280,14 @@ const WechatPay = w((props, ref) => {
           {
             ref: addressFieldRef,
             value: form.address,
+            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
             onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
           }
         ),
-        ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && RecurringTip(),
+        ((_i = session == null ? void 0 : session.checkout) == null ? void 0 : _i.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
         Button()
-      ] })
+      ] }) })
     }
   );
 });

package/dist/es/components/index.js

@@ -27,3 +27,4 @@ import "./GooglePay/index.js";
 import "./Sepa/index.js";
 import "./EncryptedCard/index.js";
 import "./CombinedCardInfo/index.js";
+import "./DropIn/index.js";

package/dist/es/components/internal/Modal/Modal.js

@@ -6,7 +6,7 @@ import "../../../utils/system-info/get-browser-info.js";
 import "./modal2.js";
 const { bem } = useBEM("modal");
 const Modal = w((props) => {
-  const { show, width, height, maskClosable, header, children, onChange, style } = props;
+  const { show = false, width, height, maskClosable, header, children, onChange, style } = props;
   const [modalWidth, setModalWidth] = h();
   const [modalHeight, setModalHeight] = h();
   const { i18n } = useI18n();

package/dist/es/components/internal/icons/IconCard.js

@@ -0,0 +1,42 @@
+import { u } from "../../../core.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
+import { isUndefined } from "../../../utils/is.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+const IconCard = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: computedSize,
+      height: computedSize,
+      viewBox: "0 0 22 22",
+      fill: "none",
+      style,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: [
+        /* @__PURE__ */ u("g", { "clip-path": "url(#clip0_646_2366)", children: /* @__PURE__ */ u("g", { "clip-path": "url(#clip1_646_2366)", children: [
+          /* @__PURE__ */ u(
+            "path",
+            {
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              d: "M1.66667 8.33337C0.746192 8.33337 0 9.07957 0 10L0 11.6667H20V10C20 9.07957 19.2538 8.33337 18.3333 8.33337H1.66667ZM20 14.1667H0L0 20C0 20.9205 0.746192 21.6667 1.66667 21.6667H18.3333C19.2538 21.6667 20 20.9205 20 20V14.1667Z",
+              fill: "#1F1F1F"
+            }
+          ),
+          /* @__PURE__ */ u("rect", { x: "3.33203", y: "16.6667", width: "4.16667", height: "2.5", rx: "0.625", fill: "white" })
+        ] }) }),
+        /* @__PURE__ */ u("defs", { children: [
+          /* @__PURE__ */ u("clipPath", { id: "clip0_646_2366", children: /* @__PURE__ */ u("rect", { width: "30", height: "30", rx: "3.2", fill: "white" }) }),
+          /* @__PURE__ */ u("clipPath", { id: "clip1_646_2366", children: /* @__PURE__ */ u("rect", { width: "20", height: "13.75", fill: "white", transform: "translate(0 8.125)" }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  IconCard
+};

package/dist/es/constant.js

@@ -17,6 +17,15 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
   PaymentMethod2["SEPA_DEBIT"] = "SEPA_DEBIT";
   return PaymentMethod2;
 })(PaymentMethod || {});
+var PaymentCategory = /* @__PURE__ */ ((PaymentCategory2) => {
+  PaymentCategory2["CARD"] = "card";
+  PaymentCategory2["APPLE_PAY"] = "applePay";
+  PaymentCategory2["GOOGLE_PAY"] = "googlePay";
+  PaymentCategory2["SEPA_DEBIT"] = "sepaDebit";
+  PaymentCategory2["WECHAT_PAY"] = "wechatPay";
+  PaymentCategory2["ALI_PAY"] = "aliPay";
+  return PaymentCategory2;
+})(PaymentCategory || {});
 const CardPaymentMethods = [
   "VISA",
   "MASTER_CARD",
@@ -53,6 +62,7 @@ export {
   CardPaymentMethods,
   EAddressType,
   PREFIX,
+  PaymentCategory,
   PaymentMethod,
   PaymentType,
   SessionMode

package/dist/es/core/PayKKaCheckout.js

@@ -89,11 +89,20 @@ class PayKKaCheckout {
   get envConfig() {
     return __privateGet(this, _envConfig);
   }
+  get config() {
+    return __privateGet(this, _config);
+  }
   /** 创建组件，把 session 作为组件的 props 传递 */
   create(component, props) {
     var _a;
+    const { onSubmit, onSuccess, onError, onTimeout, onExpired } = __privateGet(this, _config);
     const coreProps = this.getCoreProps();
     const componentInst = create(component, {
+      onSubmit,
+      onSuccess,
+      onError,
+      onTimeout,
+      onExpired,
       ...props,
       ...coreProps
     });
@@ -103,6 +112,7 @@ class PayKKaCheckout {
   getCoreProps() {
     return {
       session: __privateGet(this, _session),
+      core: this,
       threeDSFrame: __privateGet(this, _config).threeDSFrame
     };
   }

package/dist/es/hooks/usePayState.js

@@ -4,6 +4,7 @@ import { useI18n } from "./useI18n.js";
 import { customLocale, fraudDetectionEnv } from "../config.js";
 import "../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../utils/system-info/get-browser-info.js";
+import { getRealLocale } from "../i18n/util.js";
 function usePayState(session) {
   const [validated, setValidated] = h(false);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
@@ -15,9 +16,10 @@ function usePayState(session) {
     session.ready().then(() => {
       var _a;
       setSessionReady(true);
-      i18n.load(
+      const locale = getRealLocale(
         customLocale || ((_a = session.checkout) == null ? void 0 : _a.locale) || getBrowserInfo().language
       );
+      i18n.load(locale);
       const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv);
       setFraudDetection(fraudDetection2);
       fraudDetection2 == null ? void 0 : fraudDetection2.createFraudDetection();

package/dist/es/i18n/locales/de-DE.js

@@ -1,4 +1,7 @@
 const deDE = {
+  // Drop In
+  "dropIn.card.label": "Bankkarte",
+  "dropIn.otherPaymentMethod": "Andere Zahlungsmethode",
   // card number
   "card.cardNumber.label": "Kartennummer",
   "card.cardNumber.incomplete": "Ihre Kartennummer ist unvollständig",

package/dist/es/i18n/locales/en-GB.js

@@ -1,4 +1,7 @@
 const enGB = {
+  // Drop In
+  "dropIn.card.label": "Bank card",
+  "dropIn.otherPaymentMethod": "Other payment method",
   // card number
   "card.cardNumber.label": "Card number",
   "card.cardNumber.incomplete": "Your card number is incomplete",

package/dist/es/i18n/locales/es-ES.js

@@ -1,4 +1,7 @@
 const esES = {
+  // Drop In
+  "dropIn.card.label": "Tarjeta bancaria",
+  "dropIn.otherPaymentMethod": "Otro método de pago",
   // card number
   "card.cardNumber.label": "Número de tarjeta",
   "card.cardNumber.incomplete": "Tu número de tarjeta está incompleto",

package/dist/es/i18n/locales/fr-FR.js

@@ -1,4 +1,7 @@
 const frFR = {
+  // Drop In
+  "dropIn.card.label": "Carte bancaire",
+  "dropIn.otherPaymentMethod": "Autre méthode de paiement",
   // card number
   "card.cardNumber.label": "Numéro de carte",
   "card.cardNumber.incomplete": "Votre numéro de carte est incomplet",

package/dist/es/i18n/locales/ja-JP.js

@@ -1,4 +1,7 @@
 const jaJP = {
+  // Drop In
+  "dropIn.card.label": "銀行カード",
+  "dropIn.otherPaymentMethod": "他の支払い方法",
   // card number
   "card.cardNumber.label": "カード番号",
   "card.cardNumber.incomplete": "カード番号が不完全です",

package/dist/es/i18n/locales/ko-KR.js

@@ -1,4 +1,7 @@
 const koKR = {
+  // Drop In
+  "dropIn.card.label": "은행 카드",
+  "dropIn.otherPaymentMethod": "기타 결제 방법",
   // card number
   "card.cardNumber.label": "카드 번호",
   "card.cardNumber.incomplete": "카드 번호가 불완전합니다",

package/dist/es/i18n/locales/pt-PT.js

@@ -1,4 +1,7 @@
 const ptPT = {
+  // Drop In
+  "dropIn.card.label": "Cartão bancário",
+  "dropIn.otherPaymentMethod": "Outro método de pagamento",
   // card number
   "card.cardNumber.label": "Número do cartão",
   "card.cardNumber.incomplete": "O número do seu cartão está incompleto",

package/dist/es/i18n/locales/ru-RU.js

@@ -1,4 +1,7 @@
 const ruRU = {
+  // Drop In
+  "dropIn.card.label": "Банковская карта",
+  "dropIn.otherPaymentMethod": "Другой способ оплаты",
   // card number
   "card.cardNumber.label": "Номер карты",
   "card.cardNumber.incomplete": "Ваш номер карты неполный",

package/dist/es/i18n/locales/zh-CN.js

@@ -1,4 +1,7 @@
 const zhCN = {
+  // Drop In
+  "dropIn.card.label": "银行卡",
+  "dropIn.otherPaymentMethod": "其他支付方式",
   // card number
   "card.cardNumber.label": "卡号",
   "card.cardNumber.incomplete": "您的卡号不完整",

package/dist/es/i18n/locales/zh-HK.js

@@ -1,4 +1,7 @@
 const zhHK = {
+  // Drop In
+  "dropIn.card.label": "銀行卡",
+  "dropIn.otherPaymentMethod": "其他支付方式",
   // card number
   "card.cardNumber.label": "卡號",
   "card.cardNumber.incomplete": "您的卡號不完整",

package/dist/es/i18n/locales/zh-TW.js

@@ -1,4 +1,7 @@
 const zhTW = {
+  // Drop In
+  "dropIn.card.label": "銀行卡",
+  "dropIn.otherPaymentMethod": "其他支付方式",
   // card number
   "card.cardNumber.label": "卡號",
   "card.cardNumber.incomplete": "您的卡號不完整",

package/dist/es/i18n/util.js

@@ -33,6 +33,16 @@ function getTranslation(locale, customLocales) {
   }
   return translation;
 }
+const getRealLocale = (locale) => {
+  const localeList = Object.values(LocaleKey);
+  if (localeList.includes(locale)) {
+    return locale;
+  } else if (localeList.includes(getBrowserInfo().language)) {
+    return getBrowserInfo().language;
+  } else {
+    return LocaleKey.enGB;
+  }
+};
 async function loadTranslation(locale, customLocales) {
   let translation = getTranslation(locale);
   if (!translation && locale !== getBrowserInfo().language) {
@@ -58,5 +68,6 @@ async function loadTranslation(locale, customLocales) {
   };
 }
 export {
+  getRealLocale,
   loadTranslation
 };

package/dist/es/index.js

@@ -17,6 +17,7 @@ import { Sepa } from "./components/Sepa/index.js";
 import { IBANField } from "./components/CardIBANField/index.js";
 import { EEncryptedCardType, ENCRYPTED_CARD_ITEM_ATTR, ENCRYPTED_CARD_WRAPPER_ID, EncryptedCard, PayKKaEncryptedCard } from "./components/EncryptedCard/index.js";
 import { CombinedCardInfo } from "./components/CombinedCardInfo/index.js";
+import { DropIn, PaymentComponentMap, dropInSupportedPaymentMethods } from "./components/DropIn/index.js";
 import "./core/context.js";
 import { create } from "./core/create.js";
 import { Session } from "./core/Session.js";
@@ -41,6 +42,7 @@ export {
   CardSecurityCodeField,
   CardSelector,
   CombinedCardInfo,
+  DropIn,
   EEncryptedCardType,
   ENCRYPTED_CARD_ITEM_ATTR,
   ENCRYPTED_CARD_WRAPPER_ID,
@@ -52,12 +54,14 @@ export {
   PayKKaCheckout,
   PayKKaEncryptedCard,
   PayKKaError,
+  PaymentComponentMap,
   SecuredIframe,
   Sepa,
   Session,
   SubmitButton,
   WechatPay,
   create,
+  dropInSupportedPaymentMethods,
   getFingerprint,
   querySession,
   setApiUrl,

package/dist/es/style.css

@@ -68,17 +68,13 @@
   border-radius: 8px;
   border: 1px solid #E1E1E5;
   transition: border 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  caret-color: var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --success;
-  caret-color-border-bottom: 1px solid #00B42A;
-}
-
-.paykka-card-checkout-input__input-wrapper--error {
-  border: 1px solid #F53F3F;
+  caret-color: var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --error;
+  caret-color-border: 1px solid #F53F3F;
 }
 
 .paykka-card-checkout-input__input-wrapper:active, .paykka-card-checkout-input__input-wrapper--focus, .paykka-card-checkout-input__input-wrapper:focus {
   border: 1px solid var(--paykka-card-checkout-input-color, #4F43DF);
-  box-shadow: 0 0 0 2px var(--paykka-card-checkout-input-color, #4F43DF);
+  box-shadow: 0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF);
 }
 
 .paykka-card-checkout-input__input-wrapper-disabled {
@@ -107,6 +103,10 @@
   color: #C2C2C2;
 }
 
+.paykka-card-checkout-input__input:-webkit-autofill, .paykka-card-checkout-input__input:-internal-autofill-selected {
+  background-color: transparent !important;
+}
+
 .paykka-card-checkout-input__right-icon {
   padding-right: 12px;
   display: flex;
@@ -1001,6 +1001,102 @@
   display: none !important;
 }
 
+.paykka-card-checkout-payment-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: start;
+  column-gap: 6px;
+}
+
+.paykka-card-checkout-payment-tabs__tab {
+  border: 2px solid #E1E1E5;
+  padding: 12px;
+  border-radius: 12px;
+  width: calc((100% - 12px) / 3);
+}
+
+@media (min-width: 480px) {
+  .paykka-card-checkout-payment-tabs__tab {
+    padding: 16px;
+  }
+}
+
+.paykka-card-checkout-payment-tabs__name {
+  color: #626266;
+}::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-button {
+  display: none !important;
+}
+
+::-moz-scrollbar-button {
+  display: none !important;
+}
+
+.paykka-card-checkout-drop-in__header-payment {
+  margin-bottom: 10px;
+}
+
+.paykka-card-checkout-drop-in__other {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 14px;
+}
+
+@media (min-width: 480px) {
+  .paykka-card-checkout-drop-in__other {
+    margin-top: 30px;
+  }
+}
+
+.paykka-card-checkout-drop-in__other-text {
+  margin: 0 14px;
+  color: #6E6E7E;
+}
+
+.paykka-card-checkout-drop-in__other-line {
+  background-color: #DFDFE5;
+  flex-grow: 0.5;
+  height: 1px;
+}
+
+.paykka-card-checkout-drop-in__tabs-wrapper {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 480px) {
+  .paykka-card-checkout-drop-in__tabs-wrapper {
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+}::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-button {
+  display: none !important;
+}
+
+::-moz-scrollbar-button {
+  display: none !important;
+}
+
 .paykka-card-checkout-sepa {
   min-width: 280px;
 }