Billflow
  • Quick Start
  • Setup
    • First Time Setup
      • Connect & Setup Stripe
      • Invite Team Members
      • Create Your First Billing Page
      • Embed The Billing Page
      • Activate Live Payments
  • Billing Pages
    • Plan Picker
    • Checkout Form
    • Customer Portal
    • Pricing Page
    • Invoice Portal
  • How-to's
    • Setup Pricing
      • Flat-rate Subscriptions
      • Free Trial
      • Unit-based
      • Meter-based
      • Setup Fees
      • One-Time Payment
      • Payment Plans (Subscription Schedules)
      • Complex Pricing
      • Add-ons
    • Connect to SaaS
      • Using Stripe Webhooks
    • Change Style
      • Plan Picker Style Templates
      • Customer Portal Style Templates
      • Pricing Page Style Templates
      • Checkout Form Style Templates
    • Update Pricing
    • Use Coupons
    • Enable Quantity Management
    • Enterprise Sales Flow
    • Cancellations/Payment Failures
      • Set up Cancellation Feedback
      • Configure Dunning Emails
    • Automated emails
    • Internationalization
      • Support multiple currencies
      • Support multiple languages
    • Upgrade to new Billing Pages
    • Record Usage
    • VAT & Taxes
    • Indian Recurring Payments
  • No-code Integrations
    • No-code App Builders
      • Bubble
        • How to connect Stripe webhooks to Bubble
      • Webflow
      • WordPress
        • Add Widgets
        • Advanced Usage
        • Useful Plugins
      • Notion
      • Drupal
    • Rewardful
    • ChurnKey
  • Developer Docs
    • Embed Configurations
      • Plan Picker Configs
      • Checkout Form Configs
      • Customer Portal Configs
      • Pricing Page Configs
      • Invoice Portal Configs
    • Handling Events
    • Languages & Frameworks
    • Customize Elements
    • Versions & Beta Testing
  • Help
    • Managing Account & Team
      • Reset Your Password
      • Manage Team Members
    • Frequently Asked Questions
    • Changelog
Powered by GitBook
On this page
  • How does it work?
  • Current supported languages
  • Dashboard
  • Custom text override by key values
  • Backend URL
  • Advanced Usage
  • Embed configuration options
  • Backend usage
  • Example configuration
  • Translation files

Was this helpful?

  1. How-to's
  2. Internationalization

Support multiple languages

Features and advanced usage of language settings

PreviousSupport multiple currenciesNextUpgrade to new Billing Pages

Last updated 3 years ago

Was this helpful?

How does it work?

Our embeds will automatically detect your end user's browser language preference to determine what language the embed will render in. If the language is not supported by our embed, a default language will be displayed. The default language is English US.

Current supported languages

Language / Locale

Support

Code

English US

Default

en

Chinese (Simplified)

Yes

zh

Danish

Yes

da

French

Yes

fr

German

Yes

de

Italian

Yes

it

Polish

Yes

pl

Spanish

Yes

es

Norwegian

Yes

no

Brazilian Portuguese

Yes

pt-BR

More languages are coming soon! You can contribute and help us provide the embed in more languages by translating the into the language that you support as well. Just send us the translated files via the Intercom chat below.

Dashboard

On the Billflow dashboard, you will find the settings form for each embeds that looks like the following screenshot. In the following sections, we describe the with an example value for each settings field.

Custom text override by key values

For example:

{
    "SectionTitle_Pricing": "欢迎,请选择一个计划开始!"
}

Backend URL

A backend for the custom translation files that you'd like to provide.

https://storage.googleapis.com/your-i18n-custom/{{lng}}/{{ns}}.json"

Advanced Usage

The configuration options do not need to be changed at all for Internationalization to work, but it does unlock the ability for you to pass in your own language file, or change the default text in the embeds easily.

Embed configuration options

Property Name

Type

Required

Description

i18n.defaultLng

string

no

Changes the default language of the embed, overriding user browser preference. Example: "zh"

i18n.resources

array

no

An array of resource objects. Each object is a resource for a language and namespace.

i18n.resources[0].lng

string

yes

The language of this resource object

i18n.resources[0].ns

string

yes

The namespace of this resource object

i18n.resources[0].resource

object

yes

The resource object with key value pairs to provide a translation string to the language and namespace defined, where value is the translated string.

i18n.backend

object

no

You can use a backend, a file system of your own such as AWS s3 or Google cloud storage to provide translation files.

i18n.local_storage_caching

boolean

no

To disable use of browser local storage for caching i18n files, set this property to false, the default is true. Use this option if your application runs in an environment where local storage is not permitted.

Backend usage

You can provide a backend URL to the configuration, our embed will automatically fetch each file at render time.

Important!

Make sure CORS is enabled for dashboard.billflow.io and your website/webapp's domain on your server.

Translation files are cached for 3 hours in browser, when implementing a custom language file, please use a fresh Incognito window to see the changes.

Example: Using google cloud storage

  1. Create a bucket named your-i18n-custom

  2. Create a folder structure and files as follows (we are using French as an example)

    1. fr

      1. common.json

      2. portal.json

      3. pricing.json

      4. custom.json

You can even use this way to define your own custom English version, if for any reason you would like to change how your embed text is rendered in English. For example, if you want to change the Pricing page heading to say "Welcome, please pick a plan to start!" instead of the default text "Pricing", you can do that this way.

Example configuration

// Example i18n configuration

"options": {
   "i18n":{
      "defaultLng":"zh",
      "resources":[
         {
            "lng":"zh",
            "ns":"custom",
            "resource":{
               "SectionTitle_Pricing":"欢迎,请选择一个计划开始!"
            }
         }
      ],
      "backend":{
         "loadPath":"https://storage.googleapis.com/your-i18n-custom/{{lng}}/{{ns}}.json"
      }
   }
}

Translation files

These are the default English text that we are using in our embeds, you can download them and translation / change them the way you like it, then use your version in the embed!

This is a way for you to change some text for the language you chose. You can refer to the for your desired language to find the right key-value pairs and change the value to override the text.

Using this functionality you can also change the text of the Billflow pages for your default language. Use the keys in the to lookup the text you want to change, and pass in your desired wording like so:

You can find the appropriate keys by looking through one of the .

In each file, you can copy the contents and do your translation.

https://storage.googleapis.com/servicebot-i18n/en/billflow.json
https://storage.googleapis.com/servicebot-i18n/en/common.json
https://storage.googleapis.com/servicebot-i18n/en/portal.json
https://storage.googleapis.com/servicebot-i18n/en/pricing.json
https://storage.googleapis.com/servicebot-i18n/en/checkout.json
https://storage.googleapis.com/servicebot-i18n/en/moment.json
JSON fi
es
language files
translation files
English JSON files
English JSON files
You can put your custom translation in the box highlighted in this screenshot