Contents

Getting started

Clock

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.

Click here for further information on this mandate

 


 

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

 

 

  1. The customer enters their card details on your checkout and clicks on the “Pay” button.
  2. 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.
  3. 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

 

 

  1. The customer enters their card details on your checkout and clicks on the “Pay” button.
  2. 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.
  3. 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

1

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.

2

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">
    <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: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7ImFjY291bnR0eXBlZGVzY3JpcHRpb24iOiJFQ09NIiwiYmFzZWFtb3VudCI6IjEwNTAiLCJjdXJyZW5jeWlzbzNhIjoiR0JQIiwic2l0ZXJlZmVyZW5jZSI6InRlc3Rfc2l0ZTEyMzQ1In0sImlhdCI6MTU1OTAzMzg0OSwiaXNzIjoiand0LnVzZXIifQ.jXI151RhD5ob1qJkQOM9tk0wyyvlewGXsTTlkz-jiYA',          
    });  
   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)

 


{"alg":"HS256","typ":"JWT"}
{
  "payload":
  {
    "accounttypedescription":"ECOM",
    "baseamount":"1050",
    "currencyiso3a":"GBP",
    "sitereference":"INSERT SITE REFERENCE"
  },
  "iat":INSERT UNIX TIMESTAMP,
  "iss":"INSERT JWT USERNAME"
}

  • The iat (issued at) claim identifies the time at which the JWT was issued.
    (e.g. 1560352920 which translates to 06 June 2019 15:22 (UTC))
    The payment must be processed within 15 minutes of this timestamp.

 

  • The iss (issuer) signifies the originator of the JWT.
    This will be your JWT username that you created above.

This should output a token, which is structured as three alphanumeric strings separated by dots (“.”).

Click here for further information on generating the JWT.

 

3

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”

4

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.

 


 

Tick
Your progress

You have now processed a basic request.