Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mercadopago/sdk-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React SDK MercadoPago

Mercado Pago's Official React SDK.

About
Prerequisites
Installation
Initialization
Render Brick
Run SDK project
License

About

This is a wrapper that allows integrate Checkout Bricks easily inside React projects.

Prerequisites

Before starts verify if you have installed Node version 14.18.0 or superior.

Installation

First, install SDK MercadoPago React: npm install @mercadopago/sdk-react

Initialization

Start the instance of MercadoPago:

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

initMercadoPago('YOUR_PUBLIC_KEY');

Render Brick

Each brick needs a component, such as:

Example Card Payment Brick

Use CardPayment component inside your functional React:

import { CardPayment } from '@mercadopago/sdk-react';

const App = () => {
  return (
    <CardPayment
      initialization={{ amount: AMOUNT }}
      onSubmit={async (param) => {
        console.log(param);
      }}
    />
  );
};
export default App;

Example Payment Brick

Use Payment component inside your functional React:

import { Payment } from '@mercadopago/sdk-react';

const App = () => {
  return (
    <Payment
      initialization={{
        amount: AMOUNT,
        preferenceId: 'YOUR_PREFERENCE_ID',
      }}
      customization={customization}
      onSubmit={async (param) => {
        console.log(param);
      }}
    />
  );
};
export default App;

Example Status Screen Brick

Use StatusScreen component inside your functional React:

import {StatusScreen} from '@mercadopago/sdk-react';

const App = () => {
  return <StatusScreen initialization={{paymentId: 'YOUR_PAYMENT_ID'}}
};
export default App;

Example Wallet Brick

Use Wallet component inside your functional React:

import { Wallet } from '@mercadopago/sdk-react';

const App = () => {
  return (
    <Wallet initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }} customization={customization} />
  );
};
export default App;

Run SDK project

To use Mercado Pago React SDK, follow the steps:

Install project:

npm i

Execute project build:

npm build

Execute npm run start to initialize storybook.

License

This project is under Apache license, version 2.0. See Apache 2.0 file for more details.

@mercadopago/sdk-react