Getting started
All businesses within the EEA (European Economic Area) will soon be mandated to be PSD2 compliant
By following the steps outlined in these documents, you will meet the requirements needed to continue processing e-commerce transactions.
What will the customer see?
The following diagrams show standard e-commerce transactions using 3-D Secure:
When payment is deemed low-risk
Frictionless payment allows for a streamlined checkout experience
- The customer enters their card details on your checkout and clicks on the “Pay” button.
- Data regarding the payment session and customer’s device is shared with the card issuer. The customer is deemed low-risk, so no action is needed on their part to verify their identity.
- Following these checks the payment will be processed. The checkout will then display a success message to the customer.
When payment is deemed high-risk
Customer will be challenged prior to completing the purchase
- The customer enters their card details on your checkout and clicks on the “Pay” button.
- Data regarding the payment session and customer’s device is shared with the card issuer. The customer is deemed high-risk, so their browser may display an overlay prompting them to complete some basic actions to authenticate their identity.
- Following any authentication steps required by the customer’s card issuer, the overlay will close automatically, and the payment will be processed. The checkout will then display a success message to the customer.
If the authentication fails, your checkout will display an error message and provide the customer an opportunity to re-attempt payment or provide an alternative card.
Authentication
When using the latest version of our client SDK (st.js v2), all e-commerce payments are automatically processed with 3-D Secure by default. 3-D Secure is a protocol overseen by card issuers, designed to reduce fraud and chargebacks by authenticating the customer’s identity at the point of sale. For a fully authenticated 3-D Secure transaction, in the event of a dispute at a later date, the card issuer will usually take liability of the chargeback instead of the merchant.
Benefits of 3-D Secure
-
Example 3-D Secure overlay displayed to the customer Enhanced data checks: Data regarding the payment session and customer’s device is shared with the card issuer, allowing for risk-based decisions without always needing to seek authentication from the customer. This reduces the time that the average consumer takes to complete a transaction.
- Easy authentication: Authentication can now be performed by biometrics (fingerprint / facial recognition) or sending a code to a customer’s mobile device. This makes it easier for your customers to complete payments and ultimately reduces shopping cart abandonment.
- Native mobile support: There is comprehensive support for modern mobile devices, simplifying the authentication process for all customers, regardless of the type of device used to process the payment.
Getting started
You need a user account with the role “Webservices JWT”.
If this user account has not already been provided, please request that one is created for your site(s) by contacting our Support Team.
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" 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/v2/st.js></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.Components();
})();
</script>
</body>
</html>
Replace <DOMAIN> with a supported domain. Click here for a full list.
Click here to learn how to generate the JWT for a test transaction JSON Web Tokens (JWT) are an open standard RFC 7519 method for securely transmitting data between two parties as a JSON object. This will contain data regarding how the payment is to be processed (e.g. the amount and currency). You can take the header and payload examples below, populate the payload details with your own credentials, and provide them to a JWT generating tool, such as the one found on https://jwt.io/ (Info on jwt.io) This should output a token, which is structured as three alphanumeric strings separated by dots (“.”). Click here for further information on generating the JWT.
{"alg":"HS256","typ":"JWT"}
{
"payload":
{
"accounttypedescription":"ECOM",
"baseamount":"1050",
"currencyiso3a":"GBP",
"sitereference":"INSERT SITE REFERENCE"
},
"iat":INSERT UNIX TIMESTAMP,
"iss":"INSERT JWT USERNAME"
}
(e.g. 1560352920 which translates to 06 June 2019 15:22 (UTC))
The payment must be processed within 15 minutes of this timestamp.
This will be your JWT username that you created above.
Save this as an HTML file or access the form on your server. Fill out the form and click “Pay” to perform a test transaction.
When testing, you can use the following test card details to simulate a “Successful” response:
- Visa card ‘4111 1111 1111 1111’ or Mastercard ‘5100 0000 0000 0511’
- Set expiry date to any valid date in the future
- Use security code “123”
After the customer has submitted the form, the “st.js” will open the overlay in the customer’s browser for authentication. The results of the authentication performed and the subsequent payment will be added to the form (with id=“st-form”), which will then be posted directly to the server specified in the action attribute of the form, in the format of an application/x-www-form-urlencoded POST.
When testing your integration, begin by checking the errorcode returned, and ensuring you are receiving “0”. This indicates a successful payment was processed.
You can check transactions by signing into MyST, our transaction management portal.
You have now processed a basic request.
