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



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

An Apple Pay "buy now" button for one product. It renders Apple's `apple-pay-button` and shows it only when the
store allows Apple Pay and this browser and currency can pay with it; otherwise it renders nothing.
`salla-add-product-button` places it next to the add-to-cart button when quick buy is enabled, so a theme rarely uses it directly.

On click: a guest is asked to log in first (`requireLogin`), unless guest checkout is allowed. The product options on
the page are then validated (`validationFailed` when something required is missing), and the Apple Pay session starts.
Order options and free offer products, if the product has them, are collected before the payment is submitted.

## Use it [#use-it]

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

```tsx
import { SallaQuickBuy } from '@salla.sa/twilight-components-react/quick-buy';
```

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

export function Example() {
  return (
    <SallaQuickBuy productId="123" amount={150} currency="SAR" />
  );
}
```

```html
<salla-quick-buy product-id="123" amount="150" currency="SAR"></salla-quick-buy>
```

## Properties [#properties]

| Property             | Attribute             | Description                                                                                                                                                                                                                                                                                        | Type                                                         | Default     |
| -------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
| `amount`             | `amount`              | Product amount in base currency (SAR).                                                                                                                                                                                                                                                             | `number`                                                     |             |
| `applePayOnly`       | `apple-pay-only`      | Show Apple Pay only                                                                                                                                                                                                                                                                                | `boolean`                                                    |             |
| `cartId`             | `cart-id`             | Cart ID, when you need to applePay for existed cart                                                                                                                                                                                                                                                | `string`                                                     |             |
| `currency`           | `currency`            | base currency                                                                                                                                                                                                                                                                                      | `string`                                                     |             |
| `isRequireShipping`  | `is-require-shipping` | To be passed to purchaseNow request                                                                                                                                                                                                                                                                | `boolean`                                                    |             |
| `options`            | `options`             | Product options, if is empty will get the data from the document.querySelector('salla-product-options\[product-id="X"]')                                                                                                                                                                           | `{}`                                                         | `{}`        |
| `productId`          | `product-id`          | Product ID.                                                                                                                                                                                                                                                                                        | `string`                                                     |             |
| `productType`        | `product-type`        | Product type.                                                                                                                                                                                                                                                                                      | `string`                                                     | `'product'` |
| `supportedCountries` | `supported-countries` | Apple Pay supported countries. Same array override/fallback semantics as `supportedNetworks`.                                                                                                                                                                                                      | `string[]`                                                   |             |
| `supportedNetworks`  | `supported-networks`  | Apple Pay supported card networks. Optional array override for surfaces that already hold the unified backend value (e.g. mini-checkout property-binds `payments.gateways.applePay.supportedNetworks`). When unset/empty, falls back to the PDP `store.settings.buy_now.supportedNetworks` config. | `string[]`                                                   |             |
| `type`               | `type`                | Button type.                                                                                                                                                                                                                                                                                       | `"book" \| "buy" \| "donate" \| "order" \| "pay" \| "plain"` | `'buy'`     |
| `validateHost`       | `validate-host`       | Custom host for Apple Pay validate merchant URL. When set, the validate URL will use this host instead of the store URL.                                                                                                                                                                           | `string`                                                     |             |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event              | Description                                                         | Detail                   |
| ------------------ | ------------------------------------------------------------------- | ------------------------ |
| `requireLogin`     | Emitted when Apple Pay button is clicked but user is not logged in. | `{ productId: string; }` |
| `validationFailed` | Emitted when Apple Pay button is clicked but form validation fails. | `{ productId: string; }` |

## Related [#related]

Renders: [`<salla-order-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-order-options-modal).

Used inside: [`<salla-add-product-button>`](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button).