Partners
Partners con certificación PCI
Para los partners certificados PCI, será necesario enviar el AOC para que el equipo de Riesgos de Mercado Pago pueda evaluar la autorización, y así proceder con la tokenización a través del backend.
Partner sin certificación PCI
La tokenización de los pagos con tarjeta de crédito debe realizarse utilizando nuestro SDK JS V2, a través del cardform.
MercadoPago.js es responsable de los flujos necesarios para obtener la información obligatoria para la creación de un pago.
html
<body>
<script src="https://sdk.mercadopago.com/js/v2"></script>
</body>Añadir formulario de pago
html
<style>
#form-checkout {
display: flex;
flex-direction: column;
max-width: 600px;
}
.container {
height: 18px;
display: inline-block;
border: 1px solid rgb(118, 118, 118);
border-radius: 2px;
padding: 1px 2px;
}
</style>
<form id="form-checkout">
<fieldset>
<ul>
<li>
<label for="cardNumber">Número de tarjeta:</label>
<input type="text" name="cardNumber" id="form-checkout__cardNumber" />
</li>
<li>
<label for="cardExpirationMonth">Mes de vencimiento:</label>
<input type="text" name="cardExpirationMonth" id="form-checkout__cardExpirationMonth" value="12" />
</li>
<li>
<label for="cardExpirationYear">Año de vencimiento:</label>
<input type="text" name="cardExpirationYear" id="form-checkout__cardExpirationYear" value="24" />
</li>
<li>
<label for="cardholderName">Nombre del titular:</label>
<input type="text" name="cardholderName" id="form-checkout__cardholderName" value="APRO" />
</li>
<li>
<label for="cardholderEmail">Correo electrónico:</label>
<input type="email" name="cardholderEmail" id="form-checkout__cardholderEmail" value="test_user_60077763@testuser.com" />
</li>
<li>
<label for="securityCode">Código de seguridad:</label>
<input type="text" name="securityCode" id="form-checkout__securityCode" value="123" />
</li>
<li>
<label for="issuer">Emisor:</label>
<select name="issuer" id="form-checkout__issuer"></select>
</li>
<li>
<label for="identificationType">Tipo de documento:</label>
<select name="identificationType" id="form-checkout__identificationType"></select>
</li>
<li>
<label for="identificationNumber">Número de documento:</label>
<input type="text" name="identificationNumber" id="form-checkout__identificationNumber" value="12345678909" />
</li>
<li>
<label for="installments">Cuotas:</label>
<select name="installments" id="form-checkout__installments"></select>
</li>
<li>
<button type="submit" id="form-checkout__submit">Pagar</button>
</li>
<li>
<progress value="0" class="progress-bar">Cargando...</progress>
</li>
</ul>
</fieldset>
</form>Inicializar formulario de pago
javascript
const cardForm = mp.cardForm({
amount: "100.5",
autoMount: true,
form: {
id: "form-checkout",
cardholderName: {
id: "form-checkout__cardholderName",
placeholder: "Nombre del titular",
},
cardholderEmail: {
id: "form-checkout__cardholderEmail",
placeholder: "Correo electrónico",
},
cardNumber: {
id: "form-checkout__cardNumber",
placeholder: "Número de tarjeta",
},
cardExpirationMonth: {
id: "form-checkout__cardExpirationMonth",
placeholder: "Mes de vencimiento",
},
cardExpirationYear: {
id: "form-checkout__cardExpirationYear",
placeholder: "Año de vencimiento",
},
securityCode: {
id: "form-checkout__securityCode",
placeholder: "Código de seguridad",
},
installments: {
id: "form-checkout__installments",
placeholder: "Cuotas",
},
identificationType: {
id: "form-checkout__identificationType",
placeholder: "Tipo de documento",
},
identificationNumber: {
id: "form-checkout__identificationNumber",
placeholder: "Número de documento",
},
issuer: {
id: "form-checkout__issuer",
placeholder: "Banco emisor",
},
},
callbacks: {
onFormMounted: error => {
if (error) return console.warn("Error al montar el formulario: ", error);
console.log("Formulario montado");
},
onSubmit: event => {
event.preventDefault();
const {
paymentMethodId: payment_method_id,
issuerId: issuer_id,
cardholderEmail: email,
amount,
token,
installments,
identificationNumber,
identificationType,
} = cardForm.getCardFormData();
/*fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token,
issuer_id,
payment_method_id,
transaction_amount: Number(amount),
installments: Number(installments),
description: "Descripción del producto",
payer: {
email,
identification: {
type: identificationType,
number: identificationNumber,
},
},
}),
});*/
alert("Generated card token: " + token);
},
onFetching: resource => {
console.log("Fetching resource: ", resource);
// Animar barra de progreso
const progressBar = document.querySelector(".progress-bar");
progressBar.removeAttribute("value");
return () => {
progressBar.setAttribute("value", "0");
};
},
},
});Nota
Si estás utilizando el SDK JS V1, será necesario migrar al
SDK JS V2
. Ejemplo práctico para tokenización con JS V2: Tokenización - V2 - JSFiddle .
. Ejemplo práctico para tokenización con JS V2: Tokenización - V2 - JSFiddle .