如何在网站上添加加密货币支付按钮或收银台
要在您自己的网站上收取稳定币支付，只需加载一次 Cosmos Pay 嵌入脚本，并添加一个带有支付链接 ID 的 cosmos-pay-button 或 cosmos-pay-checkout 元素。按钮会在弹出窗口中打开托管收银台，嵌入式收银台则直接在您的页面中显示支付。页面无需 API 密钥，您的服务器通过签名 Webhook 确认支付。
按钮还是嵌入式收银台
- 支付按钮（cosmos-pay-button）会在页面中央的弹出窗口中打开托管收银台。如果浏览器拦截了弹出窗口，则改为在当前标签页中跳转到收银台。
- 嵌入式收银台（cosmos-pay-checkout）直接在您的页面中显示支付，宽度最多 420 像素：金额、二维码、一个用于打开付款方钱包的按钮，以及实时状态。
- 两者都适用于 Stellar、Solana 和 Monad 上的支付链接，支持英语、西班牙语、葡萄牙语、法语、德语、印地语和中文。
链接从哪里来
每个元素显示一个支付链接，通过 link 属性中的 ID 指定。您可以在控制台中创建链接，也可以在客户结账时从您的服务器使用支付 API 或 TypeScript SDK 创建，然后将其 ID 放入页面。页面无需 API 密钥即可读取链接，因此您的密钥始终留在服务器上。
每笔支付显示一个嵌入式收银台：一个链接只能支付一次。
属性与样式
- link：支付链接的 ID。必填。
- lang：语言，例如 es 或 es-AR。默认使用付款方的浏览器语言，否则为英语。
- theme：light（默认）、dark，或跟随付款方系统设置的 auto。
- demo：显示一个无法支付、也不发送任何请求的示例，用于演示。
- 按钮内的文字会替换其标签，您的 CSS 可以通过 ::part(button) 和 ::part(card) 重新设置元素的样式。
一步步添加支付按钮
加载脚本
在页面中添加一次 script 标签：https://payments.cosmospay.lat/embed/cosmos-pay.js，并带上 defer 属性。
获取支付链接
在控制台中创建链接，或在客户结账时从您的服务器创建，并保存其 ID。
添加元素
编写一个 cosmos-pay-button 或 cosmos-pay-checkout 元素，将 link 设为该 ID，如有需要再设置 lang 或 theme。
在 CSP 中放行
如果您的网站发送内容安全策略（Content Security Policy），请允许 script-src https://payments.cosmospay.lat、connect-src https://api.cosmospay.lat 和 img-src data:。
测试
使用在沙箱中创建的链接：嵌入式收银台会注明它运行在测试网上。demo 属性无需任何链接即可显示示例。
在服务器上确认
添加 Webhook 端点，并在收到 PAYMENT_INTENT_SUCCEEDED 时交付订单。
事件与确认支付
两个元素都会在您的页面上触发 cosmospay:status 和 cosmospay:paid 事件，附带链接的 ID 和状态。请用它们更新付款方看到的内容，而不要据此交付订单：页面中的事件可能被伪造。
请在服务器收到 PAYMENT_INTENT_SUCCEEDED 时交付订单，这是网络确认支付后 Cosmos Pay 发送的签名 Webhook。如果您的页面发送值为 same-origin 的 Cross-Origin-Opener-Policy，或弹出窗口被拦截，按钮将不会发送任何事件。
页面需要我的 API 密钥吗？
不需要。这些元素无需密钥即可读取支付链接。请在服务器上创建链接，密钥也留在那里。
嵌入式收银台是 iframe 吗？
不是。它在您的页面中以自己的 shadow DOM 绘制，因此无需 frame-src 规则。托管收银台本身不能被嵌入框架。
一个按钮可以收取多笔支付吗？
不可以。一个链接只能支付一次，因此请为每笔支付使用单独的链接，例如在客户结账时在服务器上创建。
它适用于任何网站吗？
是的，适用于任何能加载脚本的页面，只要其内容安全策略允许该脚本、API 和 data: 图片。
