Completar el pago en la Web
Seleccione la integración de Web de DEUNA compatible para un pago completo y migre desde la superficie de initCheckout obsoleta.
En esta página
El SDK de Web de DEUNA actual no expone initCheckout. Desarrolle la página de pago propia y la integre initPaymentWidget para el pago, o utilice el SDK nativo mantenido cuando la página de pago se encuentra en una aplicación móvil.
Seleccione la integración compatible#
Diagrama de flujo
| Necesario | Superficie compatible |
|---|---|
| Añada métodos de pago a una página de pago web existente | Widget de pago para Web |
| Almacene una tarjeta o utilice Click to Pay | Elementos y almacenamiento de tarjetas |
| Continúe con 3DS o una acción de APM | Siguiente Acción |
| Desarrolle una página de pago móvil nativa | iOS, androideo Reaccionar nativo |
| Envolva una página de pago web existente | SDK web en un WebView móvil, con las limitaciones documentadas |
Arquitectura web recomendada#
01 · merchant UI
Recopile los datos de la página de pago
Su carrito, campos de contacto, envío y consentimiento en su aplicación.
02 · merchant backend
Crear el pedido
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.
- Reemplazar
initCheckout(...)coninitPaymentWidget({orderToken, ...}). - Mapee el manejo anterior de la finalización de la página de pago a
onSuccess, y luego obtenga el pedido en el backend. - Mapee el análisis de ciclo de vida anterior al actual Eventos del SDK.
- Pruebe los anchos de la aplicación móvil, la edición de direcciones, la navegación del navegador, 3DS, redirecciones de APM y la recuperación después de la actualización.
Propiedad del estado#
| Estado | Propietario |
|---|---|
| Contenido del carrito, precios, inventario, envío, impuestos | backend comercial |
| Formulario de pago y navegación por pasos | Aplicación del comerciante |
| Métodos de pago y entrada de credenciales compatibles | Widget de Pago de DEUNA y conexiones configuradas |
| Procesamiento de pagos y estado normalizado del pedido | DEUNA API |
| Decisión de cumplimiento | Backend del comercio después de la verificación |
Diseño adaptable#
Coloque el campo de pago en un flujo de una columna en pantallas pequeñas. Evite mostrar el resumen del pedido y el contenido de pago uno al lado del otro debajo de su punto de ruptura, mantenga el campo en width: 100%, y responda a onResize. Los encabezados y pies de página fijos no deben ocultar los desafíos del emisor ni la acción del widget.