Pagos con Apple Pay – Component

Introducción

Esta guía explica cómo aceptar pagos con Apple Pay mediante el Component de Conekta. El Component te permite embeber el botón nativo de Apple Pay en tu sitio web, manteniendo el cumplimiento PCI ya que los datos de pago viajan directamente desde el dispositivo del cliente hacia Apple y Conekta, sin pasar por tus servidores.

A diferencia de la integración con tarjetas, Apple Pay requiere un paso previo obligatorio: dar de alta y verificar tu dominio ante Apple.

Requisitos Previos

• Procesar pagos con tarjeta en tu compañía de Conekta.
• Claves API (pública y privada).
• Dominio verificado ante Apple (ver Paso 1).
• El sitio debe servirse exclusivamente por HTTPS con un certificado TLS válido.

Paso 1: Cargar el script del Component

Incluye el script oficial de Conekta Checkout en la página donde se mostrará Apple Pay:

<script src="https://pay.conekta.com/v1.0/js/conekta-checkout.min.js"></script>

Y prepara el contenedor donde se renderizará el botón:

<div id="conektaApplePayComponent"></div>

Paso 2: Crear un Checkout en el backend

El siguiente diagrama resume el flujo entre tu frontend, tu backend y Conekta:

Genera un checkout desde tu backend e incluye apple_pay (o card, que también lo activa) en allowed_payment_methods. Debes responder a tu frontend con el id del checkout.

POST https://api.conekta.io/checkouts
Authorization: Bearer key_YOUR_PRIVATE_API_KEY
Content-Type: application/json

{
  "name": "Pago con Apple Pay",
  "type": "Integration",
  "recurrent": false,
  "expires_at": 1799999999,
  "allowed_payment_methods": ["card", "apple_pay"],
  "needs_shipping_contact": false,
  "order_template": {
    "line_items": [{
      "name": "Producto/Servicio",
      "unit_price": 23000,
      "quantity": 1
    }],
    "currency": "MXN",
    "customer_info": {
      "name": "Jorge Martínez",
      "email": "[email protected]",
      "phone": "+5218181818181"
    }
  }
}

Respuesta:

{
  "id": "fb50ae28-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "type": "Integration",
  "status": "Issued"
}

Pasa ese id (checkoutRequestId) al frontend.

Paso 3: Inicializar el Component con Apple Pay

En el frontend, configura el Component apuntando al contenedor y al checkoutRequestId generado en el paso anterior:

<div id="conektaApplePayComponent"></div>

<script>
  const config = {
    locale: 'es',
    publicKey: '{{yourPublicKey}}',
    targetIFrame: '#conektaApplePayComponent',
    checkoutRequestId: '{{yourCheckoutId}}'
  };

  const options = {
    backgroundMode: 'lightMode',
    colorPrimary: '#081133',
    inputType: 'minimalMode'
  };

  const callbacks = {
    onCreateTokenSucceeded: function (token) {
      console.log('Token Apple Pay creado:', token);
      // Envía el token a tu backend para crear / completar la orden
    },
    onCreateTokenError: function (error) {
      console.error('Error al crear token Apple Pay:', error);
    },
    onGetInfoSuccess: function (info) {
      console.log('Checkout cargado:', info);
    },
    onErrorPayment: function (error) {
      console.error('Error en el pago:', error);
    }
  };

  window.ConektaCheckoutComponents.Integration({
    config,
    callbacks,
    options
  });
</script>

El Component detectará automáticamente si el navegador y dispositivo son compatibles con Apple Pay y mostrará el botón nativo. Si no son compatibles, el botón no se renderiza (aunque el resto de métodos permitidos sí).

Así se ve el Component renderizado con el botón de Apple Pay habilitado:

Paso 4: Procesar el pago en el backend

Cuando el usuario autoriza el pago en Apple Pay, onCreateTokenSucceeded recibirá un token. Envíalo a tu backend para crear la orden:

POST https://api.conekta.io/orders
Authorization: Bearer key_YOUR_PRIVATE_API_KEY
Content-Type: application/json

{
  "line_items": [{
    "name": "Producto/Servicio",
    "unit_price": 23000,
    "quantity": 1
  }],
  "currency": "MXN",
  "customer_info": {
    "name": "Jorge Martínez",
    "email": "[email protected]",
    "phone": "+5218181818181"
  },
  "charges": [{
    "payment_method": {
      "type": "card",
      "token_id": "tok_2q6cyio5sDqCyvYh7"
    }
  }]
}

Respuesta exitosa:

{
  "id": "ord_2tQAKpPrfkdyzZvfM",
  "payment_status": "paid",
  "amount": 23000,
  "currency": "MXN",
  "charges": {
    "data": [{
      "id": "63f3ea0d88dc6c0019a3fe39",
      "status": "paid",
      "amount": 23000,
      "payment_method": {
        "type": "apple_pay"
      }
    }]
  }
}

Capturar Eventos de Pago

Configura webhooks para automatizar el seguimiento de la orden:

Manejo de Respuestas

• Pago exitoso: payment_status: "paid".
• Declinación antifraude: rechazo inmediato sin cobro.
• Declinación bancaria: respuesta con estado fallido y código del emisor.
• Token expirado: el token tiene validez de 10 minutos y se consume en una única transacción.

Notas Importantes

• Repite la verificación de dominio para cada subdominio o entorno (producción y sandbox).
• No subas el archivo de verificación a un CDN que altere su contenido o agregue cabeceras de caché incompatibles.
• El Component mantiene cumplimiento PCI: los datos de la tarjeta tokenizada por Apple no tocan tu servidor.
• Usa siempre webhooks para confirmar el estado final del pago, no dependas únicamente del callback del frontend.