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



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

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 it [#use-it]

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

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

## Example [#example]

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

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

```html
<salla-cashback-banner data-product-id="123456"></salla-cashback-banner>
```