# salla-installment (https://docs.salla.dev/twilight/react/web-components/salla-installment)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Shows the "pay in installments" promo widgets of the installment providers the store has enabled (Tamara, Tabby, Spotii,
Mispay, Emkan, Madfu, Mokafaa Alrajhi points and Klarna) for a given price. Use it on the product page under the price.
The set of providers comes from the store settings, and each provider's widget script is loaded by the component.

Nothing is rendered unless `price` is a plain positive number string such as `"199"` or `"199.50"` (up to 3 decimals, no
thousands separators or currency symbol). When another component emits `product::price.updated` with a new `data.price`,
the widgets refresh with that price. Emkan, Madfu, Mokafaa Alrajhi and Mispay only appear when the currency is SAR.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-installment>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaInstallment } from '@salla.sa/twilight-components-react/installment';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaInstallment } from '@salla.sa/twilight-components-react/installment';

export function Example() {
  return (
    <SallaInstallment price="199.50" />
  );
}
```

```html
<salla-installment price="199.50"></salla-installment>
```

## Properties [#properties]

| Property   | Attribute  | Description                                                                                                                                                             | Type     | Default                                  |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| `country`  | `country`  | Country code. On load it is replaced by the customer's country, falling back to `SA`. It is not read anywhere else in this component.                                   | `string` | `salla.config.get('user.country_code')`  |
| `currency` | `currency` | ISO currency code (for example `SAR`). On load it is replaced by the customer's current currency, falling back to `SAR`.                                                | `string` | `salla.config.get('user.currency_code')` |
| `language` | `language` | Language code used by the provider widgets (for example `ar` or `en`). On load it is replaced by the store's current language, falling back to `ar`.                    | `string` | `salla.config.get('user.language_code')` |
| `price`    | `price`    | The amount to show installments for, as a plain number string with up to 3 decimals (for example `"199.50"`). Must be greater than zero, otherwise nothing is rendered. | `string` |                                          |