Developer docs
/
Rebilly Instruments
/
Examples
/
Update the options property
Last updated

These docs are intended for a developer audience.

Programmatically update the locale

This example describes how to update the library's locale option programmatically. Use these principles to change any configuration of the mount object.

1. Basic library setup

If you have not already done so, complete the basic setup tutorial.

  1. JavaScript
  2. HTML
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  items: [
    {
      planId: 'my-plan-id',
      quantity: 1
    },
  ],
  locale: 'en'
});

2. Add a button to trigger the update programmatically

To trigger the update, add a button and attach a click event to it.

  1. HTML
  2. JavaScript
<html>
  <body>
    <div id="app">
      <button id="update-locale">Update Locale to Spanish</button>
      <div class="form-wrapper">...</div>
    </div>
  </body>
</html>

This example will focus on how to toggle between English and Spanish.

const appState = {
  localeChanged: false,
};

async function updateRebillyInstrumentLocale(e) {
  e.preventDefault();
  e.target.disabled = true;

  appState.localeChanged = !appState.localeChanged;

  const updatedLocale = appState.localeChanged ? 'es' : 'en';
  updateLocaleButton.textContent = appState.localeChanged
    ? 'Update Locale to English'
    : 'Update Locale to Spanish'
  const newConfig = {locale: updatedLocale};
  ...
}

3. Use RebillyInstruments.update to change options

Use the RebillyInstruments.update() method to update the configuration and re-render the User Interface (UI).

async function updateRebillyInstrumentLocale(e) {
  ...
  try {
    await RebillyInstruments.update(newConfig);
  } catch (error){
    console.log('Error updating instruments: ', error);
  } finally {
    e.target.disabled = false;
  }
}

Interactive example

  1. JavaScript
  2. HTML
  3. CSS
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  items: [
    {
      planId: 'my-plan-id',
      quantity: 1,
    }
  ],
  locale: 'en'
});

const appState = {
localeChanged: false,
};

async function updateRebillyInstrumentLocale(e) {
  e.preventDefault();
  e.target.disabled = true;

  appState.localeChanged = !appState.localeChanged;

  const updatedLocale = appState.localeChanged ? 'es' : 'en';
  updateLocaleButton.textContent = appState.localeChanged ? 'Update Locale to English' : 'Update Locale to Spanish'
  const newConfig = {locale: updatedLocale};
  try {
      await RebillyInstruments.update(newConfig);
  } catch (error){
      console.log('Error updating instruments: ', error);
  } finally {
      e.target.disabled = false;
  }
}