salla-quick-buy
An Apple Pay "buy now" button for one product.
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
In HTML or JSX, use the tag <salla-quick-buy> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
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
import { SallaQuickBuy } from '@salla.sa/twilight-components-react/quick-buy';
export function Example() {
return (
<SallaQuickBuy productId="123" amount={150} currency="SAR" />
);
}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
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
Renders: <salla-order-options-modal>.
Used inside: <salla-add-product-button>.
salla-products-slider
Fetches a set of products (by category, brand, tag, latest, offers, related, a fixed list of ids, or your own JSON) and shows them as product cards in a carousel (salla-slider).
salla-quick-order
A "quick order" box for a product page that lets a visitor order a product without going through the cart.