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



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

Shows how a product can be received, as side-by-side cards for "available for delivery" and "available for pickup".
Use it on a product page. It shows only the cards the product supports, using the `supports_delivery` and
`supports_pickup` flags of the product details, and renders nothing when neither is true or the details cannot be loaded.
It only displays these flags and does not check eligibility itself.

The product is read from the `data-product-id` attribute, falling back to the current page id.

## Use it [#use-it]

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

```tsx
import { SallaFulfillmentMethods } from '@salla.sa/twilight-components-react/fulfillment-methods';
```

## Example [#example]

```tsx
import { SallaFulfillmentMethods } from '@salla.sa/twilight-components-react/fulfillment-methods';

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

```html
<salla-fulfillment-methods data-product-id="123456"></salla-fulfillment-methods>
```