spz-ec 智能快捷支付

智能 EC（Express Checkout）组件，由后端算法推荐单一最优快捷支付渠道，支持自动 Fallback 到次优渠道

布局

何时使用

商品详情页需要展示快捷支付按钮（Apple Pay、Google Pay、PayPal），希望由后端算法自动推荐最优渠道时使用。
购物车页面或购物车抽屉需要提供快捷支付入口时使用。

代码演示

商品页基本用法

在商品页中，通过 scene="product" 和 product-form 指定商品表单选择器，组件自动读取当前选中变体和数量，渲染推荐的快捷支付按钮。

<!-- 商品页：scene="product"，product-form 指向商品表单选择器 -->
<spz-ec
  id="spz-ec-base"
  scene="product"
  product-form="#product-form"
  layout="container">
</spz-ec>

购物车场景

购物车场景无需配置 product-form，组件会自动从 spz-cart 或 dj.cartUpdate 事件读取购物车数据。

<!-- 购物车页 / 购物车抽屉：scene="cart"，无需 product-form -->
<spz-ec
  id="spz-ec-cart"
  scene="cart"
  layout="container">
</spz-ec>

属性

属性名	说明	类型	默认值	是否必需
scene	使用场景，可选值 `product`（商品页）或 `cart`（购物车）	string	`product`	否
product-form	商品页表单的 CSS 选择器，组件通过该表单读取 product / variant / quantity 数据，仅 `scene="product"` 时有效	string	`''`	否
height	按钮和骨架屏的高度，纯数字自动加 `px`（如 `height="48"` 等效于 `48px`），仅 `layout="fixed-height"` 时生效	string	`52px`	否

事件

select-check

用户点击快捷支付按钮时，检测到商品变体未全部选中则触发该事件，event.detail 为未选中的选项 key（逗号分隔字符串）。

<spz-ec
  id="spz-ec-base"
  scene="product"
  product-form="#product-form"
  layout="container"
  @select-check="...">
</spz-ec>