@mercadopago/sdk-react

React SDK MercadoPago

Mercado Pago's Official React SDK.

Table of Contents

1. About
2. Prerequisites
3. Installation
4. Initialization
5. Render Brick
   1. Example Card Payment Brick
   2. Example Payment Brick
   3. Example Status Screen Brick
   4. Example Wallet Brick
6. Run SDK project
7. 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/mercadoPago/initMercadoPago';

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 Card from '@mercadopago/sdk-react/bricks/cardPayment';

const App = () => {
  return (
    <Card
      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/bricks/payment';

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/bricks/statusScreen';

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/bricks/wallet';

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.