Skip to content

Integraciones sin código (Wix, Shopify, Webflow) ​

Puede añadir SOAMTAR a cualquier creador de sitios web, incluso sin servidor propio.

Wix (con Velo) ​

Wix permite ejecutar código en el servidor de forma segura con Velo.

1. Backend (backend/pay.jsw) ​

Cree un archivo de web method para mantener su clave API en el servidor. Guarde la clave en el Secrets Manager de Wix (con el nombre SOAMTAR_SECRET_KEY), nunca en el código, y calcule el precio en el servidor: cualquiera puede llamar a una web method con cualquier argumento.

javascript
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. Frontend ​

Llame a su función de backend al hacer clic en el botón.

javascript
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 (botón personalizado) ​

Si no usa la aplicación oficial, puede añadir un botón personalizado a su tema.

  1. Vaya a Tienda online > Temas > Personalizar.
  2. Añada una sección HTML personalizado.
  3. Pegue el siguiente código, con un enlace de pago creado en su panel SOAMTAR:
html
<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 ​

En estas plataformas, use un enlace de pago de su panel. No requiere código ni clave API: el cliente introduce su número Orange Money en la página de SOAMTAR y confirma con su PIN.

Botón universal ​

Pegue este código en un bloque «Embed» o «Code»:

html
<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>

Seguridad sin código ​

  • Claves API: NUNCA pegue una clave sk_live_… o sk_test_… en un bloque HTML ni en el código frontend de Wix/Webflow. Use siempre un entorno de backend (como Velo en Wix) o enlaces de pago generados de antemano.
  • Webhooks: en las plataformas sin código, recomendamos Zapier o Make para recibir nuestras notificaciones y actualizar su base de datos. Una URL de catch hook acepta todo lo que cualquiera le envíe: antes de actualizar nada, vuelva a leer el pago con GET/v1/payments/{id} (clave secreta guardada en la conexión del escenario) y use ese estado.

SOAMTAR Payment API Documentation.