Saltar al contenido principal
Todos los sistemas operativosNovedadesv1
Iniciar sesión

Haga clic para pagar

En esta página

Comience con Haga clic para pagar#

Esta página proporciona una guía completa para integrar con éxito el widget Click to Pay con DEUNA.

Click to Pay se centra en el procesamiento de pagos y la gestión de tarjetas eficientes.

Cómo funciona#

Este widget utiliza tecnología de pago avanzada y seguridad inteligente, basada en El marco de comercio remoto seguro de EMVCo.

Requisitos#

El siguiente contenido enumera todos los requisitos para una integración exitosa con Click to Pay de Master Card:

Pasos de integración#

Ahora que se establecen los requisitos técnicos, puede iniciar la integración.

1. Elige tu integración

Tienes dos opciones para Click to Pay en DEUNA.

Widget de bóveda

El widget de bóveda le permite agregar o seleccionar una tarjeta existente en Click to Pay.

Esta opción obtiene la tarjeta seleccionada y la devuelve para generar un pago vía API DEUNA, pero procesar el pago no es su responsabilidad.

  • Métodos de integración:
  1. SDK iOS
  2. SDK de Android
  3. Integración vía URL

Widget de pago

El widget de pago permite al usuario agregar o seleccionar una tarjeta existente en Click to Pay.

Esta opción obtiene la tarjeta seleccionada y la devuelve para generar un pago, y también procesa el pago.

  • Métodos de integración
  1. SDK Web
  2. SDK iOS
  3. SDK de Android

2. Configure el componente Haga clic para pagar

Active el componente Click to Pay desde el Administrador DEUNA.

  1. Añade el Click to Pay a tu Conexiones de administrador de DEUNA.
  2. Busque "Clic para pagar" e ingrese las credenciales de su cuenta comercial Master Card.
  3. Si elige la integración de URL: en su aplicación, inicie un iFrame con la URL DEUNA (proporcionada por DEUNA).

URL para integración

sandboxPlain text
https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}
productionPlain text
https://elements.deuna.com/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}

Atributos de parámetros de consulta

AtributoDescripción
publicApiKey (obligatorio)Tu clave API pública de DEUNA.
firstName (obligatorio)Nombre del usuario.
lastName (obligatorio)Apellido del usuario.
email (opcional)Correo electrónico del usuario. En caso de que no sea enviado a la integración, se mostrará una pantalla para recopilar el correo electrónico, ya que es un requisito de Click to Pay para iniciar su flujo."
cssFile (opcional)La DEUNA proporcionó el UUID. Esto se aplica sólo a archivos CSS personalizados.
userToken(opcional)El bearer token del usuario de DEUNA. Cuando se envía, todas las acciones del widget se realizan en nombre de ese usuario. Además, al enviar este userToken, no es necesario enviar ni el email, firstName, lastName. Solo será requerido el userTokeny el publicApiKey
int (opcional)Le permite enviar embedded o modal como valor para especificar el tipo de integración a realizar y así habilitar ciertas funcionalidades dependiendo de la integración, como la flecha indicadora para retroceder o cerrar el modal.

3. Consigue un card_id

Después de integrar el componente en su aplicación, debe obtener una card_id para procesar el pago.

A continuación se muestra un ejemplo de cómo integrar la URL utilizando HTML, CSS y JavaScript:

  1. El componente DEUNA maneja la comunicación con Click to Pay, incluido el guardado de la tarjeta.
  2. Después del éxito, DEUNA envía el postMessage con un valido card_id.
  3. El card_id se envía en la solicitud de compra desde su backend para procesar el pago.
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Click to Pay Integration</title>
    <style>
      /* Estilos básicos para el iframe */
      #click-to-pay-iframe {
          width: 100%;
          height: 500px; /* Ajusta la altura según tus necesidades */
          border: none;
      }
    </style>
  </head>
  <body>
    <iframe
      id="click-to-pay-iframe"
      src="https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}"
      allow="payment"
    >
    </iframe>

    <script>
      // Escucha los mensajes de postMessage para recibir el card_id (a.k.a card token)
      window.addEventListener('message', function(event) {
          if (event.origin !== "https://elements.sandbox.deuna.io") {
              return;
          }
          let firstParsedData;
          if (typeof event.data === 'string') {
              firstParsedData = JSON.parse(event.data);
          } else {
              firstParsedData = event.data;
          }

          const parsedData = JSON.parse(firstParsedData);
          console.log('postMessage:', parsedData);

          if (
            parsedData &&
            parsedData.type === "vaultSaveSuccess"
        ) {
          // obtener el card_id (a.k.a card token)
          const cardId = parsedData.data.metadata.createdCard.id;

          // crear pago con el card_id
        }
      });
    </script>
  </body>
</html>

4. Procesar una tarjeta

Después de que una tarjeta se procesa exitosamente en DEUNA, obtienes un postMessage evento con un card_id en la respuesta.

Usa la card_id para procesar el pago en su backend.

Eventos de ejemplo

Javascript
window.addEventListener("message", (event) => {
  if (event.origin !== "URL_DE_CONFIANZA") { // Reemplaza con tu URL de confianza
    return;
  }

  switch (event.data.type) {
    case 'VaultStarted':
      // Click to Pay ready
      break;

    case 'VaultSaveSuccess':
      // Card saved, get the card_id
      const cardId = event.data.metadata.createdCard.id;
      // Use this card_id to process payments
      break;

    case 'VaultSaveError':
    case 'VaultFailed':
      // Error management
      const errorCode = event.data.metadata.errorCode;
      const errorMessage = event.data.metadata.errorMessage;
      break;

    case 'VaultProcessing':
      // Pago en proceso
      break;

    //Add more cases as needed
  }
});

5. Procesar un pago

