Update the configuration

This guide describes how to dynamically update the configuration of your Rebilly Instruments payment form in order to change the locale (language).

The Rebilly Instruments library provides an update() method you can use to modify any configuration property at runtime. This is useful for:

  • Changing the locale of the payment form.
  • Updating payment amounts dynamically.
  • Switching between different payment methods.
  • Modifying form styling or behavior.
Prerequisites

To complete this guide, you need to have:

  • A basic payment form using the Rebilly Instruments library.
  • Your publishable key, organization ID, and website ID.

If you have not set up a payment form using the Rebilly Instruments library, see Get started guides.

Step 1: Add the UI element

Add a button

Add a button to your HTML that users can click to change the language. This button triggers the locale update.

Step 2: Implement the update logic

Add code to handle the button click and update the configuration of the Rebilly Instruments library.

Mount the Rebilly Instruments library

Your existing RebillyInstruments.mount code remains unchanged. This step shows the initial setup for reference.

Track the current locale

Create a variable to track whether the locale has been changed. This helps toggle between languages.

Handle the button click

Add a click event listener to the button. When clicked, this triggers the locale update.

Determine the new locale

Toggle the locale state and determine the new language. Also update the button text to show the current language.

Update the Rebilly Instruments library

Call the update() method to change the locale and re-render the payment form with the new language.

All mount parameter properties can be updated using this method.

For more information, see RebillyInstrument.update().

Preview

Complete the payment flow using this test card number: 4111 1111 1111 1111. Use any future expiration date and any 3 digits for the CVC number. For more test cards, see Test payment cards, IBANs, and ACH details.

<!doctype html>
<html lang="en">
    <head>
        <script src="https://cdn.rebilly.com/instruments/@latest/core.js" type="text/javascript"></script>
        <script src="./index.js" type="text/javascript" defer></script>
    </head>
    <body>
        <button id="update-locale">Update locale to Spanish</button>
        <div class="rebilly-instruments-summary"></div>
        <div class="rebilly-instruments"></div>
    </body>
</html>