无代码集成（Wix、Shopify、Webflow）

即使没有自己的服务器，您也可以在任何建站工具中添加 SOAMTAR。

Wix（使用 Velo）

Wix 允许您通过 Velo 在服务器端安全地运行代码。

1. 后端（backend/pay.jsw）

创建一个 web method 文件，将您的 API 密钥保留在服务器上。请将密钥存放在 Wix 的 Secrets Manager 中（命名为 SOAMTAR_SECRET_KEY），切勿写在代码里；并在服务器上计算价格：任何人都可以用任意参数调用 web method。

import { fetch } from 'wix-fetch';
import { getSecret } from 'wix-secrets-backend';
import wixData from 'wix-data';

// The page can call this with any argument: accept a product id, never a price.
export async function createPayment(productId) {
  const product = await wixData.get('Products', productId);
  if (!product) throw new Error('Unknown product');

  const apiKey = await getSecret('SOAMTAR_SECRET_KEY');   // Wix Secrets Manager
  const merchantRef = 'WIX-' + productId + '-' + Date.now();

  const response = await fetch("https://app.so-amtar.com/v1/payments", {
    method: 'post',
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apiKey,
      "Idempotency-Key": merchantRef
    },
    body: JSON.stringify({
      amount: Number(product.price).toFixed(2),   // price read on the server
      currency: "SLE",
      merchant_ref: merchantRef
    })
  });
  const result = await response.json();
  // Return only what the page needs, never the raw API response.
  return { payment_url: result.data ? result.data.payment_url : null };
}

2. 前端

点击按钮时调用后端函数。

import { createPayment } from 'backend/pay.jsw';
import wixLocation from 'wix-location';

$w("#payButton").onClick(async () => {
  const result = await createPayment("YOUR_PRODUCT_ID");
  if (result.payment_url) {
    wixLocation.to(result.payment_url);
  }
});

---

Shopify（自定义按钮）

如果您不使用官方应用，可以在主题中添加自定义按钮。

1. 进入 在线商店 > 模板 > 自定义。
2. 添加一个 自定义 HTML 区块。
3. 粘贴以下代码，并使用在 SOAMTAR 控制台中创建的支付链接：

<a href="https://app.so-amtar.com/pay/your-product"
   style="background: #FF7900; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold;">
  Pay with Orange Money
</a>

---

Webflow / Squarespace / Bubble

在这些平台上，请使用控制台中的支付链接。它无需代码，也无需 API 密钥：客户在 SOAMTAR 页面上输入其 Orange Money 号码，并用 PIN 确认。

通用按钮

将此代码粘贴到 “Embed” 或 “Code” 区块中：

<a href="https://app.so-amtar.com/pay/your-fixed-link"
   style="display:inline-block; background:#000; color:#fff; padding:12px 24px; border-radius:8px; text-decoration:none;">
  Pay securely with Orange Money
</a>

无代码场景的安全

• API 密钥：切勿将 sk_live_… 或 sk_test_… 密钥粘贴到 HTML 区块或 Wix/Webflow 的前端代码中。请始终使用后端环境（如 Wix 的 Velo）或预先生成的支付链接。
• Webhooks：在无代码平台上，我们建议使用 Zapier 或 Make 接收我们的通知并更新您的数据库。catch hook URL 会接受任何人发送的任何内容：在更新任何数据之前，请用 GET/v1/payments/{id} 重新读取该支付（密钥保存在场景的连接中），并以该状态为准。