Después de que se inicie el pago a través de su backend, debe procesar el pago a través de una compra V2.

Este endpoint se encarga de crear un pedido y procesar el pago en DEUNA si un order token no se le pasa y unorder Se le envía el objeto con toda la información requerida.

Aquí hay una lista de campos obligatorios para hacer clic para pagar:

CampoDescripciónValor
order.callback_urls.on_successRedirigir URL después de autorizar la compra con su cuenta PayPal Wallet.https://example.com/
payment_source.method_typeTipo de método de pago DEUNA.wallet
payment_source.processorIdentificador del método de pago de PayPal Wallet.paypal_wallet

Solicitud de ejemplo

JavaScript
const requestBody = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    // ... Resto del body
};

fetch('https://api.sandbox.deuna.io/v2/merchants/orders/purchase', {
    method: 'POST',
    headers: {
        'x-api-key': 'YOUR_PRIVATE_API_KEY',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestBody)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
curl --location 'https://api.sandbox.deuna.io/v2/merchants/orders/purchase' \
--header 'x-api-key: YOUR_PRIVATE_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "payer_info": {
        "email": "foo@bar.com"
    },
    "payment_source": {
        "method_type": "credit_card",
        "card_info": {
            "card_id": "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    },
    "order": {
        "order_id": "testapi-0003",
        "currency": "MXN",
        "items": [
          {
              "id": "216",
              "name": "10 Cellphones",
              "description": "",
              "options": "string option",
              "total_amount": {
                  "original_amount": 2000,
                  "amount": 2000,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "unit_price": {
                  "amount": 200,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "tax_amount": {
                  "amount": 0,
                  "currency": "MXN",
                  "currency_symbol": "$"
              },
              "quantity": 1,
              "uom": "string",
              "upc": "string",
              "sku": "",
              "isbn": "",
              "brand": "",
              "manufacturer": "",
              "category": "",
              "color": "",
              "size": "",
              "weight": {
                  "amount": 0,
                  "unit": "kg"
              },
              "image_url": "https://images-sandbox.getduna.com/95463fb5-6279-4ec3-8ff9-fe07aacd2142/db5b698c57654116_domicilio_216_750x750_1662162887.png?d=200x200&format=webp",
              "details_url": "",
              "type": "physcal",
              "taxable": true
          }
        ],
        "sub_total": 2000,
        "total_amount": 2000,
        "store_code": "all",
        "billing_address": {
            "address1": "presa angostura 36PH",
            "address2": "",
            "address_type": "home",
            "city": "CDMX",
            "country_code": "MX",
            "email": "foo@bar.com",
            "first_name": "efren",
            "identity_document": "162915134",
            "is_default": true,
            "last_name": "garcia",
            "phone": "+525222222222",
            "state_code": "MX",
            "state_name": "miguel hidalgo",
            "zipcode": "11500"
        }
    }
}'
PHP
$curl = curl_init();

$requestBody = json_encode(array(
    "payer_info" => array(
        "email" => "foo@bar.com"
    ),
    "payment_source" => array(
        "method_type" => "credit_card",
        "card_info" => array(
            "card_id" => "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        )
    ),
    // Aquí puedes continuar añadiendo el resto del cuerpo de la solicitud
    "order" => array(
        "order_id" => "testapi-0003",
        "currency" => "MXN",
        "items" => array(
            // Aquí van los detalles de los items
        ),
        // Continúa con el resto de los detalles del pedido
    )
));

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.sandbox.deuna.io/v2/merchants/orders/purchase",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => $requestBody, // Aquí se utiliza la variable
  CURLOPT_HTTPHEADER => array(
    "x-api-key: YOUR_PRIVATE_API_KEY", // Asegúrate de reemplazar con tu API key real
    "Content-Type: application/json"
  ),
));


$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
Ruby
require 'uri'
require 'net/http'
require 'json'

url = URI("https://api.sandbox.deuna.io/v2/merchants/orders/purchase")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request_body = {
    payer_info: {
        email: "foo@bar.com"
    },
    payment_source: {
        method_type: "credit_card",
        card_info: {
            card_id: "8d369b6e-113a-4640-9e63-dc29957fc86aza"
        }
    }
    # ... Agrega aquí el resto del cuerpo de la solicitud
}.to_json

request = Net::HTTP::Post.new(url)
request["x-api-key"] = "YOUR_PRIVATE_API_KEY" # Reemplaza con tu API key
request["Content-Type"] = "application/json"
request.body = request_body

response = http.request(request)
puts response.read_body
Java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import org.json.JSONObject;

public class Main {
    public static void main(String[] args) {
        HttpClient client = HttpClient.newHttpClient();
        
        JSONObject requestBody = new JSONObject()
            .put("payer_info", new JSONObject().put("email", "foo@bar.com"))
            .put("payment_source", new JSONObject()
                .put("method_type", "credit_card")
                .put("card_info", new JSONObject().put("card_id", "8d369b6e-113a-4640-9e63-dc29957fc86aza")))
            // ... Agrega aquí el resto del cuerpo de la solicitud

        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.sandbox.deuna.io/v2/merchants/orders/purchase"))
            .header("x-api-key", "YOUR_PRIVATE_API_KEY") // Reemplaza con tu API key
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(requestBody.toString()))
            .build();

        client.sendAsync(request, HttpResponse.BodyHandlers.ofString())
            .thenApply(HttpResponse::body)
            .thenAccept(System.out::println)
            .join();
    }
}

Compra de ejemplo

Este es un ejemplo de compra Click to Pay en DEUNA:

Personalización de componentes CSS

Puedes editar la apariencia del widget a través de CSS.

6. Prueba la integración

Usa la Haga clic para pagar tarjetas de prueba para probar tu integración con DEUNA.

En esta sección

Click to Pay case management