Saltar al contenido principal

Apple Pay

Integración Web​

Puedes empezar a aceptar pagos con Apple Pay en la Web usando la Página de pago alojada o el Componente Payment Request. No se necesita ninguna configuración adicional para usar Apple Pay en la Página de pago alojada.

Nuestro Componente Payment Request te ofrece una única integración para Apple Pay y Google Pay. Los clientes ven un botón de Google Pay o de Apple Pay, según qué combinación de dispositivo y navegador sea compatible.

info

Abre esta página en Safari para ver el botón de Apple Pay.

Si prefieres integrar directamente contra la API de Apple Pay, sigue la guía de integración directa con la API que se muestra a continuación.

Registra tu dominio con Apple Pay​

Si usas el Plugin de WooCommerce o un dominio personalizado con la Página de pago alojada de MONEI, tu dominio se verifica automáticamente.

Para registrar tu dominio con Apple, primero debes verificar la propiedad del dominio. Ve a MONEI Dashboard → Ajustes → Métodos de pago, elige Registrar dominio con Apple y sigue las instrucciones del popup.

También puedes verificar tu dominio con Apple usando la API REST de MONEI.

Checkout Exprés​

Usa el checkout exprés para recopilar las direcciones de envío y facturación directamente en la hoja de pago de Apple Pay. Consulta la guía de Checkout Exprés para ver la configuración y los ejemplos.

Integración directa con la API​

Antes de empezar, necesitas:

  • Añadir una tarjeta a tu Wallet para Safari.
  • Servir tu aplicación a través de HTTPS. Esto es un requisito tanto en desarrollo como en producción. Una forma de ponerse en marcha es usar un servicio como ngrok.
  • Registrar tu dominio con Apple Pay, tanto en desarrollo como en producción.
  • Seguir las instrucciones de Apple.

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>

Crear una sesión de Apple Pay

const session = new window.ApplePaySession(3, request);
session.onvalidatemerchant = async (event: any) => {
  try {
    const merchantSession = await monei.api.createApplePaySession({
      accountId: 'MONEI_ACCOUNT_ID',
      displayName: 'Test Merchant',
      domainName: 'example.com',
      validationUrl: event.validationURL
    });
    session.completeMerchantValidation(merchantSession);
  } catch (error) {
    session.abort();
  }
};

Intercambia el token de Apple Pay por un token de pago de MONEI que pueda usarse para confirmar el pago.

session.onpaymentauthorized = async (event) => {
  // Encode Apple Pay token as a base64 string
  const paymentToken = JSON.stringify(event.payment.token);
  const token = window.btoa(paymentToken);
  try {
    const result = await monei.api.createToken({
      paymentId: '{{payment_id}}',
      paymentMethod: {
        applePay: {token}
      }
    });
    session.completePayment({
      status: window.ApplePaySession.STATUS_SUCCESS
    });
    return moneiTokenHandler(result.paymentToken);
  } catch (error) {
    session.completePayment({
      status: window.ApplePaySession.STATUS_FAILURE
    });
  }
};
session.begin();

Confirmar el pago​

Una vez que hayas obtenido el token de pago de MONEI, puedes confirmar el pago usando el token.

async function moneiTokenHandler(token) {
  try {
    const result = await monei.confirmPayment({
      paymentId: '{{payment_id}}',
      paymentToken: token
    });
    // 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);
  }
}

Antes de pasar a producción​