Configuration
Update your payment form
You will need to update your server-side payment form to follow the structure shown in the mark-up below. This basic example will render a simple checkout that prompts the customer for their card details, and processes a payment:
<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"></div>
<button type="submit">Pay securely</button>
</form>
<script src=<DOMAIN>/js/v3/st.js></script>
<script>
(function() {
var st = SecureTrading({
jwt : 'We explain how to construct this on the next page'
});
st.Components();
})();
</script>
</body>
</html>
Replace <DOMAIN> with a supported domain. Click here for a full list.
| st-notification-frame | Optional | A <div> tag with attribute id=“st-notification-frame” can be included in the form to display invalid field and connection errors to the customer, so that they can resolve and retry the payment.
Note: If you are not using the Library to process the AUTH, we recommend that you do not include the st-notification-frame in your form, as this may cause conflicting confirmation messages to be displayed. e.g. The THREEDQUERY Authentication response may return success, but the subsequent authorisation may be declined. Click here for further information on using the JavaScript Library to process the 3-D Secure authentication but not the AUTH. |
| st-form | Required | You must ensure that your payment form has been assigned the id “st-form” and an action attribute that contains a valid URL address hosted on your server. The address specified must be able to handle the data returned in application/x-www-form-urlencoded format (see the example below). Click here for an example. |
| Payment divs | Required | The following fields are required in the payment form:
You must ensure that the card number, expiry date and security code DO NOT use an <input> tag, as doing so may lead to sensitive data being posted directly to your server. |
| st-animated-card | Optional | This is used to render a graphic of a card, which updates to show a preview of the customer’s card in real time as they type in their details. |
Initialise the Library
You will need to update your server-side payment form to include our “st.js” JavaScript Library. The JavaScript Library will process requests and handle the responses returned. When the customer enters their payment details into your form and submits, our st.js will contact the card issuer to determine if the card is enrolled. If the card issuer determines that there is an elevated risk of fraud, an overlay will automatically be displayed to the customer where they will be prompted for authentication.
To enable this behaviour, you will need to reference the JavaScript Library by including a defined configuration that uses a specific method (“st.Components”) within “st.js”.
Note: Ensure you include the anonymous function as shown in the example. This prevents the JS from being executed until the st.js has been loaded.
livestatus: 1.
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
livestatus: 1
});
st.Components();
})();
The example described above will allow you to start constructing your payment solution. While there are other parameters that can be configured in the library, we first recommend learning how to generate a JSON Web Token (JWT). These are used to verify that the data sent was not modified during the payment session.