Overview

This section describes the following Simply Connect 2.0 user-interface customization topics:

• Locale (language), Country, and Currency
• Text and Translation Customization
  • Message Customization
• Response Customization 
  • Simply Connect Message Mode
  • Personalized Message Mode

Locale, Country, and Currency

Locale sets the language used in the payment page. Country and currency are used to filter supported relevant payment methods displayed to the customer.

Example

simplyConnect({…
    uiConfig:{
        country: 'DE',
        locale: 'en', // de, es, fr, it, pt, ru…
        }
});

Text and Translation Customization

The i18n class is used to internationalize text and messages, by defining alternative custom text and messages which override existing defaults. For example, text displayed on ‘card labels’ can be set to one of the following supported languages: French, German, Hebrew, Italian, Polish, Portuguese, Russian, and Spanish.

Example of i18n

cc_card                                     : Card
lbl_my_methods                              : My payment methods
lbl_other_methods                           : Select your payment method
lbl_pm_details                              : Payment details
delete_payment_token_title                  : Delete payment token
btn_pay_with                                : Pay with
msg_success                                 : Success
msg_success_text                            : Your transaction was successfully approved.
btn_ok                                      : OK
remove_payment_method                       : Remove payment method
msg_del_confirm_msg                         : Once removed, this payment method will no longer be available. Are you sure?
btn_yes_remove_it                           : Yes. Remove it.
btn_cancel                                  : Cancel
btn_remove                                  : Remove
msg_declined                                : Declined
msg_trx_failed_text                         : Your payment transaction has failed. Would you like to enter new payment details and try again?
msg_payment_already_performed               : Payment was already performed!
btn_refresh                                 : Refresh
msg_refresh_invalid_session                 : Looks like you are taking your time. Click the refresh button to try again.
msg_pending                                 : Transaction pending
msg_apm_redirect                            : Don’t see the {label} purchase page? We will help you return to the window to complete your purchase.
lbl_card_number                             : Card Number
lbl_cvv                                     : CVV
lbl_expiry_date                             : Expiry Date
lbl_card_holder_name                        : Cardholder Name
ph_card_number                              : 1234-5678-1234-5678
ph_cvv                                      : 123
ph_mm_yy                                    : MM/YY
ph_name_on_card                             : John Smith
btn_close                                   : Close
btn_pay                                     : Pay
btn_continue                                : Continue
lbl_save_details                            : Save my details for future use
lbl_always_save_card_details_msg            : By continuing, you are agreeing to the secure storing of your card details for future use.
lbl_always_save_card_details_terms          : For details regarding how and when your card details will be used, please see here.
lbl_always_save_account_credentials_msg     : By continuing, you are agreeing to the secure storing of your account credentials for future use.
lbl_always_save_account_credentials_terms   : For details regarding how and when your account credentials will be used, please see here.
err_invalid_cardholder_name                 : Invalid cardholder name
err_invalid_cardholder_name_characters      : Please provide a valid cardholder name as printed on the card
err_invalid_creditcard                      : Please enter a valid card number
err_invalid_expiration_date                 : Invalid expiration date
err_invalid_cvv                             : CVV is invalid
err_required_field                          : This field is required.
err_ACG_AccountNumber_maxlength             : Please enter at most 17 characters
err_ACG_RoutingNumber_exactlength           : The field must be exactly 9 digits.
lbl_show_more                               : Show more
lbl_show_less                               : Show less
add_upo_success_title                       : Success
add_upo_decline_title                       : Declined
your_account_was_added_msg                  : Your {0} account added
something_went_wrong_msg                    : Something went wrong
enter_amount                                : Enter Amount
open_amount_label                           : Min {0} - Max {1}
not_in_range_open_amount                    : You must enter an amount between {0} and {1}
block_card_msg                              : {0} cards cannot be processed
msg_card_paste_blocked                      : Cannot paste card number
lbl_or_pay_with                             : Or Pay with
lbl_or_pay_with_card                        : Or pay with card
lbl_promo_code                              : Have a promotional code?
ph_promo_code                               : Promotional Code
err_promo_code                              : Promotional code cannot be empty
max_cards_msg                               : You cannot save any new additional cards
max_apm_upos_msg                            : You cannot save any new additional payment methods
one_per_apm_msg                             : Only one {0} account is allowed
select_pm_not_available                     : {0} is not available for selection for this customer
select_upo_not_available                    : UPO cannot be selected.
lbl_scan_card_button                        : Scan card

Message Customization

A merchant can add a custom message key per payment method in one of three possible positions. The key format is paymentname_position, in which:

• paymentname is a specific payment method (for example, cc_card)
• possible values for position are aboveButton, aboveDetails, or belowButton

The keys support specified languages including English, HTML tagging, and unlimited character length.

Generic example

card_aboveButton : "Custom text above button for card payments."

JavaScript example

simplyConnect({
    uiConfig:{
        i18n: {
            card_aboveButton: "Custom text above button for card payments.",
            card_aboveDetails: "Custom text above payment details for card payments.",
           card_belowButton: "Custom text below button for card payments.",
        },
    }
});

Response Customization

Each time a payment-transaction attempt ends (with status declined or approved), the user must be notified of the result. With Simply Connect 2.0, the UI/UX of the notification messages to the user can be controlled, via the following modes.

Simply Connect Message Mode

Nuvei’s default user-interface and user-experience can be used for a response message, to control the user-interface, and to specify a message text. The default behavior means that showResponseMessage is set to true on the simplyConnect() call and a standard payment message is shown:

A merchant can control:

• Styling. See UI Customization.
• Error message using error_i18n. See Message Customization.

Example of class as part of the simplyConnect() method

simplyConnect({…
   uiConfig: {
        error_i18n: {
            decline: "Your payment request was denied",
            timeoutretry: "Please try again",
            donothonor: "Please contact your bank"
       },
   },
});

• Map any decline reason to a customized message to the end-user. The key for the error_i8n block is as follows:
  • The decline reason. See Gateway Decline Reasons.
  • Remove all spaces
  • Remove all special characters (eg. ‘/’)
  • Lower case

Example

‘Timeout/Retry’ becomes ‘timeoutretry’.

Personalized Message Mode

A merchant can disable a default payment message and handle the communication with the end-user as the merchant prefers. For example, the merchant could display a specific message or redirect to another page.

• Set showResponseMessage to false on the simplyConnect() call.
• Use the onResult event callback to receive the transaction output and to display the correct message to the user.
• [Optional] Use the Simply Connect methods removeOverlay(), applyOverlay(), or destroy() to control the payment user-interface according to a specific behavior. See Simply Connect 2.0 Methods.