> ## Documentation Index
> Fetch the complete documentation index at: https://docs.float.co.za/llms.txt
> Use this file to discover all available pages before exploring further.

# Product page widget

> Drop-in instalment messaging and a "How it works" explainer for product and cart pages - no API calls required.

The product page widget renders instalment messaging next to the price (e.g. "or pay in 4 instalments of RX"), along with a built-in "How it works" explainer modal, all from a single script tag with no API call or signature required.

<Info>
  If your store runs WooCommerce, Shopify, or Magento with the [official Float plugin](/guides/plugins), this is already included, so you don't need to add it yourself. This page is for [custom API integrations](/guides/accepting-payments).
</Info>

## Add the widget

Place a script tag wherever the messaging should render, typically directly below the price:

```html theme={null}
<script src="https://checkout.float.co.za/widgets/product-details-widget?price=1000&installments=4"></script>
```

The script injects its own markup (logo, instalment breakdown, and a "How it works" link) at its own position in the DOM. There's no container element or JS SDK to set up.

## Parameters

| Param          | Required | Description                                                                                                                                              |
| -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `price`        | Yes      | The product's current selling price in Rand, as a plain number (e.g. `1000` for R1,000.00, not cents). Use the final, post-discount, tax-included price. |
| `installments` | Yes      | Number of interest-free monthly instalments to advertise (e.g. `4`).                                                                                     |

## Keep the price in sync

If the price can change without a page reload (a variant picker, a quantity stepper, a discount code), you need to **remove the existing script's rendered output and insert a brand-new `<script>` element** with the updated `price`. Changing the `src` attribute on an existing script tag doesn't cause it to re-fetch or re-run.

## Handle missing or zero price

Don't render the widget with `price=0` or blank. The script no-ops in that case (`if (price <= 0) return`) and silently leaves its default placeholder on screen rather than showing an error. Suppress the widget entirely for unpriced or out-of-stock items, rather than letting it render with a fallback of `0`.

## What's included

The "How it works" link opens a modal that's already wired up; you don't need to link to the explainer page yourself or build a lightbox. It only renders correctly from a real page served over HTTP(S); it won't work from a local static file preview.

<AccordionGroup>
  <Accordion title="Does this replace the accepting-payments checkout flow?">
    No, this widget is purely on-page merchandising. You still create a checkout and redirect the shopper as described in [Accepting payments](/guides/accepting-payments) once they choose Float.
  </Accordion>

  <Accordion title="Can I use a different currency or territory?">
    Not via this widget; it's fixed to Rand (ZAR) pricing. If you need multi-territory instalment messaging, compute and render it yourself using your [merchant config](/api-reference/get-config).
  </Accordion>
</AccordionGroup>