# 在网站上添加加密货币支付按钮 | Cosmos Pay URL: https://payments.cosmospay.lat/learn/crypto-payment-button?lang=zh > 只需一个 script 标签，页面中无需 API 密钥，即可在任何网站上添加支付按钮或嵌入式收银台：属性、事件、CSP 和测试。 ## 如何在网站上添加加密货币支付按钮或收银台 要在您自己的网站上收取稳定币支付，只需加载一次 Cosmos Pay 嵌入脚本，并添加一个带有支付链接 ID 的 cosmos-pay-button 或 cosmos-pay-checkout 元素。按钮会在弹出窗口中打开托管收银台，嵌入式收银台则直接在您的页面中显示支付。页面无需 API 密钥，您的服务器通过签名 Webhook 确认支付。 更新于 2026年11月2日 · 作者：Cosmos Pay ### 按钮还是嵌入式收银台 - 支付按钮（cosmos-pay-button）会在页面中央的弹出窗口中打开托管收银台。如果浏览器拦截了弹出窗口，则改为在当前标签页中跳转到收银台。 - 嵌入式收银台（cosmos-pay-checkout）直接在您的页面中显示支付，宽度最多 420 像素：金额、二维码、一个用于打开付款方钱包的按钮，以及实时状态。 - 两者都适用于 Stellar、Solana 和 Monad 上的支付链接，支持英语、西班牙语、葡萄牙语、法语、德语、印地语和中文。 ### 链接从哪里来 每个元素显示一个支付链接，通过 link 属性中的 ID 指定。您可以在控制台中创建链接，也可以在客户结账时从您的服务器使用支付 API 或 TypeScript SDK 创建，然后将其 ID 放入页面。页面无需 API 密钥即可读取链接，因此您的密钥始终留在服务器上。 每笔支付显示一个嵌入式收银台：一个链接只能支付一次。 - [支付链接 API](https://dev.cosmospay.lat/docs/api/payment-links/) - [如何在线接受 USDC 支付](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=zh) ### 属性与样式 - link：支付链接的 ID。必填。 - lang：语言，例如 es 或 es-AR。默认使用付款方的浏览器语言，否则为英语。 - theme：light（默认）、dark，或跟随付款方系统设置的 auto。 - demo：显示一个无法支付、也不发送任何请求的示例，用于演示。 - 按钮内的文字会替换其标签，您的 CSS 可以通过 ::part(button) 和 ::part(card) 重新设置元素的样式。 ### 一步步添加支付按钮 1. **加载脚本**: 在页面中添加一次 script 标签：https://payments.cosmospay.lat/embed/cosmos-pay.js，并带上 defer 属性。 2. **获取支付链接**: 在控制台中创建链接，或在客户结账时从您的服务器创建，并保存其 ID。 3. **添加元素**: 编写一个 cosmos-pay-button 或 cosmos-pay-checkout 元素，将 link 设为该 ID，如有需要再设置 lang 或 theme。 4. **在 CSP 中放行**: 如果您的网站发送内容安全策略（Content Security Policy），请允许 script-src https://payments.cosmospay.lat、connect-src https://api.cosmospay.lat 和 img-src data:。 5. **测试**: 使用在沙箱中创建的链接：嵌入式收银台会注明它运行在测试网上。demo 属性无需任何链接即可显示示例。 6. **在服务器上确认**: 添加 Webhook 端点，并在收到 PAYMENT_INTENT_SUCCEEDED 时交付订单。 - [嵌入支付（文档）](https://dev.cosmospay.lat/docs/embed/) - [Webhook](https://dev.cosmospay.lat/docs/sdk/server/webhooks/) ### 事件与确认支付 两个元素都会在您的页面上触发 cosmospay:status 和 cosmospay:paid 事件，附带链接的 ID 和状态。请用它们更新付款方看到的内容，而不要据此交付订单：页面中的事件可能被伪造。 请在服务器收到 PAYMENT_INTENT_SUCCEEDED 时交付订单，这是网络确认支付后 Cosmos Pay 发送的签名 Webhook。如果您的页面发送值为 same-origin 的 Cross-Origin-Opener-Policy，或弹出窗口被拦截，按钮将不会发送任何事件。 - [如何在服务器上确认支付](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=zh) ### 常见问题 与解答。 按网络查看支付： [Stellar 支付](https://payments.cosmospay.lat/stellar?lang=zh), [Solana 支付](https://payments.cosmospay.lat/solana?lang=zh), [Monad 支付](https://payments.cosmospay.lat/monad?lang=zh) #### 页面需要我的 API 密钥吗？ 不需要。这些元素无需密钥即可读取支付链接。请在服务器上创建链接，密钥也留在那里。 #### 嵌入式收银台是 iframe 吗？ 不是。它在您的页面中以自己的 shadow DOM 绘制，因此无需 frame-src 规则。托管收银台本身不能被嵌入框架。 #### 一个按钮可以收取多笔支付吗？ 不可以。一个链接只能支付一次，因此请为每笔支付使用单独的链接，例如在客户结账时在服务器上创建。 #### 它适用于任何网站吗？ 是的，适用于任何能加载脚本的页面，只要其内容安全策略允许该脚本、API 和 data: 图片。 ### 更多指南 [查看全部指南](https://payments.cosmospay.lat/learn?lang=zh) #### [如何在线接受 USDC 支付](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=zh) 通过支付链接、托管收银台或 API 收取 USDC，并先在测试网上试用。 #### [如何在服务器上确认稳定币支付](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=zh) 依据签名 Webhook 交付订单，而不是依据客户看到的页面：验证它、快速响应并跳过重复事件。 #### [如何以任意金额接受加密货币捐赠](https://payments.cosmospay.lat/learn/crypto-donations?lang=zh) 让每位捐赠者自行选择金额：Stellar 和 Solana 上的任意金额链接，为每位捐赠者单独创建，并通过 Webhook 确认。 ### 立即开始接受 稳定币支付。 创建免费账户，生成测试密钥，今天就发出您的第一个支付链接。 [创建支付链接](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments) #### 联系我们 关于套餐、集成或受保护付款的问题：告诉我们，我们会通过邮件回复。 [organization@cosmospay.lat](mailto:organization@cosmospay.lat)