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.

JavascriptHTML
Copy
Copied
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'
});
Copy
Copied
<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments-summary"></section>
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>

2. Add a button to trigger the update programmatically

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

HTMLJavaScript
Copy
Copied
<html>
  <body>
    <div id="app">
      <button id="update-locale">Update Locale to Spanish</button>
      <div class="form-wrapper">...</div>
    </div>
  </body>
</html>
Copy
Copied
const updateLocaleButton = document.querySelector('#update-locale');

updateButton.addEventListener('click', updateRebillyInstrument);

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

Copy
Copied
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).
Copy
Copied
async function updateRebillyInstrumentLocale(e) {
  ...
  try {
    await RebillyInstruments.update(newConfig);
  } catch (error){
    console.log('Error updating instruments: ', error);
  } finally {
    e.target.disabled = false;
  }
}

Interactive example

JavaScriptHTMLCSS
Copy
Copied
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;
  }
}
Copy
Copied
<html>
  <body>
    <div id="app">
      <button id="update-locale">Update locale to Spanish</button>
      <div class="form-wrapper">
        <section class="rebilly-instruments-summary"></section>
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>
Copy
Copied
body, html {
  background: #ffffff;
  padding: 0;
  margin: 0;
  text-align: center;
}

button {
  border: none;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 32px;
  margin: 40px 8px;
  cursor: pointer;
  border: 1px solid #0044d4;
  color: #0044d4;
  background: transparent;
  border-radius: 6px;
}

button:hover {
  background: #0044d4;
  color: #ffffff;
}

button:disabled {
  opacity: 0.5;
}