MOBBEX AVANZADO
Mobbex.JS
11 min
el sdk de mobbex permite crear un checkout totalmente personalizado en tu propio html armando un formulario a tu medida, permitiendo tokenizar tarjetas y controlar la totalidad del frontend importante para utilizar cualquiera de los métodos descriptos a continuación, por favor contacta a operatoria\@mobbex com e indica los accesos que necesitas además, el sitio debe cumplir con una serie de requisitos, incluyendo las normas pci dss requisitos para poder crear un checkout transparente es necesario tener habilitada la tokenización de tarjetas si la opción está habilitada recibirán el intent token en los response al crear un checkout, suscripción u orden de pago en el siguiente formato { "intent" { "token" "intent token" } } implementación insertar el script del sdk en la cabecera configurar el public key para todos los casos es necesario configurar el public key , en un script al final del body de la siguiente manera window\ mobbexjs setpublickey("public key"); unir el sdk a un formulario (recomendado) esta opción es la más sencilla de todas, y consiste en asignarles a todos los inputs el atributo data mobbex , conteniendo todo el formulario en un mismo tag (ya sea \<div> , \<section> , etc), como se muestra a continuación 	 	número de tarjeta 	 	 	 	nombre como figura en la tarjeta 	 	 	 	número de documento 	 	 	 	vencimiento 	 	 	código de seguridad 	 	 	cuotas 	 	 elegir cuota 	 	 	 	pagar el ejemplo anterior es el más básico de todos y es posible personalizarlo cómo se quiera, conteniendo los inputs en varios \<div> u otros tags, siempre y cuando todo esté contenido dentro de \<div id="checkout"> desde luego, la elección del id también es propia, lo único estricto en relación a los nombres es el atributo data mobbex script ahora es momento de agregar el sdk para esto, debajo del window\ mobbexjs setpublickey configurado en pasos anteriores, agregamos const select = document queryselector('#installments'); select addeventlistener('change', (e) => { // configurar la cuota elegida 	window\ mobbexjs form setinstallment(e target value); }); window\ mobbexjs form attach('intent token', { 	// referencia al contenedor del formulario formel '#checkut', // referencia al submit button 	submitel '#submit btn', 	onsourcedetected (data) => { // limpiar las opciones de cuotas para que no se dupliquen let i, l = select options length 1; for(i = l; i >= 1; i ) { select remove(i); } // agregar las opciones de cuotas 	 for (let installment of data installments) { 	 let opt = document createelement('option'); 	 opt value = installment reference; 	 opt innerhtml = installment name; 	 select appendchild(opt); 	 } 	}, 	onresult (data) => { 	 console log(data); 	 window\ alert(data status text); 	}, 	onerror (error) => { 	 console error(error); 	 // previene que salte el window\ alert mientras se introduce la fecha de vencimiento 	 if (error type !== 'expiration') { 	 window\ alert(data error); 	 } 	} }); ejemplo final 		 	 	 	 número de tarjeta 	 	 	 	 	 	 	 nombre como figura en la tarjeta 	 	 	 	 	 	 	 número de documento 	 	 	 	 	 	 	 vencimiento 	 	 	 	 	 	 	 código de seguridad 	 	 	 	 	 	 	 cuotas 	 	 	 elegir cuota 	 	 	 	 	 	 	 pagar 		 		 	 tokenización y procesamiento del pago este caso es un poco más complejo que el anterior ya que requiere más pasos y mayor manipulación de los inputs a diferencia del caso anterior, no es necesario el atributo data mobbex el html en este ejemplo es muy similar al caso anterior, con la diferencia que reemplazamos data mobbex por id y dividimos el vencimiento en 2 inputs uno para el mes y otro para el año otro punto a tener en cuenta es que no es necesario tener todo dentro de un mismo contenedor 	 	número de tarjeta 	 	 	 	nombre como figura en la tarjeta 	 	 	 	número de documento 	 	 	 	vencimiento 	 	 	 	 	código de seguridad 	 	 	 	cuotas 	 	 elegir cuota 	 	 	 	pagar script nuevamente, escribimos la lógica después de configurar el public key // inicializamos con el intent token window\ mobbexjs card init('intent token'); const select = document queryselector('#installments'); const card input = document queryselector('#card number'); // agregamos la lógica para detectar el medio de pago cada vez que el número cambia card input oninput = async (e) => { 	let value = e target value; 	if (value length >= 6) { 	 // detectar medio de pago 	 let card = await window\ mobbexjs card detect(value substring(0, 6), { 	 installments 	 }); 	 if (!card result) return; 	 let data = card data; 	 // limpiar las opciones de cuotas para que no se repitan 	 let i, 	 l = select options length 1; 	 for (i = l; i >= 0; i ) { 	 select remove(i); 	 } // agregar las opciones de cuotas 	 for (let installment of data installments) { 	 let opt = document createelement('option'); 	 opt value = installment reference; 	 opt innerhtml = installment name; 	 select appendchild(opt); 	 } 	} }; const submit btn = document queryselector('#submit btn'); submit btn onclick = async (e) => { 	e stoppropagation(); 	e preventdefault(); 	// obtener datos de la tarjeta utilizando el id de cada input 	const card number = document queryselector('#card number') value; 	const cardholder name = document queryselector('#cardholder name') value; 	const cardholder identification = document queryselector('#cardholder identification') value; 	const expiration month = document queryselector('#expiration month') value; 	const expiration year = document queryselector('#expiration year') value; 	// tokenizar la tarjeta 	const token = await window\ mobbexjs card createtoken({ 	 card { 	 number card number, 	 name cardholder name, 	 identification cardholder identification, 	 month expiration month, 	 year expiration year 	 } 	}); 	if (!token result) return window\ alert(token error); 	// obtener código de seguridad y cuota 	const security code = document queryselector('#security code'); 	const installment = document queryselector('#installments') value; 	// procesar el pago usando el intent token, el token de la tarjeta, el codigo de seguridad y la cuota elegida 	const response = await window\ mobbexjs operation process({ 	 intenttoken 'intent token', 	 source token data token, 	 securitycode security code, 	 installment installment 	}); 	if (!response result) return window\ alert(response error); 	return window\ alert(response data status text); }; ejemplo final 	 		 	 número de tarjeta 		 		 		 	 nombre como figura en la tarjeta 		 		 		 	 número de documento 		 		 		 	 vencimiento 		 		 		 		 	 código de seguridad 		 		 		 	 cuotas 		 	 elegir cuota 		 		 		 	 pagar 	 	
Updated 12 Sep 2024
Did this page help you?