How to migrate from Web Tokenize Checkout V2
If your integration is using Web Tokenize Checkout V2, follow the steps below to migrate to Checkout Bricks.
Receive payments with cards
Client-Side
- Find in your current structure the form that calls the Web Tokenize Checkout.
HTML
<div class=tokenizer-container>
<script>
// Agrega credenciales de SDK
const mp = new MercadoPago('PUBLIC_KEY', {locale: 'es-AR'});
// Inicializa el Web Tokenize Checkout
mp.checkout({
tokenizer: {
totalAmount: 4000,
backUrl: 'https://www.mi-sitio.com/procesar-pago'
},
render: {
container: '.tokenizer-container', // Indica dónde se mostrará el botón
label: 'Pagar' // Cambia el texto del botón de pago (opcional)
}
});
</script>
</div>- Replace this form with the tag that will contain the Card Payment Brick.
HTML
<div id="paymentBrick_container"></div>- Add the script responsible for loading the Bricks.
javascript
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
const renderPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 100, //valor do processamento a ser realizado
payer: {
email: '<PAYER_EMAIL_HERE>m',
},
},
style: {
theme: 'default' // | 'dark' | 'bootstrap' | 'flat'
},
callbacks: {
onReady: () => {
// callback chamado quando o Brick estiver pronto
},
onSubmit: ({paymentType, formData}) => {
// callback chamado o usuário clicar no botão de submissão dos dados
// ejemplo de envío de los datos recolectados por el Brick a su servidor
return new Promise((resolve, reject) => {
fetch("/processar-pago", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData)
})
.then((response) => {
// receber o resultado do pagamento
resolve();
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar o pagamento
reject();
})
});
},
onError: (error) => {
// callback chamado para todos os casos de erro do Brick
},
},
};
window.cardPaymentBrickController = await bricksBuilder.create('payment', 'paymentBrick_container', settings);
};
renderPaymentBrick(bricksBuilder);- In Brick's
onSubmitcallback, add the same URL that you used in theactionparameter of your form. This is where Brick will send the payment form data.
Users and cards
Client-Side
Note
The user and card creation process has no difference between Web Tokenize Checkout and Checkout Bricks.
Receive payment from a user with saved cards
To receive payment from a user with saved cards, it is necessary to pass the user and the cards to Bricks, which will perform the tokenization process and send the information to generate the payment in the onSubmit callback.
- Find in the current structure of your integration the form that calls the Web Tokenize Checkout.
HTML
<script>
mp.checkout({
tokenizer: {
totalAmount: 4000,
backUrl: 'https://www.mi-sitio.com/process',
savedCards: {
cardIds: '1518023392627,1518023332143' // IDs de las tarjetas
customerId: '209277402-FqRqgEc3XItrxs' // Tu customer ID
}
},
render: {
container: ‘.tokenizer-container’,
label: ‘Pagar’
}
});
</script>- Replace this form with the tag that will contain the Card Payment Brick.
HTML
<script>
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
const renderCardPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 100, //valor do processamento a ser realizado
payer: {
customer_id: "209277402-FqRqgEc3XItrxs",
card_ids: [“1518023392627”,”1518023332143”]
},
},
style: {
theme: 'default' // | 'dark' | 'bootstrap' | 'flat'
},
callbacks: {
onReady: () => {
// callback chamado quando o Brick estiver pronto
},
onSubmit: ({paymentType, formData}) => {
// callback chamado o usuário clicar no botão de submissão dos dados
// ejemplo de envío de los datos recolectados por el Brick a su servidor
return new Promise((resolve, reject) => {
fetch("/processar-pago", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData)
})
.then((response) => {
// receber o resultado do pagamento
resolve();
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar o pagamento
reject();
})
});
},
onError: (error) => {
// callback chamado para todos os casos de erro do Brick
},
},
};
window.cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
};
renderCardPaymentBrick(bricksBuilder);
</script>With this configuration, it will be possible to process the payment with the saved cards.