React SDK MercadoPago

Mercado Pago's Official React SDK.


Table of Contents

- React SDK MercadoPago
- Table of Contents
- About
- Prerequisites
- Installation
- Initialization
- Checkout Bricks
- Card Payment Brick
- Payment Brick
- Status Screen Brick
- Wallet Brick
- Brand Brick
- Secure Fields
- Card Number
- Security Code
- Expiration Date
- Expiration Month
- Expiration Year
- createCardToken
- updateCardToken
- Fast Payment
- createAuthenticator
- Core Methods
- getIdentificationTypes
- getPaymentMethods
- getAccountPaymentMethods
- getCardId
- updatePseudotoken
- getIssuers
- getInstallments
- Run SDK project
- License

About

This is a wrapper that allows integrate Checkout Bricks, Secure Fields and Core Methods, and Fast Payment authentication easily inside React projects.

Prerequisites

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

Installation

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

Initialization

Start the instance of MercadoPago:

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

initMercadoPago('YOUR_PUBLIC_KEY');
`

Checkout Bricks

Checkout Bricks are modular checkout components.
Below are examples of Brick implementations, for more information check the Examples folder.

> Note
> It's mandatory to have previously done the Initialization step

$3

Use CardPayment component inside your functional React:

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

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

$3

Use Payment component inside your functional React:

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

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

$3

Use StatusScreen component inside your functional React:

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

const App = () => {
return ;
};
export default App;
`

$3

Use Wallet component inside your functional React:

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

const App = () => {
return ;
};
export default App;
`

$3

Use Brand component inside your functional React:

`jsx
import { Brand } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

Secure Fields

Secure Fields are input components that allow you to collect credit and debit card information safely, and allow you to get the PCI SAQ A certification.
The Secure Fields module also provides a method to get the card token safely without the need to store the card data.

> Note
> It's mandatory to have previously done the Initialization step

Fast Payment

> This feature is disabled by default, to enable, please contact the offical _Mercado Pago_ support via developer's website: www.mercadopago.com/developers

Fast Payment allows users to authenticate using their MercadoPago/MercadoLibre account and quickly access their saved payment methods for streamlined checkout experiences.

> Note
> It's mandatory to have previously done the Initialization step

$3

Creates an authenticator instance for Fast Payments authentication flow.

`javascript
import { createAuthenticator } from '@mercadopago/sdk-react';

// Show authentication UI and get FastPaymentToken
try {
const authenticator = await createAuthenticator('100.00', 'user@example.com');
const fastPaymentToken = await authenticator.show({
confirmationLocation: 'web',
});
console.log('FastPaymentToken:', fastPaymentToken);
} catch (error) {
console.error(error.message, 'Error code:', error?.errorCode);
}
`

For a complete working example, see the examples/fastPaymentFlow/ directory.

$3

#### Card Number

`jsx
import { CardNumber } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

#### Security Code

`jsx
import { SecurityCode } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

#### Expiration Date

> Note: Expiration Date cannot coexist with Expiration Month or Expiration Year

`jsx
import { ExpirationDate } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

#### Expiration Month

`jsx
import { ExpirationMonth } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

#### Expiration Year

`jsx
import { ExpirationYear } from '@mercadopago/sdk-react';

const App = () => {
return ;
};
export default App;
`

$3

#### createCardToken

Return a token card

`javascript
import { createCardToken } from '@mercadopago/sdk-react';
const cardToken = await createCardToken({
cardholderName: '',
identificationType: '',
identificationNumber: '',
});
`

#### updateCardToken

Update a token card

`javascript
import { updateCardToken } from '@mercadopago/sdk-react';
const cardToken = await updateCardToken('');
`

Core Methods

For a full explanation of each function parameters and return, check the SDK-JS documentation of the Core Methods

> Note
> It's mandatory to have previously done the Initialization step

$3

Return all the document types based on the public_key

`javascript
import { getIdentificationTypes } from '@mercadopago/sdk-react';
const identificationTypes = await getIdentificationTypes();
`

$3

Returns a payment methods list

`javascript
import { getPaymentMethods } from '@mercadopago/sdk-react';
const paymentMethods = await getPaymentMethods({ bin: '' });
`

$3

Returns account payment methods for authenticated users using FastPaymentToken

`javascript
import { getAccountPaymentMethods } from '@mercadopago/sdk-react';
const accountPaymentMethods = await getAccountPaymentMethods('');
`

$3

Retrieves card ID from a pseudotoken using FastPaymentToken authentication

`javascript
import { getCardId } from '@mercadopago/sdk-react';
const cardIdResponse = await getCardId('', '');
console.log(cardIdResponse.card_id);
`

$3

Updates a pseudotoken with card token information

`javascript
import { updatePseudotoken } from '@mercadopago/sdk-react';
await updatePseudotoken('', '', '');
`

$3

Returns a issuers list

`javascript
import { getIssuers } from '@mercadopago/sdk-react';
const issuers = await getIssuers({
paymentMethodId: '',
bin: '',
});
`

$3

Returns all installments available

`javascript
import { getInstallments } from '@mercadopago/sdk-react';
const installments = await getInstallments({
amount: ,
locale: '',
bin: '',
});
`

> By default, your bundler should select the appropriate module format. However, if you need to explicitly use ECMAScript Modules (ESM) or CommonJS (CJS), you can specify. For example, use import createCardToken from '@mercadopago/sdk-react/esm/secureFields/createCardToken/index'; for ECMAScript modules, or const createCardToken = require('@mercadopago/sdk-react/cjs/secureFields/createCardToken/index'); for CommonJS modules.

Run SDK project

> Replace the on examples/contants with your public key.

To run Mercado Pago React SDK, follow the steps:

Install project dependencies:

`
npm install
`

Execute project build (_optional_):

`
npm run build
`

Execute storybook:

`
npm run start
``

License

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