Esta documentación detalla los pasos necesarios para integrar la funcionalidad de Link de Pagos en una aplicación de pago. Nuestro Link de Pagos permite a los comercios crear enlaces de pago para sus clientes, lo que facilita y agiliza el proceso de pago a través de la plataforma de DEUNA.

Nota
Esta referencia cubre el paso a paso de instalación de nuestro Link de Pagos. Si prefieres aprender haciendo, echa un vistazo a una integración de muestra.

Antes de Comenzar

• Este documento supone que ya tienes un conocimiento básico de JavaScript y Typescript.
• Disponer de las credenciales de DEUNA. Para poder obtener tus credenciales como el Private API Key debes estar registrado y haber solicitado las credenciales de acceso de tu comercio en nuestro panel de administrador.

Configuración

1. Creación de un Link de Pagos

La metodología para generar un enlace de pago consiste en la tokenización de una orden de tipo PAYMENT_LINK.

No obstante, es importante destacar que existen modificaciones en lo que respecta al objeto de la orden, que se detallan a continuación:

💡

El order_type de la orden a tokenizar debe ser de tipo PAYMENT_LINK

curl --location --request POST 'https://api.stg.deuna.io:443/merchants/orders' \
--header 'Content-Type: application/json' \
--header 'x-api-key: {{x-api-key}}' \
--data-raw '{
    "order_type": "PAYMENT_LINK",
    "order": {
        "user_id": "95469909-0d54-4e1b-955e-7e0ba9328fbf",
        "order_id": "order-test-123",
        "store_code": "all",
        "total_amount": 5000,
        "currency": "MXN",
        "items_total_amount": 5000,
        "sub_total": 5000,
        "items": [
          {
              "id": "SP40355793993780",
              "name": "producto test",
              "description": "descripcion de producto",
              "total_amount": {
                  "amount": 5000,
                  "currency": "MXN",
                  "currency_symbol": "$",
                  "original_amount": 5000
              },
              "unit_price": {
                  "amount": 5000,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "quantity": 1,
              "image_url": "https://cdn.shopify.com/s/files/1/0586/8339/2052/products/pizza-con-chorizo-jamon-y-queso-1080x671.jpg?v=1656095183",
              "included_in_subscription": true
          }
      ],
			"include_payment_options": [
	        {
	            "payment_method": "credit_card",
	            "processors": ["dlocal"]
	        }
	    ],
			"billing_address": {
          "first_name": "Jhon",
          "last_name": "Doe",
          "phone": "+549222222",
          "identity_document": "1111111111-1",
          "lat": -0.1602236,
          "lng": -78.49664,
          "address1": "Av. del Parque, Quito 170132, Ecuador",
          "address2": "12",
          "city": "Quito",
          "zipcode": "170132",
          "state_name": "Pichincha",
          "state_code": "PICHINCHA",
          "country": "EC",
          "country_code": "EC",
          "additional_description": "12",
          "address_type": "home",
          "email": "[email protected]"
      }
    },   
		"checkout_modules": [
        {
            "name": "LoginPattern",
            "url": "http://cdn.deuna.com/my-pattern/index.js"
        },
        {
            "name": "PaymentFormPattern"
        }
    ]
}'

Respuesta:

{
    "data": {
        "id": "3d095a95-7da4-4e62-a57c-8c9c4d7dd9db",
        "user_id": "930fedbb-a07c-44db-8514-ecf73fdee1a7",
        "card_holder": "Esteban Posada",
        "card_holder_dni": "185396924",
        "company": "visa",
        "last_four": "1111",
        "first_six": "411111",
        "expiration_date": "11/25",
        "is_valid": true,
        "verified_by": "card_verifier",
        "verified_at": "0001-01-01T00:00:00Z",
        "created_at": "2023-07-06T15:48:13.796043849Z",
        "updated_at": "2023-07-06T15:48:13.796056921Z",
        "deleted_at": null
    }
}

Configuración del Body para Link de Pagos

Aquí un ejemplo de cómo debería ser el body para una orden de Link de Pagos.

📘

La propiedad checkout_modules define los módulos que de manera dinámica queremos mostrar.

Configuración del Objeto order para Link de Pagos

Aquí un ejemplo de las propiedades del objeto order del body de un Link de Pagos.

📘

La propiedad include_payment_options define los métodos de pago disponibles para la orden.

Link de Pagos

El enlace de pago (de único uso) se devuelve a través del atributo payment_link en la respuesta retornada por la tokenización:

{
 ...
 "payment_link": "https://pay.stg.deuna.com/{{order_token}}",
 ...
}

🚧

Un link de pago de "único uso" significa que solo se puede utilizar una vez. Una vez que la transacción se completa, el link ya no está disponible para su uso.

2. Integrar el Link de Pagos

Una vez que haya configurado la funcionalidad de Link de pagos, deberá integrarla en su aplicación de pago. Esto implica la creación de una interfaz de usuario para que los usuarios puedan hacer uso de sus enlaces de pago, así como la implementación de la lógica de procesamiento de pagos en su aplicación.

<!DOCTYPE html>
<html>
  .
  .
<body>
 <div class="container">
        <h1>Realizar Pago</h1>
        <p>Haz clic en el botón "Pagar con Deuna" para continuar con el pago.</p>
        <button id="payButton" class="pay-button" onclick="openDeunaPayment()">Pagar con Deuna</button>
    </div>
    <script src="app.ts"></script>
</body>
</html>

function openDeunaPayment() {
    const paymentLink = "https://pay.stg.deuna.com/{{order_token}}";
    window.location.href = paymentLink; // Abre el enlace en la misma ventana
}

3. Probar la funcionalidad de Link de pagos

Previo a la implementación de la funcionalidad de Link de Pagos en su aplicación, resulta fundamental llevar a cabo una serie de pruebas rigurosas con el propósito de garantizar el correcto funcionamiento de la misma. Estas pruebas pueden abarcar desde la integración con la plataforma de pagos en línea hasta la realización de pruebas de usuario en su aplicación.

4. Lanzar la funcionalidad de Link de pagos

Una vez que haya completado las pruebas de la funcionalidad de Link de Pagos y esté seguro de su correcto funcionamiento, está listo para implementarla en su aplicación de pagos. Asegúrese de informar adecuadamente a los usuarios sobre esta nueva funcionalidad y brinde instrucciones claras sobre cómo aprovecharla al máximo.

Siguiendo estos pasos, podrá llevar a cabo la integración de la funcionalidad de Link de Pagos en su aplicación de pagos, proporcionando a sus usuarios una vía rápida y segura para efectuar pagos en línea.

Módulos Principales

Actualmente soportamos módulos que te permitirán diseñar tu solución de manera personalizada. Estos incluyen:

Autenticación

Datos Personales

👩‍💻

Además puedes agregar módulos remotos. Es decir, patrones alojados en un repositorio independiente a través de una URL. Revisa más en el apartado de configuración.

Direcciones

Detalle de la Orden

Pagos

📘

Además puedes agregar módulos remotos. Es decir, patrones alojados en un repositorio independiente a través de una URL. Revisa más en el apartado de configuración.

Preguntas Frecuentes

Obtén respuestas a preguntas comunes acerca de nuestro Payment Link