Localization

Supported Locales

English (US)

en-US

English (UK)

en-GB

German

de-DE

Spanish

es-ES

French

fr-FR

Italian

it-IT

Polish

pl-PL

Portuguese

pt-PT

Romanian

ro-RO

Russian

ru-RU

Turkish

tr-TR

Finnish

fi-FI

Norwegian

no-NO

English (US)

en-US

English (UK)

en-GB

German

de-DE

Spanish

es-ES

French

fr-FR

Italian

it-IT

Polish

pl-PL

Portuguese

pt-PT

Romanian

ro-RO

Russian

ru-RU

Turkish

tr-TR

Finnish

fi-FI

Norwegian

no-NO

Locale Code	Language	Region
`en-US`	English	United States
`en-GB`	English	United Kingdom
`de-DE`	German	Germany
`es-ES`	Spanish	Spain
`fr-FR`	French	France
`it-IT`	Italian	Italy
`pl-PL`	Polish	Poland
`pt-PT`	Portuguese	Portugal
`ro-RO`	Romanian	Romania
`ru-RU`	Russian	Russia
`tr-TR`	Turkish	Turkey
`fi-FI`	Finnish	Finland
`no-NO`	Norwegian	Norway

Setting the Locale

You can set the locale when initializing the widget:

const widget = PaySightSDK.createWidget({
  targetId: 'payment-form',
  config: {
    // Required fields
    productId: 123,
    sessionId: 'session_xyz',
    amount: 9999,
    environment: 'production',
    
    // Set the locale
    locale: 'fr-FR', // French (France)
  }
});

You can set the locale when initializing the widget:

const widget = PaySightSDK.createWidget({
  targetId: 'payment-form',
  config: {
    // Required fields
    productId: 123,
    sessionId: 'session_xyz',
    amount: 9999,
    environment: 'production',
    
    // Set the locale
    locale: 'fr-FR', // French (France)
  }
});

You can update the locale after the widget has been initialized:

widget.update({
  locale: 'de-DE' // German (Germany)
});

Localization Effects

Locale	Date Format	Example
`en-US`	MM/YY	12/25
`en-GB`	MM/YY	12/25
`de-DE`	MM/JJ	12/25
`fr-FR`	MM/AA	12/25

Locale	Currency Format	Example
`en-US`	$X,XXX.XX	$1,234.56
`en-GB`	£X,XXX.XX	£1,234.56
`de-DE`	X.XXX,XX €	1.234,56 €
`fr-FR`	X XXX,XX €	1 234,56 €

Custom Button Text

Localization Best Practices

Default to Browser Locale

Consider detecting the user’s browser locale and setting the widget locale accordingly:

// Get browser locale or default to en-US
const getBrowserLocale = () => {
  const browserLocale = navigator.language;
  const supportedLocales = [
    'en-US', 'en-GB', 'de-DE', 'es-ES', 'fr-FR', 
    'it-IT', 'pl-PL', 'pt-PT', 'ro-RO', 'ru-RU', 
    'tr-TR', 'fi-FI', 'no-NO'
  ];
  
  // Check if browser locale is supported
  if (supportedLocales.includes(browserLocale)) {
    return browserLocale;
  }
  
  // Check if language part is supported (e.g., 'de' from 'de-CH')
  const languagePart = browserLocale.split('-')[0];
  const matchingLocale = supportedLocales.find(locale => 
    locale.startsWith(languagePart + '-')
  );
  
  return matchingLocale || 'en-US';
};

Provide Language Selection

Give users the ability to choose their preferred language:

// Example of a language selector implementation
const languageSelector = document.getElementById('language-selector');

languageSelector.addEventListener('change', (event) => {
  const newLocale = event.target.value;
  
  // Update the widget locale
  widget.updateConfig({
    locale: newLocale
  });
  
  // Optionally, save the user's preference
  localStorage.setItem('preferred-locale', newLocale);
});

Test with RTL Languages

If you plan to support right-to-left languages in the future, test your integration with RTL layout.

Ensure Consistent Experience

Make sure the rest of your application is localized to match the widget locale for a consistent user experience.

Complete Implementation Example

// Get browser locale or default to en-US
const getBrowserLocale = () => {
  const browserLocale = navigator.language;
  const supportedLocales = [
    'en-US', 'en-GB', 'de-DE', 'es-ES', 'fr-FR', 
    'it-IT', 'pl-PL', 'pt-PT', 'ro-RO', 'ru-RU', 
    'tr-TR', 'fi-FI', 'no-NO'
  ];
  
  // Check if browser locale is supported
  if (supportedLocales.includes(browserLocale)) {
    return browserLocale;
  }
  
  // Check if language part is supported (e.g., 'de' from 'de-CH')
  const languagePart = browserLocale.split('-')[0];
  const matchingLocale = supportedLocales.find(locale => 
    locale.startsWith(languagePart + '-')
  );
  
  return matchingLocale || 'en-US';
};

// Initialize widget with detected locale
const widget = PaySightSDK.createWidget({
  targetId: 'payment-form',
  config: {
    // Required fields
    productId: 123,
    sessionId: 'session_xyz',
    amount: 9999,
    environment: 'production',
    
    // Set locale based on browser
    locale: getBrowserLocale()
  }
});

// Setup language selector
const languageSelector = document.getElementById('language-selector');
if (languageSelector) {
  // Set initial value
  languageSelector.value = getBrowserLocale();
  
  // Handle language changes
  languageSelector.addEventListener('change', (e) => {
    const selectedLocale = e.target.value;
    widget.update({ locale: selectedLocale });
    
    // Optional: Update page content language
    document.documentElement.lang = selectedLocale.split('-')[0];
    
    // Optional: Store preference for future visits
    localStorage.setItem('preferredLocale', selectedLocale);
  });
}

Next Steps

Styling Guide

Learn how to customize the widget appearance to match your brand.

Events Guide

Understand how to handle widget events for a complete integration.

Technical Reference

View the complete API documentation for advanced usage.

Getting Started

Widget SDK

CRM Guides

​Localization

​Supported Locales

English (US)

English (UK)

German

Spanish

French

Italian

Polish

Portuguese

Romanian

Russian

Turkish

Finnish

Norwegian

English (US)

English (UK)

German

Spanish

French

Italian

Polish

Portuguese

Romanian

Russian

Turkish

Finnish

Norwegian

​Setting the Locale

​Localization Effects

​Custom Button Text

​Localization Best Practices

​Complete Implementation Example

​Next Steps

Styling Guide

Events Guide

Technical Reference

Localization

Supported Locales

Setting the Locale

Localization Effects

Custom Button Text

Localization Best Practices

Complete Implementation Example

Next Steps