SCA Widget

Learn how to use stepped up authentication in your journey.

Overview

Strong Customer Authentication (SCA) is a European regulatory requirement to reduce fraud and make online and contactless offline payments more secure. SCA is a requirement of the Payment Services Directive (PSD2), which aims to add extra layers of security to electronic payments.

The SCA widget is a NewDay hosted feature enabling your customers to confirm their identity with stronger authentication enabling higher security on the transaction.

Embed the SCA Widget

The widget is embedded onto your site using an iFrame. When two-step authentication is required for a customer to complete an Order Processing journey, the SCA widget can be used to confirm their identity and help them move forward in their journey.

Below is an example of how to add the widget to your website:

Javascript

1  <iframe src="https://id.newdaytechnology.com/<brand>/identity?redirect_uri=https://mywebsite.com&scaToken=<scaToken>"></iframe>

The widget accepts the following parameters in the iFrame source URL:

ParameterDescription
brand
(required)
A string in lowercased format that represents your brand name.
redirect_uri
(required)
Specifies where the user is redirected in some scenarios (more details below), you choose the page the user is redirected to.
scaToken
(required)
An encrypted JWT token is recieved from the Order Processing Initiate endpoint that contains all the information needed by the SCA widget to initilaise and complete the authentication.

After the user has successfully confirmed their identity, the widget posts serialized data back to the redirect_uri provided in the query string. The data returned by the widget must be deserialized before usage.

Data deserialisation example

Code Sample

C#

1var payload = JsonConvert.DeserializeObject<Object>(formData["payload"])

The src of the iFrame, including the scaToken, will be in the payload of the response from Order Processing on the first authentication attempt.

Widget Responses

Whether a user has successfully authenticated, or something went wrong, the widget will post back data to the redirect_uri provided in the query string. From that point onwards, you can decide how to handle each scenario. Here it is a list of possible scenarios and respective payloads that the widget can send back:

Successful authentication

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  success: true,
4  status: 'authenticated',
5  message: 'User successfully authenticated',
6}

Token expired

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  success: false,
4  status: 'accessTokenInvalid',
5  errorMessage: 'Access token expired.',
6}

Token invalid

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  success: false,
4  status: 'SCATokenInvalid',
5  errorMessage: 'SCA Token is invalid.',
6}

Not my number

The "That's not my number" button is clicked by the user to indicate that the mobile number to which the SCA OTP will be sent is incorrect.

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  status: 'notMyNumber',
4  errorMessage: 'User number incorrect.',
5}

Account locked

When an invalid otp code is provided for 5 times, the user account is locked. The account can be unlocked by resetting the passcode.

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  success: false,
4  status: 'authenticationFailed',
5  errorMessage: 'User account locked.',
6}

Account blocked

The SCA user account is blocked if SCA fails or incorrect credentials are entered during unlock or reset passcode journeys.

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  success: false,
4  status: 'userBlocked',
5  errorMessage: 'Account blocked.',
6}

Technical error

If the API call returns an unexpected response, the widget will display an error page where the user can either try again or exit the journey. In the latter case the below payload will be sent to the redirect_uri.

Code Sample

Node + Request

1{
2  scaToken: '<scaToken>',
3  status: '500',
4  errorMessage: 'Technical Error.',
5}

Customisation options

Our widget is built to integrate naturally with your website and brand, providing a consistent user experience.

The following elements are customisable:
  • Fonts: type, size, text and background colours
  • Page titles: Can either be displayed or hidden
  • Fields: input fields border width, border radius and border colour
  • Buttons: text and background colour, border width, border radius, border colour
  • Validation messages
The below elements are not currently configurable:
  • Page titles copy (e.g. 'Enter your OTP')
  • Input fields hints and placeholder text (e.g. ‘Receive your 6-digit OTP’)
  • Error messages based on API responses (e.g. 'Something went wrong')
  • Troubleshooting links (e.g. ‘Resend passcode’)

Note: Further details can be discussed with your account manager.

Still have questions

Can’t find the answer to your question? Our friendly team are more than happy to help