Intégrations No-Code (Wix, Shopify, Webflow)

Vous pouvez intégrer SOAMTAR sur n'importe quel constructeur de site, même sans serveur dédié.

Wix (via Velo)

Wix permet d'exécuter du code côté serveur de manière sécurisée via Velo.

1. Backend (backend/pay.jsw)

Créez un fichier web method pour garder votre clé API côté serveur. Rangez la clé dans le Secrets Manager de Wix (nommez-la SOAMTAR_SECRET_KEY), jamais dans le code, et calculez le prix côté serveur : n'importe qui peut appeler une web method avec n'importe quel argument.

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

// La page peut appeler cette fonction avec n'importe quel argument : un id produit, jamais un prix.
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');   // Secrets Manager de Wix
  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),   // prix lu côté serveur
      currency: "SLE",
      merchant_ref: merchantRef
    })
  });
  const result = await response.json();
  // Ne renvoyez que ce dont la page a besoin, jamais la réponse brute de l'API.
  return { payment_url: result.data ? result.data.payment_url : null };
}

2. Frontend

Appelez votre fonction backend lors du clic sur un bouton.

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

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

---

Shopify (Bouton Personnalisé)

Si vous n'utilisez pas l'App officielle, vous pouvez ajouter un bouton personnalisé dans votre thème.

1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
2. Ajoutez une section HTML personnalisé.
3. Collez le code suivant (utilisez un lien généré via votre tableau de bord SOAMTAR) :

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

---

Webflow / Squarespace / Bubble

Sur ces plateformes, utilisez un lien de paiement créé dans votre tableau de bord. Il ne demande ni code ni clé API : le client saisit son numéro Orange Money sur la page SOAMTAR et confirme avec son code PIN.

Bouton universel

Copiez ce code dans un bloc « Embed » ou « Code » :

<a href="https://app.so-amtar.com/pay/votre-lien-fixe"
   style="display:inline-block; background:#000; color:#fff; padding:12px 24px; border-radius:8px; text-decoration:none;">
  Payer en toute sécurité avec Orange Money
</a>

Sécurité No-Code

• Clés API : ne collez JAMAIS une clé sk_live_… ou sk_test_… dans un bloc HTML ou dans le code frontend de Wix/Webflow. Utilisez toujours un environnement backend (comme Velo sur Wix) ou des liens de paiement pré-générés.
• Webhooks : Pour les plateformes No-Code, nous recommandons d'utiliser Zapier ou Make pour recevoir nos notifications et mettre à jour votre base de données. Une URL de catch hook accepte tout ce qu'on lui envoie : avant toute mise à jour, relisez le paiement avec GET/v1/payments/{id} (clé secrète rangée dans la connexion du scénario) et utilisez ce statut.