Mail Order/Telephone Order (MOTO) payments
The JS library also comes with Mail Order & Telephone Order support (MOTO). MOTO allows our merchants to accept and manage payment card details over the phone or mail when the customer's card is not physically present.
Before getting started with MOTO, please ensure that you have an acquiring merchant ID that supports MOTO and that your sitereference has been configured with a MOTO account. If uncertain, please contact our Support Team for further information.
Accepting MOTO payments
To begin accepting MOTO payments, you will need to integrate our JS library's card components. Please Note: These are the same card components used by merchants accepting ecommerce (ECOM) payments.
Adding JS card components to your payment page
To add card components on to your payment page, follow the steps outlined below:
Add payment form
Start by adding our payment form in your HTML. For example:
<html>
<head>
</head>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<div id="st-card-number"></div>
<div id="st-expiration-date"></div>
<div id="st-security-code"></div>
<button type="submit">Pay securely</button>
</form>
</body>
</html>
If you need to modify the form id to be something other than "st-form", you can refer to our configuration guide and look for formId. However, the card component container ids e.g. st-card-number must be the same as the example shown above.
Initialise the JS and invoke the Components method
To render the card components, be sure to fetch our library from the Trust Payments CDN and inside an anonymous function, create an instance of SecureTrading. The SecureTrading constructor accepts a configuration object which must include a key of jwt, with a signed JSON Web Token (JWT) value created on your merchant server. The jwt payload contains all the information related to the payment transaction e.g., amount, billing, delivery and account type i.e. MOTO, etc
By calling st.Components, where st refers to your instance of SecureTrading, the library will embed each card component (pan, expiry date, cvv) on to the payment form inside of the root containers e.g. st-card-number will contain the pan input component.
For example:
<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"></div>
<div id="st-expiration-date"></div>
<div id="st-security-code" data-st-input-optional="true"></div>
<button type="submit">Pay securely</button>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script>
(function() {
var st = SecureTrading({
jwt : 'A signed JWT created on the merchant server'
});
st.Components();
})();
</script>
</body>
</html>When using the Content Delivery Network (CDN) to reference the st.js library, be aware that the CDN will block requests from your localhost/127.0.0.1 environment. To test your application locally with CDN, you will need to run your test application with your IPv4 address rather than localhost. After performing a lookup of your IPv4 address, you will need to replace localhost in your browser with the IP address retrieved.
Accepting MOTO payments without a CVV
For Mail Order/Telephone Order (MOTO) payments, you may not always require or have available to you the Card Verification Value (CVV) and for that reason the JS library allows you to configure the CVV field as optional in our payment form. To configure the CVV as optional, follow the steps outlined below:
Add data attribute to CVV root container
By setting the data attribute name data-st-input-optional="true" on the CVV root container i.e. st-security-code it ensures that the payment form can be submit without having first entered a value into the CVV input.
Please note: Even after setting the data attribute, if a partial or invalid CVV is entered, the standard CVV field validation will be enforced.
<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"></div>
<div id="st-expiration-date"></div>
<div id="st-security-code" data-st-input-optional="true"></div>
<button type="submit">Pay securely</button>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script>
(function() {
var st = SecureTrading({
jwt : 'A signed JWT created on the merchant server'
});
st.Components();
})();
</script>
</body>
</html>
Hide asterisk from CVV label (Optional)
Optionally you may choose to remove the asterisk next to the CVV input label to indicate that the CVV is not required. To prevent an asterisk from being displayed, please follow the steps outlined below:
Update your Styles configuration:
Using the styles options available in our JS, you can explicitly set "display-asterisk" as false to securityCode and this removes the asterisk only next to the CVV field label and the other card input labels remain unchanged.
<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"></div>
<div id="st-expiration-date"></div>
<div id="st-security-code" data-st-input-optional="true"></div>
<button type="submit">Pay securely</button>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script>
(function() {
var st = SecureTrading({
jwt : 'A signed JWT created on the merchant server',
"styles": {
"defaultStyles": {
},
"cardNumber": {
},
"expirationDate": {
},
"securityCode": {
"display-asterisk": false,
},
});
st.Components();
})();
</script>
</body>
</html>
Before Going live
- As with processing card payments for ecommerce, we recommend that you configure webhooks to notify your system of each new transaction processed.
- If your payment page uses a Content Security Policy, please review our CSP policy listing and update accordingly.
- Lastly, please review our go live checks before publishing your solution to production.
