diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
index 830b1e97f1..80dda425de 100644
--- a/packages/checkout/widgets-lib/src/locales/en.json
+++ b/packages/checkout/widgets-lib/src/locales/en.json
@@ -258,12 +258,12 @@
         "heading": "How would you like to pay?"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "Coins",
           "caption": "Using the coins balance in your wallet",
           "disabledCaption": "We can't see enough coins in your balance"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "Card",
           "caption": "GooglePay also available with Transak",
           "disabledCaption": null
@@ -332,7 +332,7 @@
           "primaryAction": "Try again",
           "secondaryAction": "Cancel"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "Sorry, something went wrong. Please try again.",
           "primaryAction": "Try again",
           "secondaryAction": "Dismiss"
diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
index 0aa5e20f0a..fa3e34b8c2 100644
--- a/packages/checkout/widgets-lib/src/locales/ja.json
+++ b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -261,12 +261,12 @@
         "heading": "どのようにして支払いますか？"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "コイン",
           "caption": "ウォレットのコイン残高を使用して",
           "disabledCaption": "残高に十分なコインが見当たりません"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "カード",
           "caption": "GooglePayもTransakで利用可能",
           "disabledCaption": ""
@@ -335,7 +335,7 @@
           "primaryAction": "もう一度試す",
           "secondaryAction": "キャンセル"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "申し訳ありませんが、何かがうまくいかなかったようです。もう一度お試しください。",
           "primaryAction": "もう一度試す",
           "secondaryAction": "閉じる"
diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
index 3d5970fa2d..587bca7f21 100644
--- a/packages/checkout/widgets-lib/src/locales/ko.json
+++ b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -258,12 +258,12 @@
         "heading": "어떤 방법으로 결제하시겠습니까?"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "코인",
           "caption": "지갑에 있는 코인 잔액을 이용하여",
           "disabledCaption": "지갑의 충분한 코인을 볼 수 없습니다"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "카드",
           "caption": "Transak에서 GooglePay도 이용 가능합니다",
           "disabledCaption": ""
@@ -332,7 +332,7 @@
           "primaryAction": "다시 시도",
           "secondaryAction": "취소"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "죄송합니다, 문제가 발생했습니다. 다시 시도하세요.",
           "primaryAction": "다시 시도",
           "secondaryAction": "닫기"
diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
index 5059a7f576..f9bc721386 100644
--- a/packages/checkout/widgets-lib/src/locales/zh.json
+++ b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -258,12 +258,12 @@
         "heading": "您希望如何支付？"
       },
       "options": {
-        "CRYPTO": {
+        "crypto": {
           "heading": "硬币",
           "caption": "使用您钱包中的硬币余额",
           "disabledCaption": "我们看不到您余额中有足够多的硬币"
         },
-        "FIAT": {
+        "fiat": {
           "heading": "卡",
           "caption": "Transak也支持使用GooglePay",
           "disabledCaption": null
@@ -332,7 +332,7 @@
           "primaryAction": "再试一次",
           "secondaryAction": "取消"
         },
-        "DEFAULT": {
+        "DEFAULT_ERROR": {
           "description": "抱歉，出了点问题。请再试一次。",
           "primaryAction": "再试一次",
           "secondaryAction": "关闭"
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
index 7906eb3877..0839d4d3dd 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
@@ -4,6 +4,7 @@ import {
 
 import { SaleItem } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
+import { useTranslation } from 'react-i18next';
 import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import {
   SharedViews,
@@ -13,7 +14,6 @@ import {
   viewReducer,
 } from '../../context/view-context/ViewContext';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
-import { text } from '../../resources/text/textConfig';
 import { LoadingView } from '../../views/loading/LoadingView';
 import { SaleWidgetViews } from '../../context/view-context/SaleViewContextTypes';
 import { widgetTheme } from '../../lib/theme';
@@ -35,6 +35,7 @@ export interface SaleWidgetProps {
 }
 
 export function SaleWidget(props: SaleWidgetProps) {
+  const { t } = useTranslation();
   const {
     config,
     amount,
@@ -53,7 +54,7 @@ export function SaleWidget(props: SaleWidgetProps) {
   const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
 
   const loadingText = viewState.view.data?.loadingText
-    || text.views[SharedViews.LOADING_VIEW].text;
+    || t('views.LOADING_VIEW.text');
 
   const mounted = useRef(false);
   const onMount = useCallback(() => {
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx
index 6c3ab8634d..16fb5c6dbf 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx
@@ -20,6 +20,7 @@ import {
   useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
 import { BridgeWidget } from 'widgets/bridge/BridgeWidget';
+import { useTranslation } from 'react-i18next';
 import {
   ConnectLoaderActions,
   ConnectLoaderContext,
@@ -31,7 +32,6 @@ import { ConnectWidgetViews } from '../../../../context/view-context/ConnectView
 import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { ViewActions, ViewContext } from '../../../../context/view-context/ViewContext';
 import { getL1ChainId, getL2ChainId } from '../../../../lib/networkUtils';
-import { text as textConfig } from '../../../../resources/text/textConfig';
 import { LoadingView } from '../../../../views/loading/LoadingView';
 import { ConnectWidget } from '../../../connect/ConnectWidget';
 import { SwapWidget } from '../../../swap/SwapWidget';
@@ -52,13 +52,13 @@ enum FundingRouteExecuteViews {
 }
 
 export function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted }: FundingRouteExecuteProps) {
+  const { t } = useTranslation();
   const {
     config, provider, checkout, fromTokenAddress: requiredTokenAddress,
   } = useSaleContext();
   const { viewDispatch } = useContext(ViewContext);
 
   const { connectLoaderDispatch } = useContext(ConnectLoaderContext);
-  const text = textConfig.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
 
   const [swapParams, setSwapParams] = useState<SwapWidgetParams | undefined>(undefined);
   const [bridgeParams, setBridgeParams] = useState<BridgeWidgetParams | undefined>(undefined);
@@ -229,7 +229,7 @@ export function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted }
   return (
     <EventTargetContext.Provider value={eventTargetReducerValues}>
       {view === FundingRouteExecuteViews.LOADING && (
-        <LoadingView loadingText={text.loading.checkingBalances} />
+        <LoadingView loadingText={t('views.FUND_WITH_SMART_CHECKOUT.loading.checkingBalances')} />
       )}
       {view === FundingRouteExecuteViews.EXECUTE_BRIDGE && (
         <BridgeWidget
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx
index 3e81254375..84367bfd17 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx
@@ -4,10 +4,9 @@ import {
 import { ChainId, FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useEffect, useState } from 'react';
 import { getChainNameById } from 'lib/chains';
+import { useTranslation } from 'react-i18next';
 import { CryptoFiatContext } from '../../../../context/crypto-fiat-context/CryptoFiatContext';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { calculateCryptoToFiat, tokenValueFormat } from '../../../../lib/utils';
-import { text } from '../../../../resources/text/textConfig';
 import { useSaleContext } from '../../context/SaleContextProvider';
 import { fundingRouteFees } from '../../functions/smartCheckoutUtils';
 
@@ -38,7 +37,7 @@ export interface FundingRouteMenuItemProps {
 export function FundingRouteMenuItem({
   onClick, fundingRoute, toggleVisible, selected, size = 'small',
 }: FundingRouteMenuItemProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const firstFundingStep = fundingRoute.steps[0];
 
   const { cryptoFiatState } = useContext(CryptoFiatContext);
@@ -106,7 +105,7 @@ export function FundingRouteMenuItem({
       <MenuItem.FramedIcon icon="Coins" circularFrame />
       <MenuItem.PriceDisplay
         use={<Heading size="xSmall" />}
-        fiatAmount={`${textConfig.currency.usdEstimate}${usdBalance}`}
+        fiatAmount={`${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdBalance}`}
         price={tokenValueFormat(firstFundingStep.fundingItem.userBalance.formattedBalance)}
       />
       <MenuItem.Label sx={{ display: 'flex', wordBreak: 'default' }}>
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx
index ce74cfcaea..600032fb43 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx
@@ -5,6 +5,7 @@ import {
 } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FooterLogo } from '../../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../../components/SimpleLayout/SimpleLayout';
@@ -16,7 +17,6 @@ import { ViewActions, ViewContext } from '../../../../context/view-context/ViewC
 import { FundingRouteMenuItem } from '../FundingRouteMenuItem/FundingRouteMenuItem';
 import { FundingRouteDrawer } from '../FundingRouteSelectDrawer/FundingRouteDrawer';
 import { PurchaseMenuItem } from '../PurchaseMenuItem/PurchaseMenuItem';
-import { text } from '../../../../resources/text/textConfig';
 import { sendSaleWidgetCloseEvent } from '../../SaleWidgetEvents';
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
 import { useSaleContext } from '../../context/SaleContextProvider';
@@ -27,7 +27,7 @@ type FundingRouteSelectProps = {
 };
 
 export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: FundingRouteSelectProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const [smartCheckoutDrawerVisible, setSmartCheckoutDrawerVisible] = useState(false);
   const [activeFundingRouteIndex, setActiveFundingRouteIndex] = useState(0);
   const { viewDispatch } = useContext(ViewContext);
@@ -75,16 +75,16 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
       >
 
         <Heading size="small">
-          {textConfig.fundingRouteSelect.heading}
+          {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.heading')}
         </Heading>
 
         {fundingRoutes.length === 0
           ? [
             <Body key="noRoutesAvailableText" size="small">
-              {textConfig.fundingRouteSelect.noRoutesAvailable}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.noRoutesAvailable')}
             </Body>,
             <Button key="payWithCardButton" variant="tertiary">
-              {textConfig.fundingRouteSelect.payWithCard}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCard')}
             </Button>,
           ]
           : [
@@ -98,10 +98,10 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
             />,
             <PurchaseMenuItem key="purchaseMenuItem" fundingRoute={fundingRoutes[activeFundingRouteIndex]} />,
             <Button key="continueButton" sx={{ mt: 'auto' }} variant="primary" onClick={onClickContinue}>
-              {textConfig.fundingRouteSelect.continue}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.continue')}
             </Button>,
             <Button key="payWithCardButton" variant="tertiary" onClick={() => goBackToPaymentMethods()}>
-              {textConfig.fundingRouteSelect.payWithCardInstead}
+              {t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCardInstead')}
             </Button>,
           ] }
 
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelectDrawer/FundingRouteDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelectDrawer/FundingRouteDrawer.tsx
index 7d5259f14e..8f5c9e7c51 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelectDrawer/FundingRouteDrawer.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelectDrawer/FundingRouteDrawer.tsx
@@ -2,9 +2,8 @@ import {
   Drawer,
 } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
+import { useTranslation } from 'react-i18next';
 import { FundingRouteMenuItem } from '../FundingRouteMenuItem/FundingRouteMenuItem';
-import { text } from '../../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 
 type FundingRouteDrawerProps = {
   visible: boolean;
@@ -17,7 +16,7 @@ export function FundingRouteDrawer({
   visible, onCloseDrawer, fundingRoutes, activeFundingRouteIndex,
 }:
 FundingRouteDrawerProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const onClickMenuItem = (selectedFundingRouteIndex: number) => {
     onCloseDrawer(selectedFundingRouteIndex);
   };
@@ -28,7 +27,7 @@ FundingRouteDrawerProps) {
       onCloseDrawer={() => onCloseDrawer(activeFundingRouteIndex)}
       visible={visible}
       showHeaderBar
-      headerBarTitle={textConfig.fundingRouteDrawer.header}
+      headerBarTitle={t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteDrawer.header')}
     >
       <Drawer.Content>
         {fundingRoutes.map((fundingRoute: FundingRoute, i: number) => (
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
index 790731fe65..d55f1f3544 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
@@ -1,7 +1,5 @@
 import { IconProps, MenuItem } from '@biom3/react';
-
-import { text } from '../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
+import { useTranslation } from 'react-i18next';
 import { PaymentTypes } from '../types';
 
 export interface PaymentOptionProps {
@@ -11,17 +9,15 @@ export interface PaymentOptionProps {
 }
 
 export function PaymentOption(props: PaymentOptionProps) {
+  const { t } = useTranslation();
   const { type, onClick, disabled } = props;
-  const { options } = text.views[SaleWidgetViews.PAYMENT_METHODS];
-  const optionText = options[type];
+  // const optionText = options[type];
 
   const icon: Record<string, IconProps['icon']> = {
     [PaymentTypes.CRYPTO]: 'Coins',
     [PaymentTypes.FIAT]: 'BankCard',
   };
 
-  if (!optionText) return null;
-
   const handleClick = () => onClick(type);
 
   return (
@@ -36,10 +32,10 @@ export function PaymentOption(props: PaymentOptionProps) {
       disabled={disabled}
     >
       <MenuItem.FramedIcon icon={icon[type]} />
-      <MenuItem.Label size="medium">{optionText.heading}</MenuItem.Label>
+      <MenuItem.Label size="medium">{t(`views.PAYMENT_METHODS.options.${type}.heading`)}</MenuItem.Label>
       {!disabled && <MenuItem.IntentIcon />}
       <MenuItem.Caption>
-        {disabled ? optionText.disabledCaption : optionText.caption}
+        {t(`views.PAYMENT_METHODS.options.${type}.${disabled ? 'disabledCaption' : 'caption'}`)}
       </MenuItem.Caption>
     </MenuItem>
   );
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx
index 8d8f6f928e..1076fcc682 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx
@@ -1,10 +1,9 @@
 import { Heading, MenuItem } from '@biom3/react';
 import { FundingRoute } from '@imtbl/checkout-sdk';
 import { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSaleContext } from '../../context/SaleContextProvider';
 import { calculateCryptoToFiat, tokenValueFormat } from '../../../../lib/utils';
-import { text } from '../../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../../context/view-context/SaleViewContextTypes';
 import { CryptoFiatContext } from '../../../../context/crypto-fiat-context/CryptoFiatContext';
 
 type PurchaseMenuItemProps = {
@@ -12,7 +11,7 @@ type PurchaseMenuItemProps = {
 };
 
 export function PurchaseMenuItem({ fundingRoute }: PurchaseMenuItemProps) {
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
+  const { t } = useTranslation();
   const { items } = useSaleContext();
   const firstItem = items[0];
   const firstFundingStep = fundingRoute.steps[0];
@@ -53,7 +52,7 @@ export function PurchaseMenuItem({ fundingRoute }: PurchaseMenuItemProps) {
         use={<Heading size="xSmall" />}
         price={`${firstFundingStep?.fundingItem.token.symbol} 
           ${tokenValueFormat(firstFundingStep.fundingItem.fundsRequired.formattedAmount)}`}
-        fiatAmount={`${textConfig.currency.usdEstimate}${usdPurchaseAmount}`}
+        fiatAmount={`${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdPurchaseAmount}`}
       />
       <MenuItem.Label>
         {firstItem?.name}
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
index f02c5faa12..743aad39ae 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
@@ -1,10 +1,8 @@
 import { useMemo } from 'react';
-
+import { useTranslation } from 'react-i18next';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { TransakIframe } from '../../../components/Transak/TransakIframe';
 import { TransakNFTData } from '../../../components/Transak/TransakTypes';
-import { text as textConfig } from '../../../resources/text/textConfig';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { SaleErrorTypes } from '../types';
 
 export interface WithCardProps {
@@ -17,6 +15,7 @@ export interface WithCardProps {
 }
 
 export function WithCard(props: WithCardProps) {
+  const { t } = useTranslation();
   const {
     onInit,
     onOpen,
@@ -25,7 +24,6 @@ export function WithCard(props: WithCardProps) {
     onOrderCompleted,
     onOrderFailed,
   } = props;
-  const { screenTitle, loading } = textConfig.views[SaleWidgetViews.PAY_WITH_CARD];
   const {
     recipientEmail, recipientAddress, isPassportWallet, signResponse, goToErrorView,
   } = useSaleContext();
@@ -59,8 +57,8 @@ export function WithCard(props: WithCardProps) {
       email={recipientEmail}
       walletAddress={recipientAddress}
       isPassportWallet={isPassportWallet}
-      exchangeScreenTitle={screenTitle}
-      loadingText={loading}
+      exchangeScreenTitle={t('views.PAY_WITH_CARD.screenTitle')}
+      loadingText={t('views.PAY_WITH_CARD.loading')}
       nftData={nftData}
       calldata={executeTxn.rawData}
       cryptoCurrencyCode={signResponse.order.currency.name}
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/FundWithSmartCheckout.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/FundWithSmartCheckout.tsx
index a6b3a7a8ad..d65d59eb08 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/FundWithSmartCheckout.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/FundWithSmartCheckout.tsx
@@ -5,12 +5,12 @@ import {
   useEffect,
   useMemo, useRef, useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   FundWithSmartCheckoutSubViews,
   SaleWidgetViews,
 } from '../../../context/view-context/SaleViewContextTypes';
 import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
-import { text } from '../../../resources/text/textConfig';
 import { LoadingView } from '../../../views/loading/LoadingView';
 import { FundingRouteExecute } from '../components/FundingRouteExecute/FundingRouteExecute';
 import { FundingRouteSelect } from '../components/FundingRouteSelect/FundingRouteSelect';
@@ -24,14 +24,13 @@ type FundWithSmartCheckoutProps = {
 };
 
 export function FundWithSmartCheckout({ subView }: FundWithSmartCheckoutProps) {
+  const { t } = useTranslation();
   const { sendPageView } = useSaleEvent();
   const { viewDispatch } = useContext(ViewContext);
   const [selectedFundingRoute, setSelectedFundingRoute] = useState<
   FundingRoute | undefined
   >(undefined);
   const [fundingRouteStepIndex, setFundingRouteStepIndex] = useState<number>(0);
-  const textConfig = text.views[SaleWidgetViews.FUND_WITH_SMART_CHECKOUT];
-
   const { querySmartCheckout, fundingRoutes, smartCheckoutResult } = useSaleContext();
   const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
 
@@ -105,7 +104,7 @@ export function FundWithSmartCheckout({ subView }: FundWithSmartCheckoutProps) {
   return (
     <Box>
       {subView === FundWithSmartCheckoutSubViews.INIT && (
-        <LoadingView loadingText={textConfig.loading.checkingBalances} />
+        <LoadingView loadingText={t('views.FUND_WITH_SMART_CHECKOUT.loading.checkingBalances')} />
       )}
       {subView === FundWithSmartCheckoutSubViews.FUNDING_ROUTE_SELECT && (
         <FundingRouteSelect
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx
index c150078407..b419faddca 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx
@@ -1,15 +1,13 @@
 import { useEffect, useRef } from 'react';
-
-import { text as textConfig } from '../../../resources/text/textConfig';
+import { useTranslation } from 'react-i18next';
 import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { LoadingView } from '../../../views/loading/LoadingView';
 import { useSaleEvent } from '../hooks/useSaleEvents';
 
 export function PayWithCoins() {
+  const { t } = useTranslation();
   const processing = useRef(false);
-  const text = textConfig.views[SaleWidgetViews.PAYMENT_METHODS];
-
   const { sendPageView, sendTransactionSuccessEvent } = useSaleEvent();
   const {
     execute, signResponse, executeResponse, goToSuccessView,
@@ -17,12 +15,12 @@ export function PayWithCoins() {
   const expectedTxns = signResponse?.transactions.length || 0;
   const executedTxns = executeResponse?.transactions.length || 0;
 
-  let loadingText = text.loading.ready;
+  let loadingText = t('views.PAYMENT_METHODS.loading.ready');
 
   if (signResponse !== undefined) {
-    loadingText = text.loading.confirm;
+    loadingText = t('views.PAYMENT_METHODS.loading.confirm');
   } else if (executedTxns > 0 && executedTxns === expectedTxns) {
-    loadingText = text.loading.processing;
+    loadingText = t('views.PAYMENT_METHODS.loading.processing');
   }
 
   if (signResponse !== undefined) {
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
index 4a929aa099..a0a2ae65ea 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
@@ -1,12 +1,11 @@
 import { Banner, Box, Heading } from '@biom3/react';
 import { useContext, useEffect } from 'react';
 
+import { useTranslation } from 'react-i18next';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { FundWithSmartCheckoutSubViews, SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
-import { text as textConfig } from '../../../resources/text/textConfig';
-
 import {
   SharedViews,
   ViewActions,
@@ -14,13 +13,12 @@ import {
 } from '../../../context/view-context/ViewContext';
 
 import { PaymentOptions } from '../components/PaymentOptions';
-
 import { useSaleContext } from '../context/SaleContextProvider';
 import { useSaleEvent } from '../hooks/useSaleEvents';
 import { PaymentTypes } from '../types';
 
 export function PaymentMethods() {
-  const text = { methods: textConfig.views[SaleWidgetViews.PAYMENT_METHODS] };
+  const { t } = useTranslation();
   const { viewState, viewDispatch } = useContext(ViewContext);
   const {
     paymentMethod, setPaymentMethod, sign, disabledPaymentTypes,
@@ -51,7 +49,7 @@ export function PaymentMethods() {
           type: ViewActions.UPDATE_VIEW,
           view: {
             type: SharedViews.LOADING_VIEW,
-            data: { loadingText: text.methods.loading.ready },
+            data: { loadingText: t('views.PAYMENT_METHODS.loading.ready') },
           },
         },
       });
@@ -75,7 +73,7 @@ export function PaymentMethods() {
       <Banner>
         <Banner.Icon icon="InformationCircle" />
         <Banner.Caption>
-          {text.methods.insufficientCoinsBanner.caption}
+          {t('views.PAYMENT_METHODS.insufficientCoinsBanner.caption')}
         </Banner.Caption>
       </Banner>
     </Box>
@@ -108,7 +106,7 @@ export function PaymentMethods() {
             paddingX: 'base.spacing.x4',
           }}
         >
-          {text.methods.header.heading}
+          {t('views.PAYMENT_METHODS.header.heading')}
         </Heading>
         <Box sx={{ paddingX: 'base.spacing.x2' }}>
           <PaymentOptions disabledOptions={disabledPaymentTypes} onClick={handleOptionClick} />
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/SaleErrorView.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/SaleErrorView.tsx
index ab82103dfc..4e20acc74e 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/SaleErrorView.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/SaleErrorView.tsx
@@ -1,9 +1,8 @@
 import { BaseTokens } from '@biom3/design-tokens';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { StatusType } from '../../../components/Status/StatusType';
 import { StatusView, StatusViewProps } from '../../../components/Status/StatusView';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
-import { text } from '../../../resources/text/textConfig';
 import { PaymentTypes, SaleErrorTypes } from '../types';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { sendSaleWidgetCloseEvent } from '../SaleWidgetEvents';
@@ -16,20 +15,13 @@ interface ErrorHandlerConfig {
   statusIconStyles?: Record<string, string>;
 }
 
-interface ErrorTextConfig {
-  description: string;
-  primaryAction?: string;
-  secondaryAction?: string;
-}
-
-type AllErrorTextConfigs = Record<SaleErrorTypes, ErrorTextConfig>;
-
 type SaleErrorViewProps = {
   errorType: SaleErrorTypes | undefined,
   biomeTheme: BaseTokens
 };
 
 export function SaleErrorView({ errorType = SaleErrorTypes.DEFAULT, biomeTheme }: SaleErrorViewProps) {
+  const { t } = useTranslation();
   const { goBackToPaymentMethods } = useSaleContext();
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
 
@@ -100,15 +92,14 @@ export function SaleErrorView({ errorType = SaleErrorTypes.DEFAULT, biomeTheme }
   };
 
   const getErrorViewProps = (): StatusViewProps => {
-    const errorTextConfig: AllErrorTextConfigs = text.views[SaleWidgetViews.SALE_FAIL].errors;
     const handlers = errorHandlersConfig[errorType] || {};
 
     return {
       testId: 'fail-view',
-      statusText: errorTextConfig[errorType].description,
-      actionText: errorTextConfig[errorType]?.primaryAction,
+      statusText: t(`views.SALE_FAIL.errors.${errorType}.description`),
+      actionText: t(`views.SALE_FAIL.errors.${errorType}.primaryAction`),
       onActionClick: handlers?.onActionClick,
-      secondaryActionText: errorTextConfig[errorType].secondaryAction,
+      secondaryActionText: t(`views.SALE_FAIL.errors.${errorType}.secondaryAction`),
       onSecondaryActionClick: handlers?.onSecondaryActionClick,
       onCloseClick: closeWidget,
       statusType: handlers.statusType,
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/SaleSuccessView.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/SaleSuccessView.tsx
index ee4b9f730a..a57440a61f 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/SaleSuccessView.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/SaleSuccessView.tsx
@@ -1,4 +1,4 @@
-import { text } from '../../../resources/text/textConfig';
+import { useTranslation } from 'react-i18next';
 import { StatusView } from '../../../components/Status/StatusView';
 import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { useSaleEvent } from '../hooks/useSaleEvents';
@@ -8,6 +8,7 @@ export type SaleSuccessViewProps = {
   data: Record<string, any>;
 };
 export function SaleSuccessView({ data }: SaleSuccessViewProps) {
+  const { t } = useTranslation();
   const { sendCloseEvent, sendSuccessEvent } = useSaleEvent();
 
   const closeWidget = () => {
@@ -16,8 +17,8 @@ export function SaleSuccessView({ data }: SaleSuccessViewProps) {
 
   return (
     <StatusView
-      statusText={text.views[SaleWidgetViews.SALE_SUCCESS].text}
-      actionText={text.views[SaleWidgetViews.SALE_SUCCESS].actionText}
+      statusText={t('views.SALE_SUCCESS.text')}
+      actionText={t('views.SALE_SUCCESS.actionText')}
       onRenderEvent={() => {
         const { transactions, ...rest } = data;
         sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, transactions, rest);
diff --git a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx
index 56702bed07..c99d510caf 100644
--- a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx
+++ b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx
@@ -82,16 +82,16 @@ export function SaleUI() {
   const passportInstance = useMemo(() => usePassportInstance(JSON.parse(passportConfig)), []);
   const checkout = useMemo(() => new Checkout({baseConfig: {environment: Environment.SANDBOX}, passport: passportInstance as unknown as Passport}), [passportInstance])
   const factory = useMemo(() => new WidgetsFactory(checkout, {theme: WidgetTheme.DARK}), [checkout])
-  const saleWidget = useMemo(() => factory.create(WidgetType.SALE, { config: { theme: WidgetTheme.DARK } }), 
+  const saleWidget = useMemo(() => factory.create(WidgetType.SALE, { config: { theme: WidgetTheme.DARK } }),
   [factory, amount, environmentId, fromTokenAddress, defaultItems]
   )
 
   // mount sale widget and subscribe to close event
   useEffect(() => {
     saleWidget.mount("sale", {
-      amount, 
-      environmentId, 
-      fromTokenAddress, 
+      amount,
+      environmentId,
+      fromTokenAddress,
       items: defaultItems
     });
     saleWidget.addListener(SaleEventType.CLOSE_WIDGET, () => { saleWidget.unmount()})
@@ -155,14 +155,16 @@ export function SaleUI() {
     <>
     <div id="sale"></div>
     <button onClick={() => saleWidget.mount('sale', {
-      amount, 
-      environmentId, 
-      fromTokenAddress, 
+      amount,
+      environmentId,
+      fromTokenAddress,
       items: defaultItems
     })}>Mount</button>
     <button onClick={() => saleWidget.unmount()}>Unmount</button>
     <button onClick={() => saleWidget.update({config: {theme: WidgetTheme.LIGHT}})}>Update Config Light</button>
     <button onClick={() => saleWidget.update({config: {theme: WidgetTheme.DARK}})}>Update Config Dark</button>
+    <button onClick={() => saleWidget?.update({ config: { language: 'en'}})}>EN</button>
+    <button onClick={() => saleWidget?.update({ config: { language: 'ja'}})}>JA</button>
       <br />
       <br />
       <br />