Part payment widget
The Part payment widget can be placed at a product page to show the customers what the monthly amount will be if choosing to purchase the item with part payment. If the amount is below the threshold for part payment, the widget will inform the customer that direct invoice is available.
Render the Part payment widget iframe​
Place this script at the pages where you want the widget to appear
You can also use the data-container-id property to target an element in the DOM where the widget should be rendered
<script
src="https://api.uat.walleydev.com/walley-checkout-loader.js"
data-token="widget-NO-0TTJOMERnUGlVN1JtazFwZUo2UmFZVW92dFA5..."
data-widget="part-payment"
data-amount="123450"
></script>
Script element attributes​
| Attribute | Explanation |
|---|---|
| src | See endpoints in Checkout Environment Endpoints |
| data-token | The widget token received when initializing the widget session. NB! The token should be reused for all Part Payment Widgets until it expires. |
| data-widget | The name of the widget. In this case part-payment. |
| data-amount | The price of the item. NB! To avoid decimals the amount must be multiplied by 100, e.g. 1234.50 becomes 123450. Allowed values are 1 to 99999999. |
| data-lang | (optional) The display language. Currently supported combinations are: sv-SE, en-SE, nb-NO, fi-FI and sv-FI. |
| data-padding | (optional) Set this to none in order to cancel out the left and right padding inside the iframe (by adjusting its margins and width). |
| data-container-id | (optional) Set this to the id of an element on the page and the iframe will render inside this element instead of immediately above the script element of the loader script. Put the container element somewhere above the script element. This is to make sure the container element is loaded before trying to populate it with the iframe. |
| data-action-color | (optional) Set this to a hexadecimal color code to change the background color of call to action buttons, formatted as the following example #582f87. Button text color will automatically be set to dark gray instead of white if not enough contrast according to WCAG 2.0 level AA for large text. |
| data-action-text-color | (optional) Set this to override the automatic text color of call to action buttons. Valid values are black, white, #000000 and #ffffff. Other hexadecimal color values are also valid, but will be interpreted as either black or white (and instead of black, the actual text color will be dark gray) |
Update the part payment widget​
First Set the data-amount attribute
<script
src="https://api.uat.walleydev.com/walley-checkout-loader.js"
data-token="widget-NO-0TTJOMERnUGlVN1JtazFwZUo2UmFZVW92dFA5..."
data-widget="part-payment"
data-amount="123450"
></script>
Then call the javaScript client side API to update
// Update the widget with the new data
window.walley.checkout.api.update();
If the amount is updated, the data-amount script element attribute should be set to the new value. Thereafter a call to the update event of the window.walley.checkout.api must be made.