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



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

Lists the payment method logos the store accepts, plus the Made in KSA badge and the Saudi Business Center certificate when the store has them. Typically used in the theme footer.
The methods come from the store settings; use `exclude` to hide some of them.

## Use it [#use-it]

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

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

**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 { SallaPayments } from '@salla.sa/twilight-components-react/payments';

export function Example() {
  return (
    <SallaPayments exclude='["cod","mada"]' />
  );
}
```

```html
<salla-payments exclude='["cod","mada"]'></salla-payments>
```

## Properties [#properties]

| Property  | Attribute | Description                                                                                                                                                                                                                                                                                | Type       | Default |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ------- |
| `exclude` | `exclude` | Payment method slugs or items to hide. Accepts an array or a JSON string of an array, for example `["sbc", "made-in-ksa", "cod", "mada"]`. `sbc` hides the certificate and `made-in-ksa` hides the Made in KSA badge; any other value is matched against the store's payment method slugs. | `string[]` | `[]`    |

## Slots [#slots]

| Slot      | Description                                                          |
| --------- | -------------------------------------------------------------------- |
| `cod`     | Replaces COD item, has replaceable props `{image}`.                  |
| `payment` | Replaces payment item, has replaceable props `{image}`, `{payment}`. |
| `sbc`     | Replaces SBC certificate item, has replaceable props `{image}`.      |