Cards

Puedes empezar a aceptar pagos con tarjeta en la Web usando la Página de pago alojada o el Componente Card Input. No se necesita ninguna configuración adicional para la Página de pago alojada. Ya admite todos los métodos de pago disponibles y no requiere programación.

Nuestro Componente Card Input renderiza un campo de entrada de tarjeta en tu página de pago personalizada. El Componente Card Input te permite recopilar de forma segura los datos de la tarjeta en un único componente. Incluye un icono de que se actualiza dinámicamente, así como campos para el número, la fecha de caducidad y el . Es responsivo, está optimizado para dispositivos móviles, es completamente personalizable y está localizado a 14 idiomas.

Demo en vivo

Código fuente

Tarjetas compatibles

Con MONEI puedes aceptar pagos con tarjetas de crédito y débito tanto nacionales como internacionales. Tus clientes pueden pagar con tarjetas de las siguientes redes:

• Visa
• Mastercard
• JCB
• Diners Club International
• Discover
• Union Pay

Visa y Mastercard son las dos redes internacionales más importantes, por lo que MONEI también admite el gran número de tarjetas de marcas afiliadas en esas redes. Cuando configures el método de pago de tarjeta, todas las marcas compatibles se activarán y cada pago con tarjeta aparecerá en tu MONEI Dashboard → Pagos.

También puedes ofrecer a tus clientes métodos de pago alternativos y locales como Bizum, PayPal, Apple Pay, Google Pay y Multibanco. Activar más métodos de pago locales te ayudará a alcanzar más clientes en otros países y a vender internacionalmente.

Activación

Los pagos con tarjeta se configuran automáticamente una vez aprobada tu cuenta. Si traes tu propio adquirente o procesador, necesitas tener tu propio : consulta qué es un TPV Virtual y cómo conseguirlo.

Una vez configurados los pagos con tarjeta, todas las marcas compatibles quedan activadas y el método de tarjeta está disponible en la Página de pago alojada. También puedes renderizar el Componente Card Input en tu propio checkout. Para integrar MONEI con tu sitio web, consulta la sección Integración más abajo.

Comisiones

Las comisiones por pagos con tarjeta se cobran por cada pago realizado con éxito y varían según el plan de MONEI que elijas. Para conocer las tarifas actuales, consulta Comisiones de MONEI.

Liquidaciones

Liquidamos los pagos en el que hayas asignado a tu cuenta de MONEI. Si traes tu propio adquirente, tu liquida los pagos en tu IBAN.

Envía payouts a clientes

También puedes enviar dinero a la tarjeta de un cliente con un payout. Los payouts son una función restringida: deben estar activados en tu cuenta por el equipo de riesgos de MONEI y se pagan con un saldo prefinanciado. Consulta Envía payouts a clientes para ver cómo funciona.

Antes de empezar

Esta página explica cómo añadir el Componente Card Input a tu página de pago personalizada. Si no necesitas una experiencia de checkout personalizada, te recomendamos usar nuestra Página de pago alojada.

Para aceptar pagos con tarjeta necesitas tener al menos un procesador de tarjetas configurado. Para configurar los procesadores de tarjetas ve a MONEI Dashboard → Configuración → Métodos de pago → Pagos con tarjeta.

Página Pagos con tarjeta en los ajustes del panel de MONEI, con el procesador de tarjetas configurado y los que puedes añadir

Para probar tu integración:

• Usa tu Account ID y clave de API del modo de prueba.
• Usa los números de tarjeta de prueba.
• Puedes comprobar el estado de un pago de prueba en tu MONEI Dashboard → Pagos (en modo de prueba).

Integración

1. Crear un pago Servidor

Crea un Pago en tu servidor con un importe y una moneda. Decide siempre cuánto cobrar en el lado del servidor, un entorno de confianza, y no en el cliente. Esto evita que clientes malintencionados puedan elegir sus propios precios.

cURL

POST https://api.monei.com/v1/payments

curl --request POST 'https://api.monei.com/v1/payments' \
--header 'Authorization: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
  "amount": 110,
  "currency": "EUR",
  "orderId": "14379133960355",
  "description": "Test Shop - #14379133960355",
  "customer": {
    "email": "email@example.com"
   },
  "callbackUrl": "https://example.com/checkout/callback"
}'

