Saltar al contenido principal
En esta página

Descripción general#

La integración tiene cuatro partes. Su servidor es propietario del pedido y de la clave privada; el navegador recibe solo un token de pedido y su clave pública.

server
Crear orden
El backend crea y tokeniza el pedido.
browser
Abrir widget de pago
El cliente selecciona un método de pago y realiza el pago.
deuna
Ruta y proceso
DEUNA aplica reglas de enrutamiento, proveedor y respaldo.
server
Confirmar
Un webhook verificado confirma el estado final.

Antes de comenzar#

  • Claves públicas y privadas de Sandbox: consulte Claves API.
  • El SDK Web cargado desde el CDN DEUNA.
  • Un punto final de backend que crea un PAYMENT-LINK orden y devuelve su token de orden.
  • Un punto final HTTPS público para webhooks DEUNA.

1. Crea y tokeniza el pedido.#

Cree el pedido en su backend con la clave API privada. Devuelve sólo su token al navegador.

server.jsJavaScript
app.post('/api/deuna/checkout-session', async (request, response) => {
  const cart = await carts.get(request.session.cartId);
  const order = await createDeunaOrder({
    orderType: 'PAYMENT-LINK',
    currency: cart.currency,
    items: cart.items,
    totalAmount: cart.totalAmount,
  });

  response.json({orderToken: order.token});
});

2. Cargue e inicialice el SDK web.#

HTML
<script crossorigin src="https://cdn.deuna.io/web-sdk/v1.7/index.js"></script>
<script type="module">
  await DeunaSDK.initialize({
    publicApiKey: 'YOUR_PUBLIC_API_KEY',
    env: 'sandbox',
  });
</script>

3. Abrir el Widget de Pago#

checkout.jsJavaScript
const {orderToken} = await fetch('/api/deuna/checkout-session', {
  method: 'POST',
}).then((response) => response.json());

await DeunaSDK.initPaymentWidget({
  orderToken,
  callbacks: {
    onSuccess: async (order) => {
      await DeunaSDK.close();
      showConfirmation(order);
    },
    onError: (error) => showRetry(error),
    onClosed: () => showCart(),
  },
});

El SDK actual no expone initCheckoutEl Widget de Pago es el flujo de SDK compatible para aceptar pagos dentro de un carrito de compra en línea existente.

4. Confirmar con webhooks#

Utilice devoluciones de llamada del navegador para actualizar la interfaz, pero complete el pedido solo después de que su backend reciba y verifique el webhook correspondiente. Ver Verificar firmas de webhooks.

Lista de verificación de puesta en marcha#