Widget de pago para Web

El Widget de Pago muestra los métodos de pago disponibles para un pedido existente y procesa el método seleccionado a través de DEUNA. Soporta tarjetas y métodos alternativos de pago configurados sin exponer credenciales sensibles al código JavaScript del comerciante.

Antes de comenzarPreguntar a Athia sobre esto#

Complete Comience con el SDK Web, cree el pedido en su backend y devuelva únicamente su order_token al navegador.

Abrir widget de pagoPreguntar a Athia sobre esto#

await DeunaSDK.initPaymentWidget({
  orderToken,
  language: 'en',
  callbacks: {
    onSuccess: async () => {
      await DeunaSDK.close();
      await verifyOrderOnBackend();
    },
    onError: ({type, metadata}) => {
      showRecovery({type, code: metadata.code});
    },
    onClosed: (action, metadata) => {
      restorePaymentMethods(action, metadata);
    },
    onCardBinDetected: ({cardBin, cardBrand}) => {
      updateCardOffers(cardBin, cardBrand);
    },
    onInstallmentSelected: ({cardBin, installmentPlanOptionId}) => {
      rememberPlan(cardBin, installmentPlanOptionId);
    },
    onPaymentProcessing: () => disableDuplicateActions(),
    onEventDispatch: (event, payload) => trackSafeEvent(event, payload),
  },
});

Secuencia de integraciónPreguntar a Athia sobre esto#

ParámetrosPreguntar a Athia sobre esto#

Modal o incrustadoPreguntar a Athia sobre esto#

El modal es el predeterminado. Para el modo incrustado:

<div id="deuna-payment" aria-label="Detalles de pago"></div>

await DeunaSDK.initPaymentWidget({
  orderToken,
  mode: 'target',
  target: '#deuna-payment',
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#deuna-payment').style.height = `${Math.ceil(height)}px`;
    },
    onSuccess: verifyOrderOnBackend,
    onError: showRecovery,
  },
});

El selector debe coincidir con un elemento estable. No lo renderice dentro de un elemento que sea display: none durante la inicialización o que cause desbordamiento.

Filtre los métodos de pagoPreguntar a Athia sobre esto#

Omite paymentMethods para que el estado del pedido y la configuración del comerciante determinen la elegibilidad. Proporcione un método para abrir su formulario directamente, o múltiples métodos para restringir la elección.

await DeunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    {paymentMethod: 'credit_card'},
    {paymentMethod: 'wallet', processors: ['click_to_pay']},
  ],
  callbacks,
});

El enrutamiento puede elegir entre los procesadores de tarjetas configurados, por lo que una entrada de tarjeta no necesita normalmente processors list.

Tenga el botón de enviarPreguntar a Athia sobre esto#

await DeunaSDK.initPaymentWidget({
  orderToken,
  hidePayButton: true,
  callbacks,
});

payButton.addEventListener('click', async () => {
  if (!(await DeunaSDK.isValid())) return;

  payButton.disabled = true;
  const result = await DeunaSDK.submit();
  if (result.status === 'error') showRecovery(result);
  payButton.disabled = false;
});

La instancia activa también expone getWidgetState(), getSelectedPaymentMethod(), refetchOrder(), setOrderData(...), setCustomStyles(...)y close(). Utilice solo métodos relevantes para la experiencia activa y serialice las actualizaciones para que un token de pedido antiguo no sobrescriba un nuevo proceso de pago.

Tarjetas divididas e instalacionesPreguntar a Athia sobre esto#

Utilice el comportamiento anidado documentado para un flujo de dos tarjetas configurado:

behavior: {
  paymentMethods: {
    creditCard: {
      splitPayments: {maxCards: 2},
    },
  },
}

Ver División de pagos con tarjeta para la conciliación y las pruebas. Utilice onInstallmentSelected para el exacto installmentPlanOptionId; nunca lo infiera de la información visible.

Manejo de errores y cierrePreguntar a Athia sobre esto#

No muestre mensajes de proveedores brutos. Mapee los tipos y códigos conocidos a guías de usuario localizadas, registre diagnósticos seguros y retroceda a un mensaje de reintento genérico.

Referencias relacionadasPreguntar a Athia sobre esto#