Configurar ambiente de desenvolvimento
Para começar a integrar as soluções de pagamento do Mercado Pago, é necessário preparar seu ambiente de desenvolvimento com uma série de configurações básicas que permitirão acessar as funcionalidades do Mercado Pago a partir do frontend de forma segura.
Incluir a biblioteca MercadoPago.js
Client-Side
Utilize nossas bibliotecas oficiais para acessar as funcionalidades do Mercado Pago a partir do seu frontend e capturar os dados dos pagamentos realizados de forma segura.
<body>
<script src="https://sdk.mercadopago.com/js/v2"></script>
</body>
npm install @mercadopago/sdk-js
Inicializar biblioteca do Mercado Pago
Client-Side
Para inicializar a biblioteca do Mercado Pago, é necessário utilizar suas credenciaisChaves de acesso únicas que usamos para identificar uma integração na sua conta, estando vinculadas à sua aplicação. Para mais informações, acesse o link abaixo.Credenciais, chaves únicas que identificam sua integração e estão vinculadas à aplicaçãoEntidade registrada no Mercado Pago que atua como um identificador para gerenciar suas integrações. Para mais informações, acesse o link abaixo.Detalhes da aplicação criada, garantindo que você desenvolva seu projeto contando com as melhores medidas de segurança do Mercado Pago.
Nesta etapa, você deverá usar sua Public Key de testeChave pública de testes e que é utilizada no frontend para acessar informações e criptografar dados, seja na fase de desenvolvimento ou na fase de testes. Você pode acessá-la através de Suas integrações > Detalhes da aplicação > Testes > Credenciais de teste., que pode ser acessada nos detalhes da sua aplicação em Suas integrações, sob o título Teste > Credenciais de Teste no menu localizado à esquerda da tela.
Copie a Public KeyChave pública de testes e que é utilizada no frontend para acessar informações e criptografar dados, seja na fase de desenvolvimento ou na fase de testes. Você pode acessá-la através de Suas integrações > Detalhes da aplicação > Testes > Credenciais de teste., localizada e a inclua no frontend. Isso permitirá acessar as informações dos meios de pagamento e criptografar os dados do pagador e dos cartões utilizados.
<script>
const mp = new MercadoPago("YOUR_PUBLIC_KEY");
</script>
import { loadMercadoPago } from "@mercadopago/sdk-js";
await loadMercadoPago();
const mp = new window.MercadoPago("YOUR_PUBLIC_KEY");
Com essas configurações, seu ambiente de desenvolvimento já está pronto para continuar com as configurações específicas para sua integração.