diff --git a/web/website/src/components/BuyFlow.jsx b/web/website/src/components/BuyFlow.jsx index cb8f66e..df37c0a 100644 --- a/web/website/src/components/BuyFlow.jsx +++ b/web/website/src/components/BuyFlow.jsx @@ -81,6 +81,7 @@ export default function BuyFlow() { const [catalogError, setCatalogError] = useState(''); // order + const [renderType, setRenderType] = useState('crypto_address'); // 付款类型选择器:驱动 fake 渠道渲染形态(metadata.render) const [orderLoading, setOrderLoading] = useState(''); const [orderError, setOrderError] = useState(''); const [order, setOrder] = useState(null); // { order_no, session } @@ -155,7 +156,9 @@ export default function BuyFlow() { body: JSON.stringify({ sku, method: 'fake', - metadata: { is_mobile: false }, + // 服务端 metadata 是 map[string]string,值必须是字符串(布尔会 400); + // render 驱动 pay fake 渠道 Create 出的渲染形态(redirect/qr/crypto_address)。 + metadata: { is_mobile: 'false', render: renderType }, }), }); setOrder(data); @@ -285,6 +288,26 @@ export default function BuyFlow() {
catalog 为空。
)} +
付款类型(联调 fake 渠道三种渲染形态):
+
+ {[ + { v: 'crypto_address', label: 'USDT 地址' }, + { v: 'redirect', label: '网页跳转' }, + { v: 'qr', label: '扫码支付' }, + ].map((opt) => ( + + ))} +
+
{items.map((it) => (
diff --git a/web/website/src/styles/buy.css b/web/website/src/styles/buy.css index 811632f..ab90545 100644 --- a/web/website/src/styles/buy.css +++ b/web/website/src/styles/buy.css @@ -34,6 +34,10 @@ .buy-hint { font-size: 13.5px; color: var(--fg3); line-height: 1.6; margin: 0 0 16px; } .buy-hint code, .buy-h code { font-family: var(--font-mono); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 1px 6px; } +/* 复用 website.css 的 .price-toggle 分段控件样式做付款类型选择器;这里只覆写外边距, + 让它贴着上方 hint 文案、不居中(buy-card 是左对齐块级上下文,非 price 区块的居中容器)。 */ +.buy-block .price-toggle { margin: 0 0 20px; } + .buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 4px; } .buy-plan { padding: 22px 18px; } .buy-plan .price { font-size: 26px; margin: 8px 0 4px; }