Customising payment form text

You can specify custom wording for text displayed on the payment form. This will override the default labels and messages displayed.

  Advantages:

  • Provide alternative wording to the default phrases returned (e.g. to better reflect your brand’s voice).
  • Translate text into languages we don’t currently accept as a supported locale (as described on this page).

jsl-customformtext-01.png
Unmodified payment form with default appearance

 

Update your payment form

You will need to update your payment form to contain the dictionary translations. Within this dictionary, you can specify multiple keys, each of which is a message that can be returned by our JavaScript Library. For each message specified in the keys, you will then need to provide a corresponding phrase that will override them.

<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com" method="POST">
<div id="st-card-number" class="st-card-number"></div>
<div id="st-expiration-date" class="st-expiration-date"></div>
<div id="st-security-code" class="st-security-code"></div>
<button type="submit" id="st-form__submit" class="st-form__submit">
Pay securely
</button>
</form>
<script src=<DOMAIN>/js/v3/st.js></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
translations:{'An error occurred': 'INSERT YOUR CUSTOM PHRASE HERE'},
});
st.Components();
})();
</script>
</body>
</html>

Here is the full list of phrases for which custom text can be specified:
Important: These are case sensitive.

  • Notification frame messages
    • “A target element for the input field with id could not be found. Please check your configuration”
    • “Amount and currency are not set”
    • “An error occurred”
    • “Decline”
    • “Form is not valid”
    • “Invalid field”
    • “Invalid request”
    • “Invalid response”
    • “Merchant validation failure”
    • “Method not implemented”
    • “Payment has been cancelled”
    • “Payment has been successfully processed”
    • “Timeout”
    • “You are not logged to Apple account”

jsl-customformtext-02.png     jsl-customformtext-03.png
Before and after – Customising the notification frame messages

  • Payment form labels
    • “Card number”
    • “Expiration date”
    • “Security code”

jsl-customformtext-04.png     jsl-customformtext-05.png
Before and after – Customising the labels

  • Payment form button
    • “Pay”
    • “Processing”

jsl-customformtext-06.png     jsl-customformtext-07.png
Before and after – Customising the button

  • Payment form validation labels
    • “Field is required”
    • “Value is too short”
    • “Value mismatch pattern”

jsl-customformtext-08.png     jsl-customformtext-09.png
Before and after – Customising the validation labels

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request