# MD for: https://www.mercadopago.com.pe/developers/en/docs/checkout-bricks/how-tos/how-to-migrate/cardform/clientside.md

\# How to migrate from CardForm If you have an integration that uses CardForm, follow the instructions below to migrate to Checkout Bricks. The Payment Brick allows you, in addition to using credit and debit cards, to use saved cards and other means of payment, in a simple way, with the frontend ready. > CLIENT\_SIDE > > h2 > > Receive payments with cards 1\. In your structure, find the form that calls the CardForm. It should look like this: \`\`\`html 

Pagar Carregando... 

\`\`\`\` And replace it with the tag that will contain the Brick: \`\`\`html \`\`\`\`\` 2\. In JavaScript, find the function that initializes the Card Form: \`\`\`javascript const cardForm = mp.cardForm({ amount: "100.5", iframe: true, form: { id: "form-checkout", cardNumber: { id: "form-checkout\_\_cardNumber", placeholder: "Número do cartão", }, expirationDate: { id: "form-checkout\_\_expirationDate", placeholder: "MM/YY", }, securityCode: { id: "form-checkout\_\_securityCode", placeholder: "Código de segurança", }, cardholderName: { id: "form-checkout\_\_cardholderName", placeholder: "Titular do cartão", }, issuer: { id: "form-checkout\_\_issuer", placeholder: "Banco emissor", }, installments: { id: "form-checkout\_\_installments", placeholder: "Parcelas", }, identificationType: { id: "form-checkout\_\_identificationType", placeholder: "Tipo de documento", }, identificationNumber: { id: "form-checkout\_\_identificationNumber", placeholder: "Número do documento", }, cardholderEmail: { id: "form-checkout\_\_cardholderEmail", placeholder: "E-mail", }, }, callbacks: { onFormMounted: error => { if (error) return console.warn("Form Mounted handling error: ", error); console.log("Form mounted"); }, 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: "Descrição do produto", payer: { email, identification: { type: identificationType, number: identificationNumber, }, }, }), }); }, onFetching: (resource) => { console.log("Fetching resource: ", resource); // Animate progress bar const progressBar = document.querySelector(".progress-bar"); progressBar.removeAttribute("value"); return () => { progressBar.setAttribute("value", "0"); }; } }, }); \`\`\`\` Replace with the function that initializes Brick: \`\`\`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: '', }, }, 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); \`\`\`\`\` > On Server-Side, no changes are needed.