---
id: part-payment-widget
title: Part payment widget
hide_title: true
description: "How to use the Walley - Part payment widget"
---

import Ingress from "../../../src/components/ingress/ingress.react";

<Ingress title="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.
</Ingress>

<img
  src="/img/widget-still.jpg"
  alt="The part payment widget on a product page, showing a monthly amount"
/>

## Render the Part payment widget iframe

Place this script on 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.

```html
<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](/docs/checkout/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. [Available languages](/docs/checkout/languages).                                                                                                                                                                                                                                                             |
| **data-padding**           | (optional) Set this to `none` 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)                               |
| **data-logo-alignment**    | (optional) Controls the horizontal alignment of the logo. Valid values are `left`, `center`, and `right`. Defaults to `left` if not specified.                                                                                                                                                                                                |
| **data-logo-variant**      | (optional) Specifies which logo variant to display. Valid values are `color` and `black`. Defaults to `black` if not specified.                                                                                                                                                                                                               |
| **data-font-size**         | (optional) Sets the base font size for the widget content. Valid values are `small`, `medium`, and `large`. Defaults to `small` (multiplier 1). `medium` uses multiplier 1.25, and `large` uses multiplier 1.5.                                                                                                                               |

## Update the Part payment widget

First, set the `data-amount` attribute.

```html
<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.

```javascript
// 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.