(Sustituye YOUR_API_KEY por tu clave de API de MONEI real)

Node.js

server.js

import {Monei} from '@monei-js/node-sdk';

// Replace YOUR_API_KEY with your actual MONEI API key
const monei = new Monei('YOUR_API_KEY');

const payment = await monei.payments.create({
  amount: 110,
  currency: 'EUR',
  orderId: '14379133960355',
  description: 'Test Shop - #14379133960355',
  customer: {
    email: 'email@example.com'
  },
  callbackUrl: 'https://example.com/checkout/callback'
});

// Pass payment.id to your client-side
const paymentId = payment.id;

PHP

server.php

<?php
require_once 'vendor/autoload.php';

use Monei\Model\CreatePaymentRequest;
use Monei\Model\PaymentCustomer;
use Monei\MoneiClient;

// Replace YOUR_API_KEY with your actual MONEI API key
$monei = new MoneiClient('YOUR_API_KEY');

$payment = $monei->payments->create(
  new CreatePaymentRequest([
    'amount' => 110,
    'currency' => 'EUR',
    'order_id' => '14379133960355',
    'description' => 'Test Shop - #14379133960355',
    'customer' => new PaymentCustomer([
      'email' => 'email@example.com'
    ]),
    'callback_url' => 'https://example.com/checkout/callback'
  ])
);

// Pass payment ID to your client-side
$paymentId = $payment->getId();
?>

Python

server.py

import Monei
from Monei import CreatePaymentRequest, PaymentCustomer

# Replace YOUR_API_KEY with your actual MONEI API key
monei = Monei.MoneiClient(api_key="YOUR_API_KEY")

payment = monei.payments.create(
    CreatePaymentRequest(
        amount=110,
        currency="EUR",
        order_id="14379133960355",
        description="Test Shop - #14379133960355",
        customer=PaymentCustomer(
          email="email@example.com"
        ),
        callback_url="https://example.com/checkout/callback"
    )
)

# Pass payment ID to your client-side
payment_id = payment.id

Los siguientes parámetros son obligatorios:

• amount entero positivo - Importe que se pretende cobrar con este pago. Un entero positivo que representa cuánto cobrar en la (p. ej., 100 céntimos para cobrar 1,00 USD)
• currency cadena - Código de moneda ISO de tres letras, en mayúsculas. Debe ser una moneda compatible.
• orderId cadena - Un ID de pedido de tu sistema. Un identificador único que puede usarse para el pago con tu sistema interno.
• callbackUrl cadena - La URL a la que se enviará de forma asíncrona el resultado del pago.

Consulta todos los parámetros de solicitud disponibles.

El objeto Pago devuelto incluye un id de pago, que se usa en el lado del cliente para completar de forma segura el proceso de pago en lugar de pasar el objeto Pago completo.

2. Recopilar los datos de la tarjeta Cliente

Incluye monei.js en tu página de checkout añadiendo la etiqueta script al head de tu archivo HTML.

checkout.html

<head>
  <title>Checkout</title>
  <script src="https://js.monei.com/v3/monei.js"></script>
</head>

Añade el Componente Card Input de MONEI a tu página de pago. Crea nodos DOM vacíos (contenedores) con IDs únicos en tu formulario de pago.

checkout.html

<form id="payment-form">
  <div class="card-field">
    <div id="card-input">
      <!-- A MONEI Card Input Component will be inserted here. -->
    </div>
    <!-- Used to display card errors. -->
    <div id="card-error"></div>
  </div>
  <button type="submit" id="payment-button">Submit payment</button>
</form>

Inicializar el Componente Card Input

client.js

const container = document.getElementById('card-input');
const errorText = document.getElementById('card-error');

// Create an instance of the Card Input using payment_id.
const cardInput = monei.CardInput({
  paymentId: '{{payment_id}}',
  onChange: function (event) {
    // Handle real-time validation errors.
    if (event.isTouched && event.error) {
      container.classList.add('is-invalid');
      errorText.innerText = event.error;
    } else {
      container.classList.remove('is-invalid');
      errorText.innerText = '';
    }
  }
});

// Render an instance of the Card Input into the `card_input` <div>.
cardInput.render(container);

El Componente Card Input simplifica el formulario y minimiza el número de campos requeridos insertando un único campo de entrada flexible que recopila de forma segura todos los datos de la tarjeta necesarios.

