Payment Widget

Suggest Edits

El Payment Widget es una componente web que acepta pagos en mas de 50+ metodos de pago simplificando la validacion de campos, el manejo de errores y cumplimiento con estandares PCI DSS. Úselo dentro de su experiencia de checkout ó como un componente independiente.

Adicionalmente, puedes usar nuestras capacidades avanzadas de pago solo con una integraccion. Esto incluye compras con soporte a:

  • MSI (Meses sin Intereses)
  • MCI (Meses con Intereses)
  • Flujo 3DS
  • Autorización y Captura
  • OTP (one-time password) con tarjetas Diners Club
  • Revision manual

Requisitos

Si cuentas con estos requisitos entonces estas listo para comenzar a integrarlo:

  1. Tener una cuenta registrada y un par de credenciales de desarrollo. Refiérase a la seccion Empecemos DEUNA para conocer mas acerca al respecto.
  2. Conocimientos en desarrollo con Javascript o Typescript
  3. NPM versión mínima 9.x o posterior

1. Importa el widget a tu aplicación

Carga nuestro widget por medio de la URL oficial para el ambiente deseado. Como buena practica, procura usar nuestro CDN para alta disponibilidad y no desde tu propio servidor. El atribute crossorigin brinda soporte para CORS, definiendo como el elemento script maneja llamadas de origin cruzado.

Producción:

<!DOCTYPE html>
<html>
  <!-- Import widget from our CDN -->
	<script crossorigin src="https://cdn.deuna.io/now-widget/latest/index.js"></script>
  <!-- The rest of your imports -->
  .
  .
</html>

Sandbox:

<!DOCTYPE html>
<html>
  <!-- Import widget from our CDN -->
	<script crossorigin src="https://cdn.stg.deuna.io/now-widget/latest/index.js"></script>
  <!-- The rest of your imports -->
  .
  .
</html>

📘

El ambiente sandbox

Puede contener funcionalidades experimentales que no estan disponibles en producción. Si tiene dudas o problemas no dude en escribirnos a [email protected].

2. Configura tu experiencia de pago

Inicializacion

Ahora el Payment Widget estará disponible en el contexto global del navegador. Puedes inicializarlo asi:

const paymentWidget = new window.DeunaPay();

En tu aplicacion agrega un contendedor HTML con un id para poder usarlo como referencia desde el widget para poder embedirlo al momento de configurarlo.

<!DOCTYPE html>
<html>
  <!-- Importa desde nuestro CDN -->
	<script crossorigin src="https://cdn.deuna.io/now-widget/latest/index.js"></script>
  <!-- El resto de tus assets -->
  .
  .
<body>
  .
  .
  <div id="payment-widget-id"></div>
  .
  .
</body>
</html>

Configuracion

Ahora usa tus credenciales de desarrollo para configurar el widget usando el metodo configure:

const config = {
   orderToken: {orderToken},
   apiKey: {apiKey},
   env: 'staging' | 'production',
   target: 'payment-widget' // DOM ElementID
}

paymentWidget.configure(config)

El metodo configure soporta los siguientes parámetros:

Nombre de. parámetroDescripcion
orderTokenToken generado desde el servidor usando la llamada al API: crear token de orden
apiKeyCredencial de desarrollo publica. Refiérase a la seccion Como obtener mis API Keys
envEl ambiente de desarrollo al cual se conectará el widget. Por defecto, el valor es production
targetEl id del elemento HTML que se usará para embedir el widget.

3. Despliegue el modal

Una vez configurado el SDK, puedes utilizar el método show para desplegar el Payment Widget como modal en tu aplicación. Este método puede parametrizar las funciones callback que manejar los eventos de éxito de pago y cierre del modal.

const params = {
  callbacks: {
    onPaymentSuccess(order) {
      // Executed once the payment has been accepted
      console.log('onPaymentSuccess', order)
    },
    onClose(error) {
      // Executed when the modal is dismissed
      console.log('onPaymentSuccess', error)
    }
  }
}

pay.show(params)

El formato de order puede encontrarse en la referencia para el llamado al API Obtener orden por token.

Los estados de la orden que dispara el callback onPaymentSuccess son:

  • Approved 
    {
 // order payload: https://docs.deuna.com/reference/get-order-by-token
 	 ...,
   status: 'succeeded'
   payment: {
    data: {
      status: 'processed', // or 'authorized'
      ...
    }
  }
}
  • Pending 
    {
 // order payload: https://docs.deuna.com/reference/get-order-by-token
 	 ...,
   status: 'pending'
   payment: {
    data: {
      status: 'processing', // or 'authorized'
      method_type: 'credit_card',
      ...
   	}
  }
}
  • Manual Review 
    {
 // order payload: https://docs.deuna.com/reference/get-order-by-token
 	 ...,
   status: 'pending'
   payment: {
    data: {
      status: 'manual_review', // or 'authorized'
      ...
    }
  }
}

Realiza tu primera compra

Felicitaciones haz logrado integrar el Payment Widget. Una vez configurado puedes realizar una prueba de compra en unos sencillos pasos, a continuación te presentamos la información necesaria para la prueba, tarjetas de ejemplo y un demo de como se verá una vez realizada la instalación

Codigo: Payment Widget

WEB

Datos de prueba para pagos

Prueba con proveedores soportados

SDK iOS

Integra tu aplicacion movil en iOS

SDK Android

Integra tu aplicacion movil en Android

Updated 5 months ago