SSO Widget

Overview

The SSO widget is a NewDay-hosted feature enabling your customers to create credentials and log in to their customer credit account on your website. Embed the SSO widget into your NewPay journey once an application has been created.

Benefits

Easy to implement

Embed the provided iFrame code into your UI for your customers to create and log in to their customer credit account.

Secure

The widget securely connects to NewDay’s identity servers to create or log in to a customer credit account.

Customisable

The styling can be configured as required, including: fonts, primary and secondary colours, input field border radius, button borders and border radius

Embed the SSO Widget

The SSO widget is embedded onto your site using an iFrame when you want your applicant to create their credentials or to log into their customer credit account.

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

Javascript

1  <iframe src="https://id.newdaytechnology.com/[brand]/credentials?sessionId=test&redirect_uri=https://mywebsite.com&token=jwt&user_name=username123"></iframe>

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

ParameterDescription
redirect_uriRequired. Specifies where the user is redirected on some scenarios (further details in the next sections). You choose the page the user is redirected to.
sessionIdRequired. A unique identifier mapping a session to a user.
tokenRequired when the user is creating credentials. A JWT token returned from the Create Application endpoint, once the user has successfully completed an eligibility check. The token is valid for 10 minutes since creation.
contextOptional. Identifies whether the user is in a checkout or nocheckout journey (further details in the next sections).
user_nameOptional. If specified, the username input field in the create credentials journey will be pre-filled with its value.

When the user, for example, successfully creates credentials or logs in, the widget posts serialized data back to the redirect_uri provided in the query string.

Data returned by the widget must be deserialized before usage.

The following is a C# example on how to deserialize the data:

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

Optional customizations

The widget UIs allow for a certain degree of customization based on the user journey.

A user can be trying to create credentials during a purchase checkout (checkout) or not (nocheckout).

Journey type is specified by the context optional parameter provided in the iFrame query string. By default the user is in a checkout journey unless nocheckout is assigned to context.

During a purchase checkout journey:

  1. Page titles are displayed
  2. If the user tries to create an account with an username that is already taken, the alert message will display a link to be redirected to the login page

During a non-checkout journey:

  1. Page titles are not displayed
  2. If the user tries to create an account with an username that is already taken, the alert message will only warn the user, but it will not provide an option to login.

Create credentials

To embed the create credentials iFrame, copy the code and paste it into your website when required in the journey.

Javascript

1  <iframe src="https://id.newdaytechnology.com/[brand]/credentials?sessionId=<sessionId>&redirect_uri=<redirect_uri>&token=<jwt-token>"></iframe>

Successful response

When credentials are successfully created the widget posts back the following data to the redirect_uri provided in the query string:

{
 "data": {
 "idToken": "{{id_token}}"
 },
 "isSuccessful": true,
 "message": null,
 "errorMessages": {
   "status": null,
   "errors": []
  }
}

Unsuccessful response - Token expired

The widget does not handle errors related to invalid tokens. It, however, provides the option to post back the below data and redirect the user to the redirect_uri present in the query string.

A refreshed token can be retrieved from this endpoint: docs.newdaytechnology.co.uk/reference/acquisition/#refreshtoken.

The widget can then be re-called by passing the refresh token in the URL parameters:

Javascript

1<iframe src="https://id.newdaytechnology.com/[brand]/credentials?sessionId=<sessionId>&redirect_uri=<redirect_uri>&token=<refresh-token>"></iframe>
{
   "status": 401,
   "errorMessage": "Token expired"
}

Login

Copy the code and paste into your website where you want your customers to login to their customer credit account.

Javascript

1  <iframe src="https://id.newdaytechnology.com/[brand]/login?sessionId=<sessionId>&redirect_uri=<redirect_uri>"></iframe>

Successful response

When a user successfully logs in, the widget posts the below data back to the redirect_uri provided in the query string:

{
  "hashedUserId": "{{hashed_user_id}}",
   "identityToken": “",
   "expiresIn": 600,
   "tokenType": "Bearer",
   "refreshToken": "{{refresh_token}}",
   "correlationId": "string",
   "isAccountLocked": false,
   "remainingAttempts": null,
   "success": true
}

Unsuccessful response - Account locked

Users can attempt to login with incorrect credentials up to 5 times before their account is locked. The widget does not handle errors due to account being locked. However, it can optionally post back the below data and redirect the user to the redirect_uri provided in the query string:

{
   "status": 403,
   "errorMessage": "User account locked."
}

Customisation

The following elements can be configured by NewDay to match your site:

  • Page titles (can either be displayed or hidden)
  • Fonts
  • Font size
  • Font colour
  • Background colours
  • Input fields border width
  • Input fields border radius
  • Input fields border colour
  • CTA colour
  • CTA copy
  • CTA border-radius
  • CTA border
  • CTA border width
  • CTA border-colour
  • Validation messages

The below elements are not currently configurable:

  • Titles copy (e.g. Username, Passcode etc)
  • Hint copy (‘This is your username you use to login’)
  • Prompt copy within the input fields (‘enter your username)
  • Error messages based on API responses (e.g. Unauthorised user)
  • Help copy (‘Do you already have NewPay?’)
  • Retrieval copy (‘Trouble logging in?’)

Still have questions

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

Was this page helpful?


© NewDay 2022. All rights reserved.

Cookie PolicyPrivacy PolicyTerms of UseSupport