SCA Widget
Learn how to use stepped up authentication in your journey.
Overview
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:
Parameter | Description |
---|---|
redirect_uri | Specifies where the user is redirected in some scenarios (more details below), you choose the page the user is redirected to. This is a required parameter. |
scaToken | 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. This is a required parameter. |
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
Successful authentication
When a user has successfully authenticated, the widget posts back the following data to the redirect_uri
provided in the query string.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 success: true,
4 status: 'authenticated',
5 message: 'User successfully authenticated',
6}
Not my number
If the mobile number that the SCA OTP would be sent to is not the user's number, the user can select "That's not my number". In this case, the SCA widget will send this payload to redirect_uri
.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 status: 'notMyNumber',
4 errorMessage: 'User number incorrect.',
5}
401 - Customer cannot be authenticated
At any point in the journey, an API call can return a 401 with a authenticationFailed
type. This means that the authentication failed and the user is locked out. The SCA widget doesn't handle this directly but sends this payload to redirect_uri
.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 success: false,
4 status: 'authenticationFailed',
5 errorMessage: 'User account locked.',
6}
401 - Token expired
If the access token expires at any point during the journey, the next API call will return a 401 with an accessTokenInvalid
type. The SCA widget doesn't handle this directly but sends this payload to redirect_uri
.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 success: false,
4 status: 'accessTokenInvalid',
5 errorMessage: 'Access token expired.',
6}
401 - User Blocked
At any point in the journey, an API call can return a 401 with a userBlocked
type. This means that the user entered the wrong otp code 5 times and the account is now blocked. The SCA widget doesn't handle this directly but sends this payload to redirect_uri
.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 success: false,
4 status: 'userBlocked',
5 errorMessage: 'Account blocked.',
6}
401 - SCA token invalid
At any point in the journey, an API call can return a 401 with a SCATokenInvalid
type. This means that the sca token provided is invalid. The SCA widget doesn't handle this directly but sends this payload to redirect_uri
.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 success: false,
4 status: 'SCATokenInvalid',
5 errorMessage: 'SCA Token is invalid.',
6}
500 - Technical error
If an API call returns an unexpected response at any point in the journey (anything above a 403), the widget will show an error page. The user can decide to try again or close the widget. In the latter case they will be redirected to redirect_uri
with this payload.
Code Sample
Node + Request
1{
2 scaToken: '<scaToken>',
3 status: '500',
4 errorMessage: 'Technical Error.',
5}
Customisation options
The following elements can be configured by NewDay to match your site:
Category | Configurable Options |
---|---|
Page titles | Can either be displayed or hidden |
Fonts & colours | Fonts, font size, font colour, background colours |
Fields | Input fields border width, radius and colour |
CTA | CTA colour, CTA copy, CTA border-radius, CTA border, CTA border width, CTA border-colour |
Getting Started with NewDay
Quick start guides for how you can start working with NewDay as a partner and learn about the end to end processes of integrating with APIs.
Was this page helpful?