Mobbex.JS

14min
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.
﻿
ImportantePara poder utilizar cualquiera de los métodos abajo descriptos se debe contactar con autorización sujeta a auditoría por parte de Mobbex. El sitio debe cumplir, al menos, con las normas PCI DSS. 

Para habilitar el uso deberá contactarnos a soporte@mobbex.com e informar que accesos necesitan. 
﻿
RequisitosPara 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:
JSON
|
{
    "intent": {
        "token": "INTENT-TOKEN"
    }
}
{
    "intent": {
        "token": "INTENT-TOKEN"
    }
}
﻿
﻿
ImplementaciónInsertar el script del SDK en la cabeceraHTML
|
<script src="https://res.mobbex.com/js/sdk/mobbex@1.1.0.js" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous"></script>
<script src="https://res.mobbex.com/js/sdk/mobbex@1.1.0.js" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous"></script>
﻿
﻿
Configurar el Public KeyPara todos los casos es necesario configurar el Public Key, en un script al final del body de la siguiente manera:
JS
|
window.MobbexJS.setPublicKey("PUBLIC KEY");
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:
HTML
|
<div id="checkout">
	<!-- Card Number -->
	<label>Número de Tarjeta</label>
	<input type="text" data-mobbex="card_number" />

	<br />

	<!-- Name -->
	<label>Nombre como Figura en la Tarjeta</label>
	<input type="text" data-mobbex="cardholder_name" />

	<br />

	<!-- Identification -->
	<label>Número de Documento</label>
	<input type="text" data-mobbex="cardholder_identification" />

	<br />

	<!-- Expiration -->
	<label>Vencimiento</label>
	<input type="text" placeholder="12/25" data-mobbex="expiration" />

	<!-- Security Code -->
	<label>Código de Seguridad</label>
	<input type="text" placeholder="***" data-mobbex="security_code" />

	<!-- Installments -->
	<label>Cuotas</label>
	<select id="installments">
		<option>Elegir Cuota</option>
	</select>

	<br />

	<!-- Submit button -->
	<button id="submit_btn">Pagar</button>
</div>

<div id="checkout">
	<!-- Card Number -->
	<label>Número de Tarjeta</label>
	<input type="text" data-mobbex="card_number" />

	<br />

	<!-- Name -->
	<label>Nombre como Figura en la Tarjeta</label>
	<input type="text" data-mobbex="cardholder_name" />

	<br />

	<!-- Identification -->
	<label>Número de Documento</label>
	<input type="text" data-mobbex="cardholder_identification" />

	<br />

	<!-- Expiration -->
	<label>Vencimiento</label>
	<input type="text" placeholder="12/25" data-mobbex="expiration" />

	<!-- Security Code -->
	<label>Código de Seguridad</label>
	<input type="text" placeholder="***" data-mobbex="security_code" />

	<!-- Installments -->
	<label>Cuotas</label>
	<select id="installments">
		<option>Elegir Cuota</option>
	</select>

	<br />

	<!-- Submit button -->
	<button id="submit_btn">Pagar</button>
</div>
﻿
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
ScriptAhora es momento de agregar el SDK. Para esto, debajo del window.MobbexJS.setPublicKey configurado en pasos anteriores, agregamos:
JS
|
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);
		}
	}
});
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 finalHTML
|
<!DOCTYPE html>
<html>
	<head>
		<script src="https://res.mobbex.com/js/sdk/mobbex@1.0.0.js"></script>
	</head>
	<body>
		<div id="checkout">
			<!-- Card Number -->
			<label>Número de Tarjeta</label>
			<input type="text" data-mobbex="card_number" />

			<br />

			<!-- Name -->
			<label>Nombre como Figura en la Tarjeta</label>
			<input type="text" data-mobbex="cardholder_name" />

			<br />

			<!-- Identification -->
			<label>Número de Documento</label>
			<input type="text" data-mobbex="cardholder_identification" />

			<br />

			<!-- Expiration -->
			<label>Vencimiento</label>
			<input type="text" placeholder="12/25" data-mobbex="expiration" />

			<br />

			<!-- Security Code -->
			<label>Código de Seguridad</label>
			<input type="text" placeholder="***" data-mobbex="security_code" />

			<br />

			<!-- Installments -->
			<label>Cuotas</label>
			<select id="installments">
				<option>Elegir Cuota</option>
			</select>

			<br />

			<!-- Submit button -->
			<button id="submit_btn">Pagar</button>
		</div>

		<script>
			window.MobbexJS.setPublicKey('PUBLIC KEY');

			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);
					}
				}
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<script src="https://res.mobbex.com/js/sdk/mobbex@1.0.0.js"></script>
	</head>
	<body>
		<div id="checkout">
			<!-- Card Number -->
			<label>Número de Tarjeta</label>
			<input type="text" data-mobbex="card_number" />

			<br />

			<!-- Name -->
			<label>Nombre como Figura en la Tarjeta</label>
			<input type="text" data-mobbex="cardholder_name" />

			<br />

			<!-- Identification -->
			<label>Número de Documento</label>
			<input type="text" data-mobbex="cardholder_identification" />

			<br />

			<!-- Expiration -->
			<label>Vencimiento</label>
			<input type="text" placeholder="12/25" data-mobbex="expiration" />

			<br />

			<!-- Security Code -->
			<label>Código de Seguridad</label>
			<input type="text" placeholder="***" data-mobbex="security_code" />

			<br />

			<!-- Installments -->
			<label>Cuotas</label>
			<select id="installments">
				<option>Elegir Cuota</option>
			</select>

			<br />

			<!-- Submit button -->
			<button id="submit_btn">Pagar</button>
		</div>

		<script>
			window.MobbexJS.setPublicKey('PUBLIC KEY');

			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);
					}
				}
			});
		</script>
	</body>
</html>
﻿
﻿
Tokenización y procesamiento del pagoEste 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.
HTML
|
<div>
	<!-- Card Number -->
	<label>Número de Tarjeta</label>
	<input type="text" id="card_number" />

	<br />

	<!-- Name -->
	<label>Nombre como Figura en la Tarjeta</label>
	<input type="text" id="cardholder_name" />

	<br />

	<!-- Identification -->
	<label>Número de Documento</label>
	<input type="text" id="cardholder_identification" />

	<br />

	<!-- Expiration -->
	<label>Vencimiento</label>
	<input type="text" placeholder="MM" id="expiration_month" />
	<input type="text" placeholder="YY" id="expiration_year" />

	<br />

	<!-- Security Code -->
	<label>Código de Seguridad</label>
	<input type="text" placeholder="***" id="security_code" />

	<br />

	<!-- Installments -->
	<label>Cuotas</label>
	<select id="installments">
		<option>Elegir Cuota</option>
	</select>

	<br />

	<!-- Submit button -->
	<button id="submit_btn">Pagar</button>
</div>
<div>
	<!-- Card Number -->
	<label>Número de Tarjeta</label>
	<input type="text" id="card_number" />

	<br />

	<!-- Name -->
	<label>Nombre como Figura en la Tarjeta</label>
	<input type="text" id="cardholder_name" />

	<br />

	<!-- Identification -->
	<label>Número de Documento</label>
	<input type="text" id="cardholder_identification" />

	<br />

	<!-- Expiration -->
	<label>Vencimiento</label>
	<input type="text" placeholder="MM" id="expiration_month" />
	<input type="text" placeholder="YY" id="expiration_year" />

	<br />

	<!-- Security Code -->
	<label>Código de Seguridad</label>
	<input type="text" placeholder="***" id="security_code" />

	<br />

	<!-- Installments -->
	<label>Cuotas</label>
	<select id="installments">
		<option>Elegir Cuota</option>
	</select>

	<br />

	<!-- Submit button -->
	<button id="submit_btn">Pagar</button>
</div>
﻿
﻿
ScriptNuevamente, escribimos la lógica después de configurar el Public Key:
JS
|
// 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);
};

// 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 finalHTML
|
<!DOCTYPE html>
<html>

<head>
	<script src="https://res.mobbex.com/js/sdk/mobbex@1.1.0.js" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous"></script>
</head>

<body>
	<div>
		<!-- Card Number -->
		<label>Número de Tarjeta</label>
		<input type="text" id="card_number" />

		<br />

		<!-- Name -->
		<label>Nombre como Figura en la Tarjeta</label>
		<input type="text" id="cardholder_name" />

		<br />

		<!-- Identification -->
		<label>Número de Documento</label>
		<input type="text" id="cardholder_identification" />

		<br />

		<!-- Expiration -->
		<label>Vencimiento</label>
		<input type="text" placeholder="MM" id="expiration_month" />
		<input type="text" placeholder="YY" id="expiration_year" />

		<br />

		<!-- Security Code -->
		<label>Código de Seguridad</label>
		<input type="text" placeholder="***" id="security_code" />

		<br />

		<!-- Installments -->
		<label>Cuotas</label>
		<select id="installments">
			<option>Elegir Cuota</option>
		</select>

		<br />

		<!-- Submit button -->
		<button id="submit_btn">Pagar</button>
	</div>

	<script>
		// Setear el public-key
		window.MobbexJS.setPublicKey('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);
		};
	</script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
	<script src="https://res.mobbex.com/js/sdk/mobbex@1.1.0.js" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous"></script>
</head>

<body>
	<div>
		<!-- Card Number -->
		<label>Número de Tarjeta</label>
		<input type="text" id="card_number" />

		<br />

		<!-- Name -->
		<label>Nombre como Figura en la Tarjeta</label>
		<input type="text" id="cardholder_name" />

		<br />

		<!-- Identification -->
		<label>Número de Documento</label>
		<input type="text" id="cardholder_identification" />

		<br />

		<!-- Expiration -->
		<label>Vencimiento</label>
		<input type="text" placeholder="MM" id="expiration_month" />
		<input type="text" placeholder="YY" id="expiration_year" />

		<br />

		<!-- Security Code -->
		<label>Código de Seguridad</label>
		<input type="text" placeholder="***" id="security_code" />

		<br />

		<!-- Installments -->
		<label>Cuotas</label>
		<select id="installments">
			<option>Elegir Cuota</option>
		</select>

		<br />

		<!-- Submit button -->
		<button id="submit_btn">Pagar</button>
	</div>

	<script>
		// Setear el public-key
		window.MobbexJS.setPublicKey('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);
		};
	</script>
</body>

</html>
﻿
﻿