<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
<script>
Mercadopago.setPublishableKey("TEST-103c3862-74e5-4276-b6cf-65ece7878735")
function getBin() {
var ccNumber = document
.querySelector('input[data-checkout="cardNumber"]');
return ccNumber.value.replace(/[ .-]/g, '').slice(0, 6);
};
function setPaymentMethodInfo(status, response) {
if (status == 200) {
var paymentMethod = document.getElementById("paymentMethod");
paymentMethod.setAttribute('name', "paymentMethodId");
paymentMethod.setAttribute('type', "hidden");
paymentMethod.setAttribute('value', response[0].id);
var form = document.querySelector('#pay');
form.appendChild(paymentMethod);
} else {
document.querySelector("input[name=paymentMethodId]").value = response[0].id;
}
}
function sdkResponseHandler(status, response) {
window.Mercadopago.clearSession()
if (status != 200 && status != 201) {
alert(status);
} 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);
alert("generated card token: " + response.id);
}
};
function pagar() {
var form = document.querySelector('#pay');
Mercadopago.getPaymentMethod({
"bin": getBin()
}, setPaymentMethodInfo);
Mercadopago.createToken(form, sdkResponseHandler);
};
</script>
<html>
<body>
<form action="" method="post" id="pay" name="pay">
<fieldset>
<ul>
<li>
<label for="email">Email</label>
<input id="email" name="email" value="test_user_9290384@testuser.com" type="email" placeholder="" />
</li>
<li>
<label for="cardNumber">Credit card number:</label>
<input type="text" id="cardNumber" value="4235647728025682" data-checkout="cardNumber" placeholder="" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
</li>
<li>
<label for="securityCode">Security code:</label>
<input type="text" id="securityCode" value="123" data-checkout="securityCode" placeholder="" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
</li>
<li>
<label for="cardExpirationMonth">Expiration month:</label>
<input type="text" id="cardExpirationMonth" value="12" data-checkout="cardExpirationMonth" placeholder="" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
</li>
<li>
<label for="cardExpirationYear">Expiration year:</label>
<input type="text" id="cardExpirationYear" value="2020" data-checkout="cardExpirationYear" placeholder="" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
</li>
<li>
<label for="cardholderName">Card holder name:</label>
<input type="text" id="cardholderName" value="APRO APRO" data-checkout="cardholderName" placeholder="" />
</li>
<li>
<label for="docType">Document type:</label>
<select id="docType" data-checkout="docType">
<option value="CPF">CPF</option>
<option value="CNPJ">CNPJ</option>
</select>
</li>
<li>
<label for="docNumber">Document number:</label>
<input type="text" value="12345678909" id="docNumber" data-checkout="docNumber" placeholder="" />
</li>
</ul>
<input type="hidden" name="paymentMethodId" />
<input type="hidden" name="paymentMethod" id="paymentMethod">
<input type="button" value="Pagar" onclick="pagar();" />
</fieldset>
</form>
<div class="container">
<div class="starter-template">
</div>
</div>
</body>
</html>