# 稳定币收银台、支付按钮和 API | Cosmos Pay

URL: https://payments.cosmospay.lat/integrations?lang=zh

> 从无需代码的支付链接，到使用 API 构建的专属支付界面。选择您的收款方式，以及支付在您网站上的呈现方式。

## 在您的网站上接受稳定币支付

从无需代码的支付链接，到使用 API 构建的专属支付界面。选择您的收款方式，以及支付在您网站上的呈现方式。

### 把支付放在 网站最合适的位置。

将客户引导至我们的收银台、通过按钮打开收银台、在您的页面内展示，或使用 API 自行构建。下面每种方式都可以试用：所有演示都在本页面运行，使用无法实际支付的示例数据。

#### 支付按钮 (一行 HTML)

我们的脚本会生成一个按钮，在您的页面上方以窗口形式打开收银台，并在支付确认时通知您的页面。

```html
<script defer
  src="https://payments.cosmospay.lat/embed/cosmos-pay.js"></script>

<!-- link: your payment link's id, from the dashboard or the API -->
<cosmos-pay-button
  link="cmh9a1q7r0000l208x9k4d1pz">
</cosmos-pay-button>

<script>
  document.querySelector("cosmos-pay-button")
    .addEventListener("cosmospay:paid", showThanks);
</script>
```

