Spend Widget
Learn how to embed our Spend Widget to allow your customers to make a purchase using our credit product.
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 and agree on a partner specific domain. There are two different methods to complete the Spend Handover
Token via query string
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 |
sessionId |
Optional. A unique identifier to track the user’s journey across platforms. If not provided, one will be generated automatically. This helps with logging and tracking users through various steps. |
Token via Post request
The code above is an example of how to implement the new POST request to access Spend Widget. The form is hidden and needs to be submitted automatically triggering the iframe to be populated with the response of the form action.
The parameters will be the same as the table above but passed via the POST request using the url in the sample code.
When handing over to NewDay, a valid token must be provided (either in the query string URL or in the POST body, depending on the integration method).
Generate a signed token as illustrated below.
The token Algorithm is HS256 and the token Header must contain the following:
The payload information is as follows:
| Parameter | Location | Description | Format |
|---|---|---|---|
customerRef |
Payload | Optional. A random string that identifies the customer; this value should be originally provided by the partner when creating the application. If not provided, the user will be redirected to the login page. | string |
merchantId |
Payload | Optional. An identifier assigned to the merchant. | string |
exp |
Payload | The token expiration date is formatted as a number of seconds elapsed since epoch. Tokens should be valid for 2 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 the customer basket. | number (format: double) |
basketAmountIndividual |
Payload | Optional. The amount of each item in the customer basket. | number (format: double)[] |
basketDescription |
Payload | Optional. High-level basket description. | string |
loyaltyProgram |
Payload | Optional. The customer is purchasing a loyalty membership. | bool |
upfrontPaymentAmount |
Payload | Optional. Upfront payment amount required as part of the purchase. | number(double) |
futureSaleValue |
Payload | Optional. Pre-agreed trade-in value the user can get back at the end of a fixed period, by returning the relevant item. | number(double) |
riskFlag |
Payload | Optional. Flag to determine if the item in the basket is considered high risk (possible values “High” / “Blank”). | string |
fulfillmentType |
Payload | Optional. Variable to determine where the basket items are to be delivered (possible values “clickAndCollect” / “homeDelivery”). | string |
deliveryAddress |
Payload | Optional. Delivery address for the purchased items. | Object (see below) |
Delivery Address Object
| Parameter | Description | Format |
|---|---|---|
postcode |
Delivery postcode | string |
Sign the token with the signature key provided by your Account Manager. This is a 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. Some responses are for information only, others require the parent page to take an action. The different post message formats are outlined below:
Information Only
- spendLaunched
- spendTimeout
- spendTechnicalError
- spendSessionError
Spend widget launched
The spend widget has launched successfully.
Timeout
The Spend widget will timeout and prevent the user from proceeding after an amount of time that is configurable.
Technical Error
An unexpected technical error has happened on the spend widget. The user will see a technical error page with a CTA to change payment method.
Spend Session Error
The user has multiple sessions of spend open and one overrides the other one.
Action required
- changePaymentMethod
- Authorised
- amendMyBasket
Change payment method
The user has clicked on the ‘Change payment method’ button and the parent page should redirect to the payment selection screen.
After Authorisation
When a user has selected an offer and clicked the ‘Pay’ button, they will be authorised or declined. The widget will send a post message containing a signed token. At this point, the widget should be closed and the parent page should read the token payload to get all the information required to settle the transaction.
Return to trolley
The user has clicked on the ‘Return to trolley’ button and the parent page should redirect to the users basket screen.
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” |
token |
Token payload with all the information to give control back to the parent page | string |
Token payload
| Parameter | Description | Format |
|---|---|---|
event |
The Authorise action might have succeeded or failed | “Authorised” or “Declined” |
customerRef |
A random string that identifies the customer. This is the same value originally provided by the partner when creating the application. If not provided, we will provide one. | string |
merchantId |
Optional. An identifier assigned to the merchant. | 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 |
activationStatus |
Indicates whether any instrument on the account has been activated. Possible values are Active, or Inactive | string |
customerAddress |
Optional. Address provided by the user when applying to the credit product. | Object (see below) |
interestRate |
Optional. Interest rate provides when applying to the credit product. | number |
MonthlyPayment |
Optional. Monthly payment provides when applying to the credit product. | number(double) |
TermPeriod |
Optional. Offer duration provides when applying to the credit product. | number |
TotalAmountPayable |
Optional. Total Amount Payable provides when applying to the credit product. | number(double) |
upfrontPaymentAmount |
Optional. Upfront Payment amount that has been authorised. | number(double) |
futureSaleValue |
Optional. Pre-agreed trade-in value the user can get back at the end of a fixed period, by returning the relevant item. | number(double) |
Customer 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.
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.
You may also like:
Still have questions
Can’t find the answer to your question? Our friendly team are more than happy to help