Customizing iframe labels

Background
Before starting this tutorial, make sure you understand the following topics from the Quick start section:

Nexio includes default labels for ecommerce and retail iframes in English and several other languages (for more information, see the Displaying translated or customized labels topic).

You can, however, customize these labels or add new translations by following these steps:

  1. Create a new text file and name it appropriately, with a .json extension.

    For example, if you want to create a translation of the labels in German, you could name it something like iframe_labels_deDE.json.

  2. Add all the keys for the labels to the text file.

    To download a sample file with all the keys, click the following link and then select the option to "download" the file: default.json

    Or, copy the JSON from the following example and paste it into your text file.

    {
      "Card Information": "",
      "Name": "",
      "as it appears on card": "",
      "Card Number": "",
      "Card number is invalid": "",
      "We only accept": "",
      "Expiration Date": "",
      "Select a date in the future": "",
      "Security Code": "",
      "Security code is invalid, must be 3-4 digits": "",
      "Billing Information": "",
      "Country": "",
      "Address 1": "",
      "Address 2": "",
      "City": "",
      "State / Province": "",
      "Postal Code": "",
      "eCheck Information": "",
      "Routing Number": "",
      "Routing Number is invalid, must be 9 digits": "",
      "Account Number": "",
      "Account number is invalid": "",
      "Submit": "",
      "You are now being redirected to Alipay for payment.": "",
      "Cancel": "",
      "Confirm": "",
      "Required": "",
      "Establishing secure connection to payment engine.": "",
      "Failed to connect to secure server. Please check your internet connection.": "",
      "Card Holder Security": "",
      "You are now being redirected to your bank for authentication.": "",
      "Redirecting to authentication page...": "",
      "Authentication completed!": "",
      "Authentication cancelled!": ""
    }
    

  3. For each label, add a custom value between the empty quotation marks: ""

    📘

    Note

    If you leave any value as an empty string or leave out the key entirely, the system uses the default value.

  4. Save the file.

  5. Move the file to a server where it can be accessed globally.

    This step varies based on the environment:

    • Sandbox: You may host the file anywhere.

      (For instructions on how to host your custom JSON file on GitHub, see this FAQ.)

    • Production: You must send the file to Integrations Support for approval.

      Note: After approval, we will host it on our secure servers and provide you with the URL to use.

    🚧

    Important

    The URL that you can use in the sandbox cannot be used for the production server.

    Make note of the URL for use in one-time-use token API requests. After getting the token, you use the token to load an iframe. When the iframe loads, the default labels are replaced with the values you provided.

Next step

Now that you have a custom file that is hosted, complete the steps in Displaying translated or customized labels.