Conexión por redirección: Aceptación de Apple Pay en la web

Puedes empezar a aceptar pagos con Apple Pay de forma automática en el TPV Virtual solicitando la activación del método de pago a tu entidad bancaria. No es necesario ningún desarrollo técnico.

El método de pago será seleccionable en el interfaz del TPV Virtual:

Al pulsar sobre él, se procederá a la elección de la tarjeta y autenticación de Apple Pay

Una vez seleccionado, el pago será procesado automáticamente.

Si se quiere forzar la ejecución del método de pago Apple Pay (en lugar de mostrar la página de introducción de datos de tarjeta), se debe enviar en el campo DS_MERCHANT_PAYMETHODS el valor ‘xpay’ (sin comillas).

En caso de tener configurado tambien Google Pay, aparecerá el botón de Google Pay junto al de Apple Pay

Integración directa por parte del comercio

El comercio será el encargado de realizar la integración del botón de Apple Pay en su página, el cual permitirá obtener el objeto paymentData que será el que tendrá que comunicar al TPV-Virtual de Redsys para el procesamiento de la transacción.

Enrolamiento del Comercio con Apple Pay

Crear o añade a una cuenta Apple Pay las opciones de desarrollador. (Apple requiere un coste anual).

Integración de Apple Pay

Mostrar Botón Apple Pay

Para mostrar el botón de Apple Pay incluiremos los siguientes elementos en la página:

		
		< script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js">
		< style>
		apple-pay-button {
		  --apple-pay-button-width: 140px;
		  --apple-pay-button-height: 30px;
		  --apple-pay-button-border-radius: 5px;
		  --apple-pay-button-padding: 5px 0px;
		}
		< /style>
		< div id="box">
		< apple-pay-button buttonstyle="black" type="buy" locale="es-ES" onclick="buttonClicked()>
		< /div>
		 
		

Deberemos validar si la API de Apple Pay está disponible y habilitada en el dispositivo desde el que estamos haciendo el pago para mostrar el botón solo en dispositivos Apple. Esto lo podemos verificar de dos formas:

canMakePayments. Verifica que el dispositivo tiene ApplePay habilitado, pero no verifica si el usuario ya tiene una tarjeta guardada en su dispositivo.

canMakePaymentsWithActiveCard. Verifica tanto si es dispositivo tiene ApplePay habilitado como si tiene una tarjeta guardada en su dispositivo.

		
		//Mostrar ApplePay
		if (window.ApplePaySession) {
			console.log(window.ApplePaySession);
			var merchantIdentifier = ' merchant.com.example.mystore';
			var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
			promise.then(function (canMakePayments) {							
				document.getElementById("box").style.display = "block";  	
			}, function(rejection){
				document.getElementById("box").style.display = "none";}
			);
			} else {
				document.getElementById("box").style.display = "none";
			}
		function buttonClicked() {
		}

		 
		

Crear ApplePaySession

Lo primero que deberemos hacer al pulsar el botón será construir el objeto ApplePaySession donde se enviará el diccionario ApplePayPaymentRequest con toda la información de la transacción.

A continuación, se muestra un ejemplo de ApplePayPaymentRequest con los campos obligatorios que se deberá añadir a la función buttonClicked:

		
		if (!ApplePaySession) {
return;
}
	//ApplePayPaymentRequest
	const request = {
	"countryCode": "ES",
	"currencyCode": ”EUR”
		"merchantCapabilities": [
	"supports3DS"
		],
	"supportedNetworks": [
			"visa",
				"masterCard",
				"amex",
				"discover"
	],
		"total": {
			"label": "Nombre Comercio",
			"type": "final",
			"amount": "4.99"
		}
	};


		 
		

Para más información sobre campos opcionales (descuentos, opciones de envío, pagos recurrentes, suscripciones...) puede consultar el siguiente enlace:

Una vez tengamos preparado el diccionario ApplePayPaymentRequest con toda la información crearemos el objeto ApplePaySession y llamaremos el método begin para iniciar el proceso de validación del comercio. Este código se debe añadir a la función buttonClicked.

		
	// Create ApplePaySession
	const session = new ApplePaySession(3, request);
	session.begin();
		 
		

Obtener token Apple Pay

