salla-cashback-banner

A small banner on the product page that tells the shopper how much cashback they earn for buying the product (for example "Earn 10 SAR when buying this product"). Use it on a product page near the price.

The product is read from the data-product-id attribute, falling back to the current page id. The banner loads the cashback offer for that product and renders nothing when there is no offer or its amount is 0. When the product has options, it updates from the product::price.updated event so the amount matches the selected variant. If the offer is limited to some payment methods, they are named in the message.

Use itCopy Anchor Link

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

import { SallaCashbackBanner } from '@salla.sa/twilight-components-react/cashback-banner';

ExampleCopy Anchor Link

import { SallaCashbackBanner } from '@salla.sa/twilight-components-react/cashback-banner';

export function Example() {
  return (
    <SallaCashbackBanner dataProductId="123456" />
  );
}