Core Methods - SDK JS - React - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Core methods

Core Methods are the most transparent integration method with Mercado Pago, offering methods that access our APIs directly and allow the construction of a fully customizable form. In addition, in this type of integration, the integrator decides when to retrieve information about the document type and card data (issuer and installments), which allows greater flexibility in building the checkout flow experience.

The card information capture and payment token creation are made through the Secure Fields. They consist of secure fields to enter card information that enable the integration with credit and debit cards without the need to handle sensitive data, as well as facilitate obtaining the PCI Compliance certificate.

In the table below, we list the main fields available through the SDK-JS.

FieldDescription
CardNumberCard number.
SecurityCodeCard security code.
ExpirationDateCard expiration date (can be MM/YY or MM/YYYY).
ExpirationMonthCard expiration month.
ExpirationYearCard expiration year (can be YY or YYYY).

Below are examples of how to use these fields.

          
import React from 'react';
import {
  initMercadoPago,
  createCardToken,
  CardNumber,
  SecurityCode,
  ExpirationDate,
} from '@mercadopago/sdk-react';

initMercadoPago('YOUR-PUBLIC-KEY');

const App = () => {
 const cardToken = async () => {
   const response = await createCardToken({
     cardholderName: '<CARD_HOLDER_NAME>',
     identificationType: '<BUYER_IDENTIFICATION_TYPE>',
     identificationNumber: '<BUYER_IDENTIFICATION_NUMBER>',
   })
   console.log('Card Token Response = ', response)
 }
 return (
   <>
     <CardNumber placeholder='Card Number'/>
     <SecurityCode placeholder='Security Code' />
     <ExpirationDate placeholder='Expiration Date' mode='short'/>
     <button onClick={() => cardToken()}>Pay</button>
   </>
 );
};

export default App;


        

In addition to the fields described above, the React SDK has auxiliary methods for development, including:

MethodDescription
getIdentificationTypesReturns all document types based on the public_key.
getPaymentMethodsReturns a list of payment methods.
getIssuersReturns a list of issuers.
getInstallmentsReturns all available installments.
createCardTokenReturns the card token.

Below are examples of how these methods can be used.

          
import {
 getIdentificationTypes,
 getPaymentMethods,
 getIssuers,
 getInstallments,
} from '@mercadopago/sdk-react'


const identificationTypes = await getIdentificationTypes()
const paymentMethods = await getPaymentMethods({ bin: '50314332' })
const issuers = await getIssuers({ paymentMethodId: 'master', bin: '50314332' })
const installments = await getInstallments({
 amount: '1000',
 locale: 'pt-BR',
 bin: '50314332',
 processingMode: 'aggregator'
})


        
Important
For a complete detail of the parameters and returns for each function, please refer to the official documentation on Github .