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).
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="<CDN_DOMAIN>"></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>
Replace <CDN_DOMAIN> with a supported domain. Click here for a full list.
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”
Before and after – Customising the notification frame messages
- Payment form labels
- “Card number”
- “Expiration date”
- “Security code”
Before and after – Customising the labels
- Payment form button
- “Pay”
- “Processing”
Before and after – Customising the button
- Payment form validation labels
- “Field is required”
- “Value is too short”
- “Value mismatch pattern”
Before and after – Customising the validation labels
