الدمج بدون برمجة (Wix وShopify وWebflow)

يمكنك إضافة SOAMTAR إلى أي منشئ مواقع، حتى بدون خادم خاص بك.

Wix (مع Velo)

يتيح Wix تشغيل شيفرة على الخادم بأمان عبر Velo.

1. الخادم الخلفي (backend/pay.jsw)

أنشئ ملف web method لإبقاء مفتاح API على الخادم. احفظ المفتاح في Secrets Manager الخاص بـ Wix (باسم 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: يُدخل العميل رقم Orange Money الخاص به في صفحة SOAMTAR ويؤكد برمز 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. استخدم دائمًا بيئة خادم خلفي (مثل Velo في Wix) أو روابط دفع مُنشأة مسبقًا.
• Webhooks: على منصات البرمجة المنخفضة، نوصي باستخدام Zapier أو Make لاستقبال إشعاراتنا وتحديث قاعدة بياناتك. يقبل عنوان catch hook كل ما يرسله إليه أي شخص: قبل تحديث أي شيء، أعد قراءة الدفعة عبر GET/v1/payments/{id} (مع حفظ المفتاح السري في اتصال السيناريو) واعتمد تلك الحالة.