@mercadopagoteste/sdk-react

React SDK MercadoPago

Mercado Pago's Official React SDK.

Table of Contents

• About
• Prerequisites
• Installation
• Initialization
• Render Brick
  • Example Card Payment Brick
  • Example Payment Brick
  • Example Status Screen Brick
  • Example Wallet 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/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.