A continuación mostraremos un ejemplo de integración de esta parte completa y explicaremos punto a punto los detalles. Tened en cuenta que este parte de la integración debe desarrollarte tanto en parte web como en parte servidor. Este código se debe añadir a la función buttonClicked.

		
session.onvalidatemerchant = event => {
	//1. Llamar a vuestro servidor para generar un merchantSession llamando a Apple.
			const merchantSession = await serverValidateMerchant(event.validationURL);
	//2. Completamos la validación del comercio
			session.completeMerchantValidation(merchantSession);
	//3. Información de la transacción en la página de pago
		session.onpaymentmethodselected = event => {
	// Define ApplePayPaymentMethodUpdate based on the selected payment method.
	// No updates or errors are needed, pass an empty object.
		const update = {
			newTotal: {
				"label": “Nombre Comercio",
				"type": "final",
				"amount":"4.99”
				}
			};
	session.completePaymentMethodSelection(update);
	};
	//4. Autorización del pago
	session.onpaymentauthorized = event => {
		// Token cifrado de Apple
		var paymentData = event.payment.token.paymentData);
		//Llamar a vuestro servidor para enviar el token de pago a Redsys
		const resultado = await serverAutorizationPayRedsys(paymentData);
		const result = {
			"status": resultado;
			};
		session.completePayment(result);
		};
};

		 
		

1. Llamar a vuestro servidor para generar un merchantSession llamando a Apple.

   Antes de mostrar la página de pago de Apple Pay al cliente deberemos generar una sesión de pago válida. Para ello deberemos comunicarnos con los servidores de Apple Pay, y por razones de seguridad deberemos hacerlo desde nuestro servidor y no desde nuestro cliente web. Es la única parte de la integración que deberemos hacer desde el lado del servidor. Pseudocódigo validación del comercio en el servidor:

   		
   //JSON de ejemplo de la petición de sesión a Apple
   jsonRequest = {
       merchantIdentifier: "merchant.com.example.mystore",
       displayName: "MyStore",
       initiative: "web",
       initiativeContext: "mystore.example.com"
   }
   //En event.validationURL tenemos la URL a la que deberemos hacer la petición
   serverValidateMerchant(event.validationURL){
   //Llamamos a la url de Apple Pay que hemos recogido con los datos correspondientes
   urlApplepay= event.validationURL;
   merchantSession = sendRequest(urlApplepay,jsonRequest);
   //Enviamos el resultado de Apple al navegador
   return merchantSession;
   }
   		 
   		

2. Completamos la validación del comercio.

   Una vez obtengamos el objeto de sesión recibido por parte de Apple Pay en nuestro navegador deberemos completar el método onvalidatemerchant() pasando este nuevo objeto de sesión al método completeMerchantValidation(). Una vez completado se mostrará la página de pago de Apple Pay.

3. Información de la transacción en la página de pago.

   Una vez completada la validación del comerciante Apple Pay proporciona información de la transacción en la página de pago (método de pago, dirección de facturación, dirección o método de envío) para así calcular el costo total del pago. Para gestionar estos ajustes podemos impletentar los siguientes event handler:

   onpaymentmethodselected: Método de pago.
   oncouponcodechanged: Insertar o actualizar un cupón.
   onshippingmethodselected: Método de envío
   onshippingcontactselected: Contacto de envío

   Es obligatorio que todos estos eventos contengan un objeto newTotal. Para más información sobre los diferentes eventos puede consultar los siguientes enlaces:

   https://applepaydemo.apple.com/Respond to Payment Sheet Interactions https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778013-onpaymentmethodselected
4. Obtención del token.

   Finalmente tenemos que implementar el evento onpaymentauthorized para obtener el token de la transacción. Una vez el usuario autentique la transacción con Face ID, Touch ID o contraseña desde su dispositivo obtendremos el token encriptado que deberemos enviar posteriormente a Redsys para que procese el pago.

   Después de recibir la respuesta de Redsys deberemos llamar al método completePayment con el resultado de la operación: STATUS_SUCCESS o STATUS_FAILURE acompañado de un mensaje ApplePayError.

   Para más información sobre la autorización y la finalización de la operación puede consultar los siguientes enlaces: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778020-onpaymentauthorized https://applepaydemo.apple.com/

Integración en el TPV Virtual

En primer lugar, debes solicitar el alta del método de pago a tu entidad bancaria.

Una vez activado, en la operación de autorización enviada al TPV Virtual, se deben añadir los siguientes parámetros adicionales:

Ejemplo de respuesta de autenticación recibida de Apple.Se recuerda que el objeto JSON "paymentData" ha de convertirse a formato Hexadecimal.

	
{
	"token":{
		"paymentData":{
			"data":"CZOOPbi/R7UBdW3as7T…0YYWuQ1iZhvtjAfx+A==",
			"signature":"MIAGCSqGSIb3DQEHAqCA…3gAtcDwfdZIAAAAAAAA=",
			"header":{
				"publicKeyHash":"i4BsP3h7AdaM3DU30UA2pucLcPYT1J9bAj3gi8eAOzw=",
				"ephemeralPublicKey":"MFkwEwYHKoZIzj0CAQYI…OyHpyVnRod+CpBTMxQ==",
				"transactionId":"a9bf8e71ca58173d42af5f24b57ce047528fb285759b296c12f3d8f2e5926644"
			},
			"version":"EC_v1"
		},
		"paymentMethod":{
			"displayName":"Visa 0492",
			"network":"Visa",
			"type":"debit"
		},
		"transactionIdentifier":"A9BF8E71CA58173D42AF5F24B57CE047528FB285759B296C12F3D8F2E5926644"
	}
} 
 

A continuación se incluye un ejemplo de petición al TPV Virtual

	                		
{
  "DS_MERCHANT_AMOUNT": "145",
  "DS_MERCHANT_CURRENCY": "978",
  "DS_MERCHANT_MERCHANTCODE": "999008881",
  "DS_MERCHANT_ORDER": "1446068581",
  "DS_MERCHANT_TERMINAL": "1",
  "DS_MERCHANT_TRANSACTIONTYPE": "0",
  "DS_XPAYDATA":"7B2276657273696F6E223A2245435F7631222C2264617461223A224875317531503941437030594A53316C2B57746B6D63306268575448385578554842596174466D36555836345159785966624D4846757964674D4136414B465556676C693869746C462B7965495A704532572B686E6E796A56446F74714644472F483850425579526A737847436F782B4B71726741756A504B314656557859544830472F7A427862763556506174316C34454E7132635A6D6A686251377341504C7A39584E415039756C3463384668697834652F473848447A6A5139307770616A6D4E57342B4A71444B72516F7A504B4B6B5672366161727276512B4746594230594976447458744251586A57494E424B774B524B4E524A6B532F6445507A736770456245684374333336426E4D53493555306C7131466B3873724676412B554B526B77466572446E617479465A4F764A6B5942624D424C30434531726C6C6842466E6670595A6F70772B764652725A356749413531484E2F52486E6D4F4C313839767A6B30652F50514F37412B2B54754F…..",
  "DS_XPAYTYPE":"Apple",
  "DS_XPAYORIGEN":"InApp"
}
	                		
	                	

Funcionalidad avanzada. Envío de datos descifrados en comercio.

El comercio se encargará en este caso de desencriptar los datos, obteniendo la información necesaria.

Estos datos se enviarán al TPV Virtual en el parámetro Ds_XPayDecodedData, en formato Json:

						
{
	"cryptogram": "XXXXXXXXXXXXXXXXXXXXXXXXX",
	"eciInd": "XX",
	"expirationDate":"AAMM",
	"token": "XXXXXXXXXXXXXXX"
}
						
						

Cryptogram = Referencia al onlinePaymentCryptogram.
EciInd = Referencia al eciIndicator.
ExpirationDate = Referencia del campo applicationExpirationDate. Se tiene que enviar con formato AAMM.
Token = Referencia al campo applicationPrimaryAccountNumber.

En la operación de autorización enviada al TPV Virtual, se deben añadir los siguientes parámetros adicionales:

A continuación, se adjunta un ejemplo de petición al TPV Virtual:

						
{
  "DS_MERCHANT_AMOUNT": "145",
  "DS_MERCHANT_CURRENCY": "978",
  "DS_MERCHANT_MERCHANTCODE": "999008881",
  "DS_MERCHANT_ORDER": "1446068581",
  "DS_MERCHANT_TERMINAL": "1",
  "DS_MERCHANT_TRANSACTIONTYPE": "0",
  "DS_XPAYDECODEDDATA":
  "{
 	"cryptogram": "AgAAAAAABk4DWZ4C28yUQAAAAAA=",
  	"eciInd": "05", 
  	"expirationDate":"2612", 
  	"token": "489537XXXXXX3478" 
  }",
  "DS_XPAYTYPE":"Apple",
  "DS_XPAYORIGEN":"InApp"
}