Completar el proceso de compra en la Web.
Seleccione la integración DEUNA Web compatible para completar el proceso de compra y migre desde la superficie de inicio de sesión obsoleta.
In questa pagina
El SDK DEUNA Web actual no expone initCheckout. Cree la página de compra propia y incruste initPaymentWidget para el pago, o utilice el SDK nativo mantenido cuando la compra se realiza en una aplicación móvil.
Seleccione la integración compatible#
Diagramma di flusso
| Necesario | Superficie compatible |
|---|---|
| Añada métodos de pago a una compra web existente | Widget di pagamento per Web |
| Almacene una tarjeta o utilice Click to Pay | Elementos y almacenamiento de tarjetas |
| Continúe con 3DS o una acción APM | Prossimo passo |
| Cree una compra móvil nativa | iOS, Androido Reazione nativo |
| Incorpore una compra web existente | SDK Web en un WebView móvil, con las limitaciones documentadas |
Arquitectura web recomendada#
01 · merchant UI
Recopile los datos de la compra
Cargos, contactos, envíos y campos de consentimiento en su aplicación.
02 · merchant backend
Crea l'ordine
Valide los totales y envíe el contrato de pedido compatible.
03 · DEUNA widget
Recopile el pago
Abra el Widget de pago con el token de pedido devuelto.
04 · merchant backend
Verifique y complete
Utilice el estado final de DEUNA y las webhooks.
JavaScript
const {orderToken, merchantOrderId} = await createOrderFromServer(checkoutState);
await DeunaSDK.initPaymentWidget({
orderToken,
mode: 'target',
target: '#payment-step',
callbacks: {
onSuccess: () => renderVerifiedResult(merchantOrderId),
onError: showPaymentRecovery,
onClosed: () => returnToPaymentMethods(),
onResize: ({height}) => resizePaymentStep(height),
},
});Migración desde initCheckout#
- Mantenga el estado del carrito, envío, facturación, cliente y consentimiento en la aplicación del comerciante.
- Mueva la creación del pedido al backend del comerciante si se realizó en el cliente.
- Sostituire
initCheckout(...)coninitPaymentWidget({orderToken, ...}). - Mapee el manejo de finalización de compra anterior a
onSuccess, luego obtenga el pedido en el backend. - Mapee la analítica de ciclo de vida actual a Eventi SDK.
- Pruebe los anchos de la aplicación móvil, la edición de la dirección, la navegación del navegador, 3DS, redirecciones APM y la recuperación después de la actualización.
Propiedad del estado#
| Stato | Propietario |
|---|---|
| Contenido del carrito, precios, inventario, envío, impuestos | Rivestimento di merce |
| Formulario de compra y navegación por pasos | Aplicación del comerciante |
| Métodos de pago y entrada de credenciales compatibles | Widget de pago DEUNA y conexiones configuradas |
| Procesamiento de pagos y estado de pedido normalizado | DEUNA API |
| Decisión de cumplimiento | Backend del comerciante después de la verificación |
Diseño adaptable#
Coloque el objetivo de pago en un flujo de una columna en las pantallas pequeñas. Evite la colocación de la información de resumen de la compra y el contenido de pago debajo de su punto de interrupción de diseño, mantenga el objetivo en width: 100%, y responda a onResize. Los encabezados y pies de página no deben cubrir los desafíos del emisor ni la acción del widget.