Aceptar pagos en un carrito de compra en línea
Cree un pedido en su sistema y abra el Widget de Pago de DEUNA utilizando el SDK distribuido a través de CDN.
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-LINKorden 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.