Skip to main content

Translate and localize Payment Pages 2.0

Zuora

Translate and localize Payment Pages 2.0

This article describes how to add translations to your Payment Pages 2.0.

On the Add Translations to Hosted Payment Method page, you can do the following to add one or more translations to the payment page:

  1. Download Resource Bundle Template.
  2. Use the Resource Bundle Template to create a Resource Bundle translation file.
  3. Upload the translated Resource Bundle file and assign a locate to the translations.

Download Resource Bundle Template

The Resource Bundle Template is the template file you use to create translation files for Payment Pages 2.0.

To download the Resource Bundle Template:

  1. On the Preview Hosted Payment Method Page, click Go to the localization and translation setup page in the Page Preview section. Alternatively, in the Hosted Pages List, click Translate for the Payment Page.
  2. On the Add Translations to Hosted Payment Method page, click Resource Bundle Template to download the template file.

Translate Payment Pages 2.0

After you download the Resource Bundle Template, edit the file to provide translations for the texts and labels on the hosted payment page:

  1. Open the downloaded Resource Bundle Template file, resource_bundle_template.txt, in a text editor, and type the translated labels and texts for the keys. See the table below for descriptions of the keys.

    Do not remove any code lines from the Resource Bundle Template file.

  2. Save the resource file with a clearly identifiable locale name, such as resource_bundle_fr.txt for the French translation file. Use UTF-8 encoding, except for the following European languages, which require ISO-8859-1 encoding to correctly display the Payment Page form in their locales:
    • French
    • Canadian French
    • Italian

The following keys are available in the Resource Bundle Template for translation in all types of Payment Pages. There is a specific set of keys for each payment method type of Payment Pages.

Key Description
page.label.required Legend text for the required field mark
page.title Payment Pages 2.0 form title
page.desc Payment Pages 2.0 form description
page.selectOne Instruction text for the credit card expiration date pull-down menu
page.label.submit Label for the submit button
page.message.requiredField Error message for missing required fields
page.message.creditCard.blacklistedBin Error message for an invalid card prefix string defining cards that cannot be added
page.message.creditCard.cityBlocked Error message for an invalid city
page.message.creditCardNumber.invalidCreditCard Error message for an invalid credit card number
page.message.creditCardType.invalidCreditCardType Error message for an invalid credit card type
page.message.creditCardType.invalidCreditCardCVV Error message for an invalid CVV

Here is a sample resource file translated into French:

FrenchResourceFile.png

Upload the translated resource file and assign a locale

To upload the translated resource file:

  1. On the Add Translations to Hosted Payment Method page, click the Locale field and select the locale for the resource file that you are about to upload.
  2. Click Choose File.
  3. Select the file you translated and click Open.
  4. Click upload.
  5. Click preview hosted page to preview the payment page in the translated locale.

Configure Payment Pages 2.0 in multiple languages

Once you have uploaded your translations, your payment form can be displayed in multiple languages. In your client code, add a logic to assign the client locale parameter based on the client locale setting. At runtime, the translation is dynamically loaded based on the logic, and your payment form is displayed in user's locale.