---
title: Mobbex.JS
slug: mobbexjs
description: Learn how to use Mobbex SDK to create a customized checkout form in HTML with this comprehensive document. Get step-by-step instructions, authorization requirements, and guidance on PCI DSS compliance. Insert the SDK script in the header and configure the
docTags: 
createdAt: 2021-06-18T13:13:13.000Z
---

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.



:::hint{type="warning"}
## Importante

Para utilizar cualquiera de los métodos descriptos a continuación, por favor contacta a soporte\@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:

```json
{
    "intent": {
        "token": "INTENT-TOKEN"
    }
}
```



# Implementación

### Insertar el script del SDK en la cabecera

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



### 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:

```javascript
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>

```

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:

```javascript
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

```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 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.

```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>
```



### Script

Nuevamente, escribimos la lógica después de configurar el Public Key:

```javascript
// 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

```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>
```