支付网关界面
ReactPaymentCheckoutStripeGateway更新于 2026-08-14
使用场景: 构建结账与支付流程:统一支付方式选择、卡片输入、支付宝/微信/Stripe 集成与支付状态展示。
安装
npx skills add payment-gateway-ui克隆
git clone https://github.com/skillhub-community/payment-gateway-ui.git描述
带网关适配层的支付 UI 套件。PayMethodPicker:标准支付方式网格——银行卡、支付宝、微信支付、银行转账、PayPal、Apple Pay/Google Pay——各带 Logo 与「推荐」徽章;选择高亮并展开对应输入。CardForm:安全卡号输入(号码格式化、有效期、CVC),按网关支持托管字段(Stripe Elements 等)与内联校验。RedirectFlow:重定向网关(支付宝/微信扫码)显示二维码或重定向屏带状态轮询。
TransactionStatus:成功/失败/处理中的卡片带订单摘要、收据按钮与退款/重试操作;从 webhook 更新的实时支付状态步骤条(发起 → 处理中 → 已确认)。包含测试模式沙盒横幅(TEST MODE)防开发环境泄漏测试卡到生产、金额/货币格式化与统一网关支付意图生命周期的 PaymentProvider 包装器。安全指引:非 PCI 合规不要服务端接触裸卡数据、优先托管字段、始终验证签名回调。
AI Hub
跑 Skill 需要模型接口?
AI Hub 提供 OpenAI 兼容接口,给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@integrate_hao
许可证MIT
版本1.0.0
依赖1