Spend Widget

Learn how to embed our Spend Widget to allow your customers to make a purchase using our credit product.

Overview

The Spend Widget can be embedded into a retailer site as an iFrame. Embed the Widget to allow users to view a range of credit offers, such as 'buy now pay later' or '0% interest', and complete their purchase.

Embed the Spend Widget

To embed the application, copy and paste the code below into the UI where you want the widget to be displayed. NewDay will provide the brand for each partner.

Javascript

1<iframe src="https://spend.newdaycards.com/[brand]/pay?token=<token>&analyticsCookieConsent=true"></iframe>

Once the customer is handed over, NewDay will allow them to select one offer and get their purchase authorised with their NewDay credit product.

The widget requires a JWT token passed as a parameter into the query string URL:

ParameterDescription
token
(required)
See below for details.
analyticsCookieConsentOptional. Accepts values of true or false. If no value for the parameter then assumed to be false. If true it allows us to activate analytics cookies

When handing over to NewDay, a valid token must be provided in the URL. Generate a signed token as illustrated below. The token Algorithm is HS256 and the token Header must contain the following:

Javascript

1{
2  "alg": "HS256",
3  "typ": "JWT"
4}

The payload information is as follows:

ParameterLocationDescriptionFormat
customerRefPayloadA 36-digit identifier that identifies the customer, this value is originally provided by the partner when creating the application.guid
expPayloadThe token expiration date is formatted as a number of seconds elapsed since epoch. Tokens should be valid for 30 minutes.integer
orderRefPayloadOptional. Unique identifier of the transaction.string
offerIdsPayloadOptional. Allows NewDay to retrieve specific offers.guid[]
basketAmountTotalPayloadMandatory. Total amount of customer basket.string
basketAmountIndividualPayloadOptional. Amount of each individual item in customer basket.string[]
basketDescriptionPayloadOptional. Higl level basket description.string
loyaltyProgramPayloadOptional. The customer is purchasing a loyalty membership.bool

Sign the token with the signature key provided by your Account Manager. This is secret key that should be kept secure and not shared with anyone.

Widget Responses

The widget will communicate with the parent page via post messages. The different post messages formats are outlined below:

Spend widget loaded

The spend widget has loaded successfully.

Example of spend loaded post message

Node + Request

1{
2  event: "spendLaunched",
3  customerRef: "00000000-0000-0000-0000-000000000000",
4}

Timeout

The Spend widget will timeout and prevent the user from proceeding after 30 minutes of inactivity.

Code Sample

Node + Request

1{
2  event: 'spendTimeout',
3  customerRef: <customerRef>,
4}

Technical Error

An unexpected technical error has happened on the spend widget.

Code Sample

Node + Request

1{
2  event: 'spendTechnicalError',
3  customerRef: <customerRef>,
4}

Change payment method

The user has clicked on the 'Change payment method' button and the parent page should redirect to the payment selection screen.

Code Sample

Node + Request

1{
2  event: 'changePaymentMethod',
3  customerRef: <customerRef>,
4}

After Authorisation

When a user has selected an offer and clicked 'Pay' they will be authorised or declined. The widget will send a post message with the following details.

Example of post authorise post message

Node + Request

1{
2    event: "Authorised",
3    declineReason: "Any reason",
4    offerId: "00000000-0000-0000-0000-000000000000",
5    offerDescription: "Buy now pay in 6 months",
6    spendOptionId: "00000000-0000-0000-0000-000000000000",
7    authorisationId: "00000000-0000-0000-0000-000000000000",
8    totalAuthorisedAmount: 500,
9    customerAddress: {
10      houseNumber: "110",
11      houseName: "Summerhouse",
12      addressLine1: "Summer st",
13      addressLine2: "",
14      addressLine3: "",
15      addressLine4: "",
16      townOrCity: "London",
17      county: "Greater London",
18      postcode: "E9 7HQ"
19    }
20  }

Please find below a detailed description of all the fields of the response:

Post Message body

ParameterDescriptionFormat
eventThe Authorise action might have succeeded or failed"Authorised" or "Declined"
declineReasonAn explanation of why transaction has been declined if the event is "Declined"string
offerIdA guid identifying the offer selected by the user.guid
offerDescriptionA description of the offer selected.string
spendOptionIdA guid identifying the offer specifically for this transaction (unlike the offerId this will change between transactions even if the offer is the same)guid
authorisationIdA guid returned by the authorise API identifying the transaction.guid
totalAuthorisedAmountAmount being paid by the usernumber
customerAddressOptional. Address provided by the user when applying to the credit product.Object (see below)

Address Object

ParameterDescriptionFormat
houseNumberOptional (either houseNumber or houseName will be provided)string
houseNameOptional (either houseNumber or houseName will be provided)string
addressLine1string
addressLine2Optionalstring
addressLine3Optionalstring
addressLine4Optionalstring
townOrCitystring
countyOptionalstring
postcodestring

Customisation

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
  • Fields: input fields border width, border radius and border colour
  • Buttons: text and background colour, border width, border radius, border colour
  • Others: some sections have content and copy that are configurable. Ex:. header, footer

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

Was this page helpful?