Contents

Collecting payment details

You can use our JavaScript Client SDK (“st.js”) to process payments without submitting the customer’s card details to your server, thereby simplifying the audit process for PCI DSS.

Your server-side payment form must assign all card details with the attribute “data-st-field”. During payment form submission, “st.js” will tokenise all fields with the attribute “data-st-field” to create a unique cachetoken.

This cachetoken is then submitted to your server, along with all other fields that do not have the attribute “data-st-field”.

 


 

 


 

Server-side payment form

The following is an example of a payment form:


<html>

<head>
    <style>
        #st-payment input.st-error {
            background-color: #ffc6c7;
            border: 2px solid #ffb5b5;
        }
        #st-message .st-error {
            background: #ffcdcd;
            border: 2px solid #ffb5b5;
            padding: 4px 4px 4px 28px !important;
        }
    </style>
</head>

<body>
    <div id="st-message"></div>
    <form id="st-payment" action="https://www.example.com">
    <!--Ensure all payment details use the data-st-field attribute.-->
        Pan: 
        <input type="text" data-st-field="pan" autocomplete="off" /></br>
        Expiry Month: 
        <input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
        Expiry Year: 
        <input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
        Security Code: 
        <input type="text" data-st-field="securitycode" autocomplete="off" /></br>
    <!--You can submit your own custom fields within this form, e.g. discount code-->
        Discount Code: 
        <input type="text" name="discountcode" autocomplete="off" /></br>
        <input type="submit" name="mybtn" />
    </form>
    <script src="https://webservices.securetrading.net/js/st.js"></script>
    <script>
        new SecureTrading.Standard({
            sitereference: "test_site12345", locale: "en_gb"
        });
    </script>
</body>
</html>
<html>

<!-- If you need to change the names of the identifiers “st-message” and “st-payment”, -->
<!-- because your application doesn’t support the naming convention used -->
<!-- (e.g. no hyphen support), you can use the markup found here to override them. -->

<head>
    <style>
        #st-payment input.st-error {
            background-color: #ffc6c7;
            border: 2px solid #ffb5b5;
        }
        #st-message .st-error {
            background: #ffcdcd;
            border: 2px solid #ffb5b5;
            padding: 4px 4px 4px 28px !important;
        }
    </style>
</head>

<body>
    <div id="stmessage"></div>
    <form id="stpayment" action="https://www.example.com">
    <!--Ensure all payment details use the data-st-field attribute.-->
        Pan: 
        <input type="text" data-st-field="pan" autocomplete="off" /></br>
        Expiry Month: 
        <input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
        Expiry Year: 
        <input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
        Security Code: 
        <input type="text" data-st-field="securitycode" autocomplete="off" /></br>
    <!--You can submit your own custom fields within this form, e.g. discount code-->
        Discount Code: 
        <input type="text" name="discountcode" autocomplete="off" /></br>
        <input type="submit" name="mybtn" />
    </form>
    <script src="https://webservices.securetrading.net/js/st.js"></script>
    <script>
        new SecureTrading.Standard({
            sitereference: "test_site12345",
            locale: "en_gb",
            messageId: "stmessage",
            formId: "stpayment",
        });
    </script>
</body>
</html>

 

To use the Client SDK, reference our “st.js” in your webpage’s HTML mark-up, as demonstrated in the payment form example above.

 

You must ensure that your payment form has been assigned the id “st-payment”. The following are required fields and must be included in the payment form:

After the customer clicks “Pay”, these fields are used to generate a unique cachetoken that will later be posted to your server, for the purpose of processing requests.

 

Clock
The cachetoken will expire 15 minutes after being generated.
Warning
You must ensure that the PAN, expiry date and security code use the “data-st-field” attribute and NOT the “name” attribute. Failing to do so may lead to sensitive data being posted directly to your server.

 

Any input fields that have the attribute “data-st-field” are transmitted directly to Secure Trading from the customer’s browser session in a secure manner. This means that these sensitive payment details are never submitted to your server.

 

A “div” element with attribute id=”st-message” is required, in order for invalid field and connection errors to be displayed, in cases when ‘st.js’ fails to generate a cachetoken

If there is an error during the cachetoken generation process, the optional CSS included in the server-side payment form example will highlight any invalid input fields on the form and style the error message returned.

Info
This library supports the AMD (Asynchronous Module Definition) API. This allows it to be loaded using RequireJS, CommonJS or through a normal <script> element inside your webpage’s HTML markup.

Ensure the action in the server-side payment form is a valid URL address hosted on your server. The address specified must be able to take the generated cachetoken and all fields without the “data-st-field” attribute, which are submitted to the Server SDK as a JSON request.

 


 

Callback prior to processing a payment

If you need to perform additional tasks after the cachetoken has been passed to the customer’s browser session, but before the payment form details are submitted to your server, you can do so by passing the submitFormCallback parameter to the SecureTrading.Standard library.


new SecureTrading.Standard({
    sitereference: "test_site12345",
    submitFormCallback: function(responseObj){
    var cachetoken = responseObj['response'][0]['cachetoken']; <!-- Grab token -->
    console.log(cachetoken); <!-- Logs the token to the console (Additional steps can be performed here before submitting to your server) -->
    document.getElementById(‘st-payment’).submit(); <!-- Submit the form -->
}

 


 

Language support

The response messages can be returned to the customer in the following languages:

By default, the response is returned in English. In order to change the default language, simply change the locale value in the payment form example above.

To return the response in the English language, set the locale to ‘en_gb’.
To return the response in the French language, set the locale to ‘fr_fr’.
To return the response in the German language, set the locale to ‘de_de’.

An example of a message returned to the customer – “There has been a problem with your payment, please verify your details and try again.”

 


 

Test credentials

You can process successful transactions by submitting the following test card numbers:

Payment type Test PAN Expiry date Security code
Visa 4111111111111111 12/2030 123
Mastercard 5100000000000511 12/2030 123


Note: Any expiry date submitted to our test bank is valid, providing the date is in the future.

Other cards are supported. Click here for further testing credentials.

 


Status good
Summary

You should now have a basic form that can be used to collect the customer’s payment details and send a cachetoken to your server.
The cachetoken can be used in conjunction with your installed library to process a request. Please proceed to step 3 to learn how to process your first request.