<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"
		/>
		<title>Mobbex SDK</title>
	</head>
	<body>
		<noscript> You need to enable JavaScript to run this app. </noscript>
		<div id="root">
			<form id="source-form">
				<input
					data-mobbex="card_number"
					type="text"
					placeholder="Numero de Tarjeta"
				/>
				<br />
				<input
					data-mobbex="cardholder_name"
					type="text"
					placeholder="Nombre en la Tarjeta"
				/>
				<br />
				<input
					data-mobbex="expiration"
					type="text"
					placeholder="Vencimiento"
				/>
				<br />
				<input
					data-mobbex="cardholder_identification"
					type="text"
					placeholder="DNI"
				/>
				<br />
        
        <!-- The Security Code must always be PASSWORD Type -->
				<input
					data-mobbex="security_code"
					type="password"
					placeholder="Codigo de Seguridad"
				/>
				<br />
			</form>

			<br />
      <!-- The button must not be in the FORM!! -->
			<button id="mobbex-pay" type="button">Pagar</button>
    </div>
		<script>
      	function attachForm() {
            window.MobbexJS.form.attach(
                "{{ intentToken }}",
                {
                    formEl: "#source-form",
                    submitEl: "#mobbex-pay",
                    onSourceDetected: (data) => {
                        console.info(data);

                        window.MobbexJS.form.setInstallment(
                            data.installments[0].reference
                        );
                    },
                    onResult: (result) => {
                        console.info(result);
                    },
                    onError: (err) => {
                        console.error(err);
                    },
                }
            );
        };
	    </script>
    
        <script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous" onload="attachForm" async></script>
	</body>
</html>