It is a clientside SDK whose main objective is to facilitate the integration of Mercado Pago payment solutions on your website, thus allowing a secure flow and within the security standards of sensitive data transfer.

Support

Desktop web

Browser	Support
Chrome	80+
Firefox	74+
Safari	14+
Edge	80+
Opera	Complete
Internet Explorer	11

Mobile web

Browser	Support
Chrome	80+
Firefox	74+
Safari	13.3+
Android Browser	Complete

Installation

To install the SDK, you must include the script in your application's HTML or install a package on npm

<script src="https://sdk.mercadopago.com/js/v2"></script>

npm install @mercadopago/sdk-js;

Initializing

To start the SDK, you need to assign your public_key along with some options.

If you are using html reference:

Example:

const mp = new MercadoPago("YOUR_PUBLIC_KEY", {
  locale: "en-US",
});

If you are using npm package:

Example:

import { loadMercadoPago } from "@mercadopago/sdk-js";

await loadMercadoPago();
const mp = new window.MercadoPago("YOUR_PUBLIC_KEY", {
  locale: "en-US",
});

Checkout API

Use our APIs to build your own payment experience on your website or mobile application. From basic to advanced settings, control the entire experience.

There are multiple supported ways to integrate Checkout API. Ranging from the most simple integration, using Checkout Bricks, to integrating with the Core Methods, where the integrator has total control of the checkout experience.

For a complete reference on the integration options, check the API reference

Full example using Bricks

<html>
    <body>
        <div id="cardPaymentBrick_container"></div>
    </body>
</html>
<script src="https://sdk.mercadopago.com/js/v2"></script>


<script>
    const mp = new MercadoPago('YOUR_PUBLIC_KEY');
    const bricksBuilder = mp.bricks();

    const renderCardPaymentBrick = async (bricksBuilder) => {

        const settings = {
            initialization: {
                amount: 100, //value of the payment to be processed
            },
            customization: {
                visual: {
                    style: {
                        theme: 'dark' // 'default' |'dark' | 'bootstrap' | 'flat'
                    }
                }
            },
            callbacks: {
                onSubmit: (cardFormData) => {
                    return new Promise((resolve, reject) => {
                        fetch("/process_payment", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify(cardFormData)
                        })
                        .then(resp => resp.json())
                        .then((response) => {
                            // get payment result
                            resolve();
                        })
                        .catch((error) => {
                            // get payment result error
                            reject();
                        })
                    });
                },
                onReady: () => {
                    // handle form ready
                },
                onError: (error) => {
                    // handle error
                }
            }
        }

        cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
    };

    renderCardPaymentBrick(bricksBuilder);
</script>

Full example using cardForm

<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">
<div id="form-checkout__cardNumber" class="container"></div>
<div id="form-checkout__expirationDate" class="container"></div>
<div id="form-checkout__securityCode" class="container"></div>
<input type="text" id="form-checkout__cardholderName" />
<select id="form-checkout__issuer"></select>
<select id="form-checkout__installments"></select>
<select id="form-checkout__identificationType"></select>
<input type="text" id="form-checkout__identificationNumber" />
<input type="email" id="form-checkout__cardholderEmail" />

<button type="submit" id="form-checkout__submit">Pagar</button>
<progress value="0" class="progress-bar">Carregando...</progress>
</form>