[阅读嵌入指南](https://dev.cosmospay.lat/docs/embed/)

#### 嵌入式收银台 (一行 HTML)

收银台直接显示在您的页面中：金额、二维码和钱包按钮，状态实时更新。

```html
<script defer
  src="https://payments.cosmospay.lat/embed/cosmos-pay.js"></script>

<!-- link: your payment link's id, from the dashboard or the API -->
<cosmos-pay-checkout
  link="cmh9a1q7r0000l208x9k4d1pz"
  lang="zh" theme="auto">
</cosmos-pay-checkout>

<script>
  document.querySelector("cosmos-pay-checkout")
    .addEventListener("cosmospay:status", (event) => {
      console.log(event.detail.status); // PENDING, SUBMITTED, SUCCEEDED
    });
</script>
```

[阅读嵌入指南](https://dev.cosmospay.lat/docs/embed/)

#### 托管收银台 (网站无需代码)

跳转到由我们托管的收银台页面。每个链接有四款现成设计可选，且其他网站无法嵌入该页面。

收银台设计:

- **经典**: 简洁的单栏布局：金额、实时状态、二维码和支付详情。
- **分栏**: 侧栏列出支付方式并显示倒计时，由付款人选择支付方式。
- **收据**: 支付信息旁附一张收据：详情、撕线和总额。
- **卡片**: 醒目的倒计时、带标签的字段，以及承载二维码的支付卡片。

```html
<!-- Send your customer to the hosted checkout. Its design
     (classic, split, ticket or card) is set on the link,
     in the dashboard or with the API (checkoutTheme). -->
<a href="https://payments.cosmospay.lat/cmh9a1q7r0000l208x9k4d1pz">
  Pay with Cosmos Pay
</a>
```

[创建支付链接](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments)

#### 支付链接和二维码 (无需代码)

在控制台中创建链接，通过聊天、邮件或打印的二维码分享。

[创建支付链接](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments)

#### API 和 SDK (您自己的界面)

从您的服务器创建支付意图，自行设计支付界面，并通过签名 Webhook 接收结果。

```ts
import { Client } from "@cosmosapp/pay_sdk";

const client = new Client({ apiKey: process.env.COSMOS_PAY_API_KEY });
const intent = await client.paymentIntents.createPay({
  destination: "G…YOUR_ACCOUNT",
  amount: "25",
});
// send your customer to the hosted checkout
const checkoutUrl = "https://payments.cosmospay.lat/" + intent.id;
```

[阅读 API 参考](https://dev.cosmospay.lat/docs/api/)

#### 电商插件 (即将推出)

WooCommerce 和 Shopify 插件，无需编写代码即可在您的店铺中收款。

[告诉我们您使用哪个店铺平台](https://payments.cosmospay.lat/integrations?lang=zh#contact)

无论选择哪种方式，都请在服务器端通过 Webhook 或 API 确认支付。

### 只需 几行代码。

在服务器上创建支付，分享收银台链接，支付完成后由 Webhook 通知您。

- 提供 OpenAPI 文档的 REST API
- TypeScript SDK：@cosmosapp/pay_sdk
- 使用 HMAC-SHA256 签名的 Webhook
- 测试密钥（dv_）和正式密钥（prod_）

- [阅读文档](https://dev.cosmospay.lat/docs/)
- [API 参考](https://dev.cosmospay.lat/docs/api/)

#### REST

```bash
curl https://api.cosmospay.lat/cosmos-api/v1/payment-intents/pay \
  -H "Authorization: Bearer $COSMOS_PAY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "chain": "stellar",
    "destination": "G…YOUR_ACCOUNT",
    "amount": "25",
    "assetCode": "USDC",
    "assetIssuer": "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN",
    "msg": "Order #1001",
    "checkoutTheme": "ticket"
  }'
```

#### TypeScript SDK

```ts
import { Client } from "@cosmosapp/pay_sdk";

const client = new Client({ apiKey: process.env.COSMOS_PAY_API_KEY });
const intent = await client.paymentIntents.createPay({
  destination: "G…YOUR_ACCOUNT",
  amount: "25",
});
// send your customer to the hosted checkout
const checkoutUrl = "https://payments.cosmospay.lat/" + intent.id;
```

#### Webhook

```json
{
  "id": "evt_01JB…",
  "type": "PAYMENT_INTENT_SUCCEEDED",
  "createdAt": "2026-10-24T22:36:56.000Z",
  "data": {
    "id": "cmh9a1…",
    "status": "SUCCEEDED",
    "amount": "25",
    "txHash": "6864…2e54"
  }
}
```

响应中的 id 即为链接：https://payments.cosmospay.lat/<id>

### 三种方式 开始收款。

今天就从一个链接开始，需要时再接入 API。每种方式都使用同一套收银台、控制台和 Webhook。

#### 支付链接 (无需代码)

在控制台中创建链接，通过聊天、邮件或二维码分享。

- 固定金额，或由付款人自定金额
- 付款人可在钱包中看到的留言
- 在控制台中查看实时状态

[创建支付链接](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments)

#### 托管收银台 (少量代码)

将客户引导至由我们托管的收银台，内含二维码、钱包按钮和实时状态。

- 四款现成设计
- 提供中文、英语、西班牙语、葡萄牙语、法语、德语和印地语版本
- 其他网站无法嵌入的页面

[查看集成选项](https://payments.cosmospay.lat/integrations?lang=zh)

#### 支付 API (完全掌控)

从您的服务器创建支付意图，并通过签名 Webhook 接收结果。

- REST，提供 OpenAPI 文档
- TypeScript SDK
- 使用 HMAC-SHA256 签名的 Webhook

[阅读文档](https://dev.cosmospay.lat/docs/)

### 相关指南

[查看全部指南](https://payments.cosmospay.lat/learn?lang=zh)

#### [如何在网站上添加加密货币支付按钮或收银台](https://payments.cosmospay.lat/learn/crypto-payment-button?lang=zh)

加载一个脚本，为支付链接添加支付按钮或嵌入式收银台，并在服务器上确认支付。

#### [如何在线接受 USDC 支付](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=zh)

通过支付链接、托管收银台或 API 收取 USDC，并先在测试网上试用。

#### [如何在 WhatsApp 上发送支付链接](https://payments.cosmospay.lat/learn/whatsapp-payment-links?lang=zh)

在控制台中创建链接，通过聊天发送或打印其二维码，付款完成时即可看到。

### 立即开始接受 稳定币支付。

创建免费账户，生成测试密钥，今天就发出您的第一个支付链接。

[创建支付链接](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments)

#### 联系我们

关于套餐、集成或受保护付款的问题：告诉我们，我们会通过邮件回复。

[organization@cosmospay.lat](mailto:organization@cosmospay.lat)