nota

El Componente Card Input también está disponible como componente de React, Vue, Angular y Svelte.

Consulta la Referencia de MONEI JS para ver más opciones.

3. Confirmar el pago Cliente

Para completar el pago necesitas confirmarlo usando la función confirmPayment de monei.js.

Debes proporcionar un paymentId (obtenido en el paso 1) y el paymentToken generado con el Componente Card Input. También puedes proporcionar parámetros adicionales como customer.email. Consulta todos los parámetros disponibles.

client.js

// Handle form submission.
const paymentForm = document.getElementById('payment-form');
const paymentButton = document.getElementById('payment-button');
paymentForm.addEventListener('submit', async function (event) {
  event.preventDefault();
  paymentButton.disabled = true;
  try {
    // Generate a payment token from the card input
    const {token, error} = await cardInput.submit();

    if (error) {
      // Inform the user if there was an error.
      container.classList.add('is-invalid');
      errorText.innerText = error;
      return;
    }

    container.classList.remove('is-invalid');
    errorText.innerText = '';

    // Confirm the payment with the generated token
    const result = await monei.confirmPayment({
      paymentId: '{{payment_id}}',
      paymentToken: token,
      paymentMethod: {card: {cardholderName: 'JOHN DOE'}}
    });

    // At this moment you can show a customer the payment result
    // But you should always rely on the result passed to the callback endpoint on your server
    // to update the order status
    console.log(result);
  } catch (error) {
    console.error(error);
  } finally {
    paymentButton.disabled = false;
  }
});

Tras enviar el formulario, MONEI mostrará automáticamente una ventana emergente con la pantalla de confirmación (si es necesario).

nota

Como proceso alternativo, puedes enviar el paymentToken generado a tu servidor y luego confirmar el pago en el lado del servidor.

4. Procesar la notificación webhook Servidor

Tras la interacción en el lado del cliente y cualquier procesamiento en segundo plano necesario (como 3D Secure o la ), MONEI envía el estado de pago final y autoritativo mediante una solicitud HTTP POST asíncrona a la callbackUrl que proporcionaste en el Paso 1.

El cuerpo de la solicitud contiene el objeto Pago completo en formato JSON.

Este es la única forma fiable de confirmar el resultado definitivo del pago.

Es imprescindible que:

1. Verifiques el encabezado MONEI-Signature incluido en la solicitud. Esto confirma que el webhook proviene genuinamente de MONEI. Consulta la guía de verificación de firmas para los detalles de implementación.
2. Devuelvas un código de estado HTTP 200 OK inmediatamente al recibir el webhook para confirmar la recepción. Cualquier otro código de estado indica a MONEI que la notificación ha fallado.

Si MONEI no recibe un 200 OK, reintentará el envío del webhook.

Una vez verificada la firma, inspecciona el campo status del objeto Pago (SUCCEEDED, FAILED, CANCELED, etc.) para determinar si debes completar el pedido o gestionar el error.

Antes de pasar a producción

• Asegúrate de que estás usando el Account ID y la clave de API del modo de producción (live).
• Asegúrate de que tienes al menos un procesador de tarjetas habilitado.

Información adicional

Límites de importe

El importe máximo predeterminado por transacción con tarjeta es de 4.000 EUR. En algunos casos, este límite puede aumentarse tras una revisión, según el tipo de negocio y el nivel de riesgo. Contacta con nuestro equipo de soporte para crear una solicitud de ajuste en tu cuenta.

Reembolsos

Los comercios pueden emitir reembolsos directamente desde el MONEI Dashboard en un plazo de 180 días a partir de la fecha de la transacción.

Preguntas frecuentes

¿Qué tarjetas son compatibles con MONEI?

MONEI admite tarjetas nacionales e internacionales de las redes Visa, Mastercard, JCB, Diners Club International, Discover y Union Pay. Consulta Tarjetas compatibles para más detalles.

¿Qué pasa una vez que he activado los pagos con tarjeta?

Una vez configurados los pagos con tarjeta, todas las marcas compatibles quedan activadas y cada pago con tarjeta aparece en tu MONEI Dashboard → Pagos. Para integrar MONEI con tu sitio web de e-commerce, sigue los pasos de Integración anteriores o usa la Página de pago alojada.