Widget de cupones

El widget del cupón presenta las instrucciones o la referencia generada para un cupón o método de pago en efectivo compatible. Utiliza un token de pedido existente; no crea ni paga un segundo pedido.

Ciclo de vida del cupónPreguntar a Athia sobre esto#

Abrir el widgetPreguntar a Athia sobre esto#

await DeunaSDK.initVoucherWidget({
  orderToken,
  language: 'en',
  callbacks: {
    onSuccess: (data) => showVoucherInstructions(data),
    onError: (error) => showRecovery(error),
    onClosed: () => showPaymentMethods(),
    onPaymentProcessing: () => disableDuplicateActions(),
  },
});

await deunaSDK.initVoucherWidget({
  orderToken,
  mode: 'modal',
  language: 'en',
  callbacks: {
    onSuccess: showVoucherInstructions,
    onError: showRecovery,
    onClosed: showPaymentMethods,
    onDownloadFile: ({type, data}) => saveVoucher({type, data}),
  },
});

let callbacks = VoucherCallbacks()
callbacks.onSuccess = { data in showVoucherInstructions(data) }
callbacks.onError = { error in showRecovery(error) }
callbacks.onClosed = { _ in showPaymentMethods() }

deunaSDK.initVoucher(
    orderToken: orderToken,
    callbacks: callbacks,
    language: "en"
)

val callbacks = VoucherCallbacks().apply {
    onSuccess = { data -> showVoucherInstructions(data) }
    onError = { error -> showRecovery(error) }
    onClosed = { showPaymentMethods() }
}

deunaSDK.initVoucherWidget(
    context = this,
    orderToken = orderToken,
    callbacks = callbacks,
    language = "en"
)

ParámetrosPreguntar a Athia sobre esto#

Finalización y estado de pagoPreguntar a Athia sobre esto#

onSuccess significa que la experiencia del cupón ha completado su acción del cliente compatible. El cobro del cupón suele ocurrir más tarde, fuera de la aplicación. Mantenga el pedido pendiente en su interfaz hasta que su parte posterior observe el estado final a través de un webhook verificado o una recuperación de API.

Recibos y entrega de archivosPreguntar a Athia sobre esto#

Una respuesta de pago de referencia puede contener un reference_processors array. Cada entrada de procesador disponible puede proporcionar un código de barras, fecha de vencimiento, nombre del procesador y la URL del recibo HTML o PDF alojado. Debido a que este campo es un array, la experiencia de recibos alojados puede presentar múltiples recibos cuando el pago procesado devuelve múltiples referencias de procesadores.

El procesador determina qué campos de la factura están presentes. No se debe generar una URL de PDF a partir de un código de barras ni asumir que todos los métodos de referencia tienen formatos HTML y PDF.

Para React Native, verifique el discriminador en lugar de asumir que el payload es siempre un cuerpo de archivo:

import {DownloadType} from '@deuna/react-native-sdk';

const onDownloadFile = async ({type, data}) => {
  if (type === DownloadType.URL) {
    await openTrustedReceiptUrl(data);
    return;
  }

  await saveBase64VoucherImage(data);
};

Valide cualquier URL antes de abrirla o recuperarla, utilice HTTPS, mantenga los archivos descargados en una ubicación protegida o seleccionada por el usuario, y no registre el contenido de la factura. Una factura guardada es evidencia para el cliente; no es una confirmación de pago autoritativa.

Móvil y accesibilidadPreguntar a Athia sobre esto#

• Presente el Vale desde una pantalla visible, no desde una llamada de retorno de fondo.
• Mantenga las acciones de descarga, copia y cierre accesibles con un tamaño de texto del 200%.
• En React Native, solicite solo la capacidad de almacenamiento o compartir necesaria para su implementación de guardado.
• Devuelva el foco al control que abrió el modal y anuncie los errores de carga a través de la API de accesibilidad de la plataforma.
• Pruebe la referencia con nombres de comerciantes largos, instrucciones localizadas largas y dispositivos estrechos.

Resolución de problemasPreguntar a Athia sobre esto#

Referencias relacionadasPreguntar a Athia sobre esto#