<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
const mp = new MercadoPago('PUBLIC_KEY', {
    locale: 'en-US'
})
const cardForm = mp.cardForm({
  amount: "100.5",
  iframe: true,
  form: {
    id: "form-checkout",
    cardNumber: {
      id: "form-checkout__cardNumber",
      placeholder: "Card number",
    },
    expirationDate: {
      id: "form-checkout__expirationDate",
      placeholder: "MM/YYYY",
    },
    securityCode: {
      id: "form-checkout__securityCode",
      placeholder: "CVV",
    },
    cardholderName: {
      id: "form-checkout__cardholderName",
      placeholder: "Cardholder name",
    },
    issuer: {
      id: "form-checkout__issuer",
      placeholder: "Issuer",
    },
    installments: {
      id: "form-checkout__installments",
      placeholder: "Total installments",
    },
    identificationType: {
      id: "form-checkout__identificationType",
      placeholder: "Document type",
    },
    identificationNumber: {
      id: "form-checkout__identificationNumber",
      placeholder: "Document number",
    },
    cardholderEmail: {
      id: "form-checkout__cardholderEmail",
      placeholder: "Email",
    },
  },
  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: "Product description",
          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");
      };
    }
  },
});

</script>

Checkout Pro

Checkout Pro is the integration that allows you to charge through our web form from any device in a simple, fast and secure way.

See the API reference

Full example using Checkout Pro

<!DOCTYPE html>
<html>
  <body>
    <div class="cho_container"></div>
    <script src="https://sdk.mercadopago.com/js/v2"></script>
    <script>
      const mp = new MercadoPago("PUBLIC_KEY", { locale: "en-US" });
      const walletBuilder = mp.bricks();
      const renderComponent = async (walletBuilder) => {
        const settings = {
          initialization: {
            preferenceId: "<PREFERENCE_ID>",
          },
        };
        const walletController = await walletBuilder.create(
          "wallet",
          "cho_container",
          settings
        );
      };
      renderComponent(walletBuilder);
    </script>
  </body>
</html>

API

MercadoPago(`public_key`[`, options`])

SDK instantiation method.

Params:

public_key | string, REQUIRED

It is the public key for your account.

options | object, OPTIONAL

Option name	Values	Default	Type	Description
`locale`	`es-AR` `es-CL` `es-CO` `es-MX` `es-VE` `es-UY` `es-PE` `pt-BR` `en-US`	Browser default locale	string	Set the locale	OPTIONAL
`advancedFraudPrevention`	`true\|false`	true	boolean	Set the advanced fraud prevention status	OPTIONAL
`trackingDisabled`	`true\|false`	false	boolean	Enable/disable tracking of generic usage metrics	OPTIONAL

Example:

const mp = new MercadoPago("PUBLIC_KEY", {
  locale: "en-US",
  advancedFraudPrevention: true,
});

Return: `mp instance`

Check the reference for all SDK modules.


Checkout Bricks
Card Form
Core Methods
Secure Fields
Checkout Pro

React library

The React SDK library makes the integration even easier. It is a wrapper that allows integrate Checkout Bricks easily inside React projects.

Currently available for Checkout Pro and Checkout Bricks

import { initMercadoPago } from "@mercadopago/sdk-react";

initMercadoPago("YOUR_PUBLIC_KEY");

Notes

When requesting our SDK (https://sdk.mercadopago.com/js/v2), we may ship different script based on the browser's User Agent so we can optmize the bundle size according to the needs. For IE 11 we ship polyfills so you can get a better experience when integrating with our SDK

FAQs

What is @mercadopago/sdk-js?

Is @mercadopago/sdk-js popular?

Is @mercadopago/sdk-js well maintained?

Package last updated on 23 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@mercadopago/sdk-js

SDK MercadoPago.js V2

Table of Contents

About

Support

Desktop web

Mobile web

Installation

Initializing

Example:

Example:

Checkout API

Checkout Pro

API

MercadoPago(`public_key`[`, options`])

Params:

Example:

Return: `mp instance`

React library

Notes

Related posts

@mercadopago/sdk-js

SDK MercadoPago.js V2

Table of Contents

About

Support

Desktop web

Mobile web

Installation

Initializing

Example:

Example:

Checkout API

Checkout Pro

API

MercadoPago(public_key[, options])

Params:

Example:

Return: mp instance

React library

Notes

Related posts

The Changelog Podcast: Practical Steps to Stay Safe on npm

Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware

MercadoPago(`public_key`[`, options`])

Return: `mp instance`