diff --git a/packages/payment-widget/package.json b/packages/payment-widget/package.json
index 7db213c3..6ce4809d 100644
--- a/packages/payment-widget/package.json
+++ b/packages/payment-widget/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.1",
   "license": "BSD-3-Clause",
   "type": "module",
-  "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
+  "main": "src/index.ts",
   "files": [
     "dist"
   ],
diff --git a/packages/payment-widget/src/locales/en.json b/packages/payment-widget/src/locales/en.json
deleted file mode 100644
index 0782c226..00000000
--- a/packages/payment-widget/src/locales/en.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "payment_widget.pay": "Pay",
-  "payment_widget.order_price": "Order amount",
-  "payment_widget.email": "E-mail",
-  "payment_widget.error_required": "Required field",
-  "payment_widget.error_amount": "The amount must be greater than zero",
-  "payment_widget.error_email": "Incorrect e-mail",
-  "payment_widget.error_phone": "Incorrect phone"
-}
diff --git a/packages/payment-widget/src/locales/en.locale.ts b/packages/payment-widget/src/locales/en.locale.ts
new file mode 100644
index 00000000..3f00720a
--- /dev/null
+++ b/packages/payment-widget/src/locales/en.locale.ts
@@ -0,0 +1,11 @@
+import type { Locale } from './locale.interaces.js'
+
+export const EnLocale: Locale = {
+  'payment_widget.pay': 'Pay',
+  'payment_widget.order_price': 'Order amount',
+  'payment_widget.email': 'E-mail',
+  'payment_widget.error_required': 'Required field',
+  'payment_widget.error_amount': 'The amount must be greater than zero',
+  'payment_widget.error_email': 'Incorrect e-mail',
+  'payment_widget.error_phone': 'Incorrect phone',
+}
diff --git a/packages/payment-widget/src/locales/index.ts b/packages/payment-widget/src/locales/index.ts
new file mode 100644
index 00000000..528b9bc5
--- /dev/null
+++ b/packages/payment-widget/src/locales/index.ts
@@ -0,0 +1,2 @@
+export * from './en.locale.js'
+export * from './ru.locale.js'
diff --git a/packages/payment-widget/src/locales/locale.interaces.ts b/packages/payment-widget/src/locales/locale.interaces.ts
new file mode 100644
index 00000000..23e1e2fb
--- /dev/null
+++ b/packages/payment-widget/src/locales/locale.interaces.ts
@@ -0,0 +1,9 @@
+export interface Locale {
+  'payment_widget.pay': string
+  'payment_widget.order_price': string
+  'payment_widget.email': string
+  'payment_widget.error_required': string
+  'payment_widget.error_amount': string
+  'payment_widget.error_email': string
+  'payment_widget.error_phone': string
+}
diff --git a/packages/payment-widget/src/locales/ru.json b/packages/payment-widget/src/locales/ru.json
deleted file mode 100644
index 5f66d0b4..00000000
--- a/packages/payment-widget/src/locales/ru.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "payment_widget.pay": "Оплатить",
-  "payment_widget.order_price": "Сумма заказа",
-  "payment_widget.email": "E-mail",
-  "payment_widget.error_required": "Обязательное поле",
-  "payment_widget.error_amount": "Сумма должна быть больше нуля",
-  "payment_widget.error_email": "Некорректный e-mail",
-  "payment_widget.error_phone": "Некорректный номер"
-}
diff --git a/packages/payment-widget/src/locales/ru.locale.ts b/packages/payment-widget/src/locales/ru.locale.ts
new file mode 100644
index 00000000..4db99709
--- /dev/null
+++ b/packages/payment-widget/src/locales/ru.locale.ts
@@ -0,0 +1,11 @@
+import { Locale } from './locale.interaces.js'
+
+export const RuLocale: Locale = {
+  'payment_widget.pay': 'Оплатить',
+  'payment_widget.order_price': 'Сумма заказа',
+  'payment_widget.email': 'E-mail',
+  'payment_widget.error_required': 'Обязательное поле',
+  'payment_widget.error_amount': 'Сумма должна быть больше нуля',
+  'payment_widget.error_email': 'Некорректный e-mail',
+  'payment_widget.error_phone': 'Некорректный номер',
+}
diff --git a/packages/payment-widget/src/ui/button/button.component.tsx b/packages/payment-widget/src/ui/button/button.component.tsx
index 02124d46..27a95f0f 100644
--- a/packages/payment-widget/src/ui/button/button.component.tsx
+++ b/packages/payment-widget/src/ui/button/button.component.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps }  from '@atls-ui-parts/button'
 import type { FC }           from 'react'
 
-import { default as styled } from '@emotion/styled'
+import styled from '@emotion/styled'
 import { useHover }          from 'react-laag'
 import React                 from 'react'
 
@@ -10,7 +10,7 @@ import { contentStyles }     from './button.styles.js'
 import { baseStyles }        from './button.styles.js'
 import { shapeStyles }       from './button.styles.js'
 
-const ButtonElement = styled.default('button')<ButtonProps>(
+const ButtonElement = (styled.default ?? styled)('button')<ButtonProps>(
   // @ts-expect-error
   baseStyles,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
diff --git a/packages/payment-widget/src/ui/input/input.component.tsx b/packages/payment-widget/src/ui/input/input.component.tsx
index 2dd3e7c4..e2dcca56 100644
--- a/packages/payment-widget/src/ui/input/input.component.tsx
+++ b/packages/payment-widget/src/ui/input/input.component.tsx
@@ -20,7 +20,7 @@ import { baseStyles }                        from './input.styles.js'
 import { shapeStyles }                       from './input.styles.js'
 import { transitionStyles }                  from './input.styles.js'
 
-export const InputElement = styled.default.div<any>(
+export const InputElement = (styled.default ?? styled).div<any>(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   baseStyles,
   shapeStyles,
@@ -29,7 +29,7 @@ export const InputElement = styled.default.div<any>(
   layout
 )
 
-const Container = styled.default.div(({ type }: any) => ({
+const Container = (styled.default ?? styled).div(({ type }: any) => ({
   display: type === 'hidden' ? 'none' : 'flex',
   width: '100%',
   flexDirection: 'column',
diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx
index 1bedf28f..fa6cb679 100644
--- a/packages/payment-widget/src/ui/widget.component.tsx
+++ b/packages/payment-widget/src/ui/widget.component.tsx
@@ -7,9 +7,9 @@ import { IntlProvider }     from 'react-intl'
 import { useMemo }          from 'react'
 import React                from 'react'
 
-import * as messagesEn      from '../locales/en.json' with { type: 'json' }
-import * as messagesRu      from '../locales/ru.json' with { type: 'json' }
 import { LanguagesType }    from '../enums/index.js'
+import { EnLocale }         from '../locales/index.js'
+import { RuLocale }         from '../locales/index.js'
 import { Form }             from './form/index.js'
 import { FormProvider }     from './form/index.js'
 import { useCustomButton }  from '../hooks/index.js'
@@ -17,8 +17,8 @@ import { useCustomFields }  from '../hooks/index.js'
 import { getNameFields }    from '../utils/index.js'
 
 const messages = {
-  [LanguagesType.RUSSIAN]: messagesRu,
-  [LanguagesType.ENGLISH]: messagesEn,
+  [LanguagesType.RUSSIAN]: RuLocale,
+  [LanguagesType.ENGLISH]: EnLocale,
 }
 
 export const Widget = ({
@@ -47,8 +47,12 @@ export const Widget = ({
   const nameFields = getNameFields(customFields)
 
   return (
-    // @ts-expect-error types mismatch
-    <IntlProvider locale={locale} messages={messages[locale]} defaultLocale={LanguagesType.RUSSIAN}>
+    <IntlProvider
+      locale={locale ?? navigator.language}
+      // @ts-expect-error types mismatch
+      messages={messages[locale]}
+      defaultLocale={LanguagesType.RUSSIAN}
+    >
       <FormProvider
         additionalFields={additionalFields}
         nameFields={nameFields}