salla-installment

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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

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

PropertiesCopy Anchor Link