To receive payments, you need to add a form in the frontend that allows for securely capturing the payer's information and enables card encryption.

This inclusion should be done through the Card Payment Brick, which offers an optimized form with various themes and includes the necessary fields for card payments.

To add the Card Payment Brick, first configure and initialize it from the frontend, as shown in the examples below.

          
const renderCardPaymentBrick = async (bricksBuilder) => {
  const settings = {
    initialization: {
      amount: 100.99, // total amount to be paid
    },
    callbacks: {
      onReady: () => {
        /*
         Callback called when Brick is ready.
         Here you can hide loadings from your site, for example.
       */
      },
      onSubmit: (formData, additionalData) => {
        // callback called when clicking on the submit data button
        return new Promise((resolve, reject) => {
          const submitData = {
            type: "online",
            total_amount: String(formData.transaction_amount), // should be a string in the format  00.00
            external_reference: "ext_ref_1234", // identifier of the transaction source
            processing_mode: "automatic",
            transactions: {
              payments: [
                {
                  amount: String(formData.transaction_amount), // should be a string in the format  00.00 
                  payment_method: {
                    id: formData.payment_method_id,
                    type: additionalData.paymentTypeId,
                    token: formData.token,
                    installments: formData.installments,
                  },
                },
              ],
            },
            payer: {
              email: formData.payer.email,
              identification: formData.payer.identification,
            },
          };

          fetch("/process_order", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(submitData),
          })
            .then((response) => response.json())
            .then((response) => {
              // receive payment result
              resolve();
            })
            .catch((error) => {
              // handle error response when trying to create payment 
              reject();
            });
        });
      },
      onError: (error) => {
        // callback called for all Brick error cases
        console.error(error);
      },
    },
  };
  window.cardPaymentBrickController = await bricksBuilder.create(
    "cardPayment",
    "cardPaymentBrick_container",
    settings
  );
};
renderCardPaymentBrick(bricksBuilder);

        

The onSubmit callback of the Brick will obtain the minimum necessary data for creating a payment. Among those minimal data, there is the CardToken, that safely represents the card data. This token can only be used once, and will expire within 7 days.

In addition to the minimum data, we recommend collecting additional details or those that can facilitate the recognition of the purchase by the buyer, thus increasing the payment approval rate. Consult our API Reference for detailed information on all the parameters to be sent when creating a payment, including those that could improve your approval rate, and check which ones you want to include at this stage.

Then, add the relevant fields to the object being sent, which are returned in the callback response.

          
<div id="cardPaymentBrick_container"></div> // The ID must match the value sent in the create() method in the previous step

        

As a result, the rendering of the Brick will look similar to the image below.

To move on to the payment submission stage, your backend must be able to receive the information from the created form, along with the token resulting from the card encryption. For this, we recommend providing an endpoint /Process_order that accommodates the data collected by the Brick after performing the submit action.

The payment submission must be made by creating an order that contains associated payment transactions.

To do this, send a POST with your test Access TokenTesting private key of the application created in Mercado Pago, that is used in the backend. You can access it through Your integrations > Application details > Testing > Testing credentials. and the required parameters listed below to the endpoint /v1/ordersAPI and execute the request.

curl
Copiar
curl -X POST \
    'https://api.mercadopago.com/v1/orders'\
    -H 'Content-Type: application/json' \
       -H 'X-Idempotency-Key: {{SOME_UNIQUE_VALUE}}' \
       -H 'Authorization: Bearer {{YOUR_ACCESS_TOKEN}}' \
    -d '{
    "type": "online",
    "processing_mode": "automatic",
    "total_amount": "200.00",
    "external_reference": "ext_ref_1234",
    "payer": {
        "email": "test@testuser.com"
    },
    "transactions": {
        "payments": [
            {
                "amount": "200.00",
                "payment_method": {
                    "id": "master",
                    "type": "credit_card",
                    "token": "1223123",
                    "installments": 1
                }
            }
        ]
    }
}'

See the table below for descriptions of the parameters that have some important particularity that should be highlighted.

In case of success, the response will look like the example below.

json
Copiar
{
  "id": "ORD01JS2V6CM8KJ0EC4H502TGK1WP",
  "type": "online",
  "processing_mode": "automatic",
  "external_reference": "ext_ref_1234",
  "total_amount": "200.00",
  "total_paid_amount": "200.00",
  "country_code": "BRA",
  "user_id": "2021490138",
  "status": "processed",
  "status_detail": "accredited",
  "capture_mode": "automatic_async",
  "created_date": "2025-04-17T21:41:33.96Z",
  "last_updated_date": "2025-04-17T21:41:35.144Z",
  "integration_data": {
    "application_id": "874202490252970"
  },
  "transactions": {
    "payments": [
      {
        "id": "PAY01JS2V6CM8KJ0EC4H504R7YE34",
        "amount": "200.00",
        "paid_amount": "200.00",
        "reference_id": "0002yjis6j",
        "status": "processed",
        "status_detail": "accredited",
        "payment_method": {
          "id": "master",
          "type": "credit_card",
          "token": "519ada5ac7431ef6ce24ac19c38f6768",
          "installments": 1
        }
      }
    ]
  }
}