Contents

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.

Tick

Advantages:

  • Provide alternative wording to the default phrases returned (e.g. to better reflect your brand’s voice).
  • Provide additional info that may be specific to your business (e.g. including an order reference).
  • 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=<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.

 


 

 

     
Before and after – Customising the notification frame messages

 


 

 

    
Before and after – Customising the labels

 

 


 

 

    
Before and after – Customising the button

 


 

 

   
Before and after – Customising the validation labels