Mercado Pago's Official React SDK.
This is a wrapper that allows integrate Checkout Bricks easily inside React projects.
Before starts verify if you have installed Node version 14.18.0
or superior.
First, install SDK MercadoPago React:
npm install @mercadopago/sdk-react
Start the instance of MercadoPago:
import { initMercadoPago } from '@mercadopago/sdk-react';
initMercadoPago('YOUR_PUBLIC_KEY');
Each brick needs a component, such as:
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;
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;
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;
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;
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.
This project is under Apache license, version 2.0. See Apache 2.0 file for more details.