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:
| Parameter | Description |
|---|---|
token(required) | See below for details. |
analyticsCookieConsent | Optional. 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:
| Parameter | Location | Description | Format |
|---|---|---|---|
customerRef | Payload | A 36-digit identifier that identifies the customer, this value is originally provided by the partner when creating the application. | guid |
exp | Payload | The token expiration date is formatted as a number of seconds elapsed since epoch. Tokens should be valid for 30 minutes. | integer |
orderRef | Payload | Optional. Unique identifier of the transaction. | string |
offerIds | Payload | Optional. Allows NewDay to retrieve specific offers. | guid[] |
basketAmountTotal | Payload | Mandatory. Total amount of customer basket. | string |
basketAmountIndividual | Payload | Optional. Amount of each individual item in customer basket. | string[] |
basketDescription | Payload | Optional. Higl level basket description. | string |
loyaltyProgram | Payload | Optional. 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
| Parameter | Description | Format |
|---|---|---|
event | The Authorise action might have succeeded or failed | "Authorised" or "Declined" |
declineReason | An explanation of why transaction has been declined if the event is "Declined" | string |
offerId | A guid identifying the offer selected by the user. | guid |
offerDescription | A description of the offer selected. | string |
spendOptionId | A guid identifying the offer specifically for this transaction (unlike the offerId this will change between transactions even if the offer is the same) | guid |
authorisationId | A guid returned by the authorise API identifying the transaction. | guid |
totalAuthorisedAmount | Amount being paid by the user | number |
customerAddress | Optional. Address provided by the user when applying to the credit product. | Object (see below) |
Address Object
| Parameter | Description | Format |
|---|---|---|
houseNumber | Optional (either houseNumber or houseName will be provided) | string |
houseName | Optional (either houseNumber or houseName will be provided) | string |
addressLine1 | string | |
addressLine2 | Optional | string |
addressLine3 | Optional | string |
addressLine4 | Optional | string |
townOrCity | string | |
county | Optional | string |
postcode | string |
Customisation
Our widget is built to integrate naturally with your website and brand, providing a consistent user experience.
- 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.
You may also like:
Was this page helpful?