kainlite · July 29, 2017 22:29 · jrgarciadev · Sep 22, 2019
diff --git a/mp2.html b/mp2.html
 <html>
 <head>
 <script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>

 </head>
 <body>
  <form action="" method="post" id="pay" name="pay" >
      <fieldset>
          <ul>
              <li>
                  <label for="email">Email</label>
                  <input id="email" name="email" value="[email protected]" type="email" placeholder="your email"/>
              </li>
              <li>
                  <label for="cardNumber">Credit card number:</label>
                  <input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="4509 9535 6623 3704" value="4509 9535 6623 3704" />
              </li>
              <li>
                  <label for="securityCode">Security code:</label>
                  <input type="text" id="securityCode" data-checkout="securityCode" placeholder="123" value="123" />
              </li>
              <li>
                  <label for="cardExpirationMonth">Expiration month:</label>
                  <input type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="12" value="12" />
              </li>
              <li>
                  <label for="cardExpirationYear">Expiration year:</label>
                  <input type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="2015" value="2018" />
              </li>
              <li>
                  <label for="cardholderName">Card holder name:</label>
                  <input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="APRO" value="APRO" />
              </li>
              <li>
                  <label for="docType">Document type:</label>
                  <select id="docType" data-checkout="docType"></select>
              </li>
              <li>
                  <label for="docNumber">Document number:</label>
                  <input type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" value="12345678" />
              </li>
          </ul>
          <input type="submit" value="Pay!" />
      </fieldset>
  </form>

 <script>
 Mercadopago.setPublishableKey("TEST-8d6ca48f-89c2-4fa7-ac1c-19518a68a6ec");

 function getBin() {
    var ccNumber = document.querySelector('input[data-checkout="cardNumber"]');
    return ccNumber.value.replace(/[ .-]/g, '').slice(0, 6);
 };

 function guessingPaymentMethod(event) {
    var bin = getBin();

    if (event.type == "keyup") {
        if (bin.length >= 6) {
            Mercadopago.getPaymentMethod({
                "bin": bin
            }, setPaymentMethodInfo);
        }
    } else {
        setTimeout(function() {
            if (bin.length >= 6) {
                Mercadopago.getPaymentMethod({
                    "bin": bin
                }, setPaymentMethodInfo);
            }
        }, 100);
    }
 };

 Mercadopago.getIdentificationTypes();


 function setPaymentMethodInfo(status, response) {
    if (status == 200) {
        // do somethings ex: show logo of the payment method
        var form = document.querySelector('#pay');

        if (document.querySelector("input[name=paymentMethodId]") == null) {
            var paymentMethod = document.createElement('input');
            paymentMethod.setAttribute('name', "paymentMethodId");
            paymentMethod.setAttribute('type', "hidden");
            paymentMethod.setAttribute('value', response[0].id);

            form.appendChild(paymentMethod);
        } else {
            document.querySelector("input[name=paymentMethodId]").value = response[0].id;
        }
    }
 };

 function addEvent(el, eventName, handler) {
    if (el.addEventListener) {
       el.addEventListener(eventName, handler);
    } else {
        el.attachEvent('on' + eventName, function(){
          handler.call(el);
        });
    }
 };

 addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 'keyup', guessingPaymentMethod);
 addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 'change', guessingPaymentMethod);

 doSubmit = false;
 addEvent(document.querySelector('#pay'),'submit',doPay);
 function doPay(event){
    event.preventDefault();
    if(!doSubmit){
        var $form = document.querySelector('#pay');

        Mercadopago.createToken($form, sdkResponseHandler); // The function "sdkResponseHandler" is defined below

        return false;
    }
 };

 function sdkResponseHandler(status, response) {
    console.log(response);

    if (status != 200 && status != 201) {
        alert("verify filled data");
    }else{

        var form = document.querySelector('#pay');

        var card = document.createElement('input');
        card.setAttribute('name',"token");
        card.setAttribute('type',"hidden");
        card.setAttribute('value',response.id);
        form.appendChild(card);
        // doSubmit=true;
        // form.submit();
    }
 };
 </script>
 </body>
 </html>
	<html>
	<head>
	<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>

	</head>
	<body>
	<form action="" method="post" id="pay" name="pay" >
	<fieldset>
	<ul>
	<li>
	<label for="email">Email</label>
	<input id="email" name="email" value="[email protected]" type="email" placeholder="your email"/>
	</li>
	<li>
	<label for="cardNumber">Credit card number:</label>
	<input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="4509 9535 6623 3704" value="4509 9535 6623 3704" />
	</li>
	<li>
	<label for="securityCode">Security code:</label>
	<input type="text" id="securityCode" data-checkout="securityCode" placeholder="123" value="123" />
	</li>
	<li>
	<label for="cardExpirationMonth">Expiration month:</label>
	<input type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="12" value="12" />
	</li>
	<li>
	<label for="cardExpirationYear">Expiration year:</label>
	<input type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="2015" value="2018" />
	</li>
	<li>
	<label for="cardholderName">Card holder name:</label>
	<input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="APRO" value="APRO" />
	</li>
	<li>
	<label for="docType">Document type:</label>
	<select id="docType" data-checkout="docType"></select>
	</li>
	<li>
	<label for="docNumber">Document number:</label>
	<input type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" value="12345678" />
	</li>
	</ul>
	<input type="submit" value="Pay!" />
	</fieldset>
	</form>

	<script>
	Mercadopago.setPublishableKey("TEST-8d6ca48f-89c2-4fa7-ac1c-19518a68a6ec");

	function getBin() {
	var ccNumber = document.querySelector('input[data-checkout="cardNumber"]');
	return ccNumber.value.replace(/[ .-]/g, '').slice(0, 6);
	};

	function guessingPaymentMethod(event) {
	var bin = getBin();

	if (event.type == "keyup") {
	if (bin.length >= 6) {
	Mercadopago.getPaymentMethod({
	"bin": bin
	}, setPaymentMethodInfo);
	}
	} else {
	setTimeout(function() {
	if (bin.length >= 6) {
	Mercadopago.getPaymentMethod({
	"bin": bin
	}, setPaymentMethodInfo);
	}
	}, 100);
	}
	};

	Mercadopago.getIdentificationTypes();


	function setPaymentMethodInfo(status, response) {
	if (status == 200) {
	// do somethings ex: show logo of the payment method
	var form = document.querySelector('#pay');

	if (document.querySelector("input[name=paymentMethodId]") == null) {
	var paymentMethod = document.createElement('input');
	paymentMethod.setAttribute('name', "paymentMethodId");
	paymentMethod.setAttribute('type', "hidden");
	paymentMethod.setAttribute('value', response[0].id);

	form.appendChild(paymentMethod);
	} else {
	document.querySelector("input[name=paymentMethodId]").value = response[0].id;
	}
	}
	};

	function addEvent(el, eventName, handler) {
	if (el.addEventListener) {
	el.addEventListener(eventName, handler);
	} else {
	el.attachEvent('on' + eventName, function(){
	handler.call(el);
	});
	}
	};

	addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 'keyup', guessingPaymentMethod);
	addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 'change', guessingPaymentMethod);

	doSubmit = false;
	addEvent(document.querySelector('#pay'),'submit',doPay);
	function doPay(event){
	event.preventDefault();
	if(!doSubmit){
	var $form = document.querySelector('#pay');

	Mercadopago.createToken($form, sdkResponseHandler); // The function "sdkResponseHandler" is defined below

	return false;
	}
	};

	function sdkResponseHandler(status, response) {
	console.log(response);

	if (status != 200 && status != 201) {
	alert("verify filled data");
	}else{

	var form = document.querySelector('#pay');

	var card = document.createElement('input');
	card.setAttribute('name',"token");
	card.setAttribute('type',"hidden");
	card.setAttribute('value',response.id);
	form.appendChild(card);
	// doSubmit=true;
	// form.submit();
	}
	};
	</script>
	</body>
	</html>