# MD for: https://www.mercadopago.com.pe/developers/es/docs/checkout-pro/web-integration/add-frontend-sdk.md

\> CLIENT\_SIDE > > h1 > > Add the SDK to the frontend and initialize the checkout Once you have configured your backend, you need to configure the frontend to complete the payment experience on the client-side. For this, you can use the MercadoPago.js SDK, which allows you to capture payments directly on the frontend securely. In this section, you will learn how to include and initialize it correctly, to finally render the Mercado Pago payment button. > If you prefer, you can download the MercadoPago.js SDK from our \[official libraries\](https://www.mercadopago.com.pe/developers/en/docs/sdks-library/client-side/mp-js-v2). :::::TabsComponent ::::TabComponent{title="Include the SDK with HTML/js"} ## Include the SDK with HTML/js To include the MercadoPago.js SDK in your HTML page from a \*\*CDN (Content Delivery Network)\*\*, you first need to add the \` \`\`\` ## Initialize the checkout from the payment preference After including the SDK in your frontend, it's time to initialize it and then start the checkout. To continue, use your :toolTipComponent\[test Public Key\]{content="Testing public key, used in the frontend to access information and encrypt data, whether in the development stage or the testing stage. You can access it through \*\*Your integrations > Integration data > Testing > Testing credentials\*\*."} credential. > NOTE > > If you are developing for someone else, you will be able to access the credentials of applications you do not manage. See \[Share credentials\](https://www.mercadopago.com.pe/developers/en/docs/checkout-pro/resources/credentials) for more information. You will also need to use the payment preference ID that you obtained as a response in \[Create and configure a payment preference\](https://www.mercadopago.com.pe/developers/en/docs/checkout-pro/create-payment-preference). Next, to initialize the SDK using a CDN, you should execute this code within the \` \`\`\` > CLIENT\_SIDE > > h2 > > Create an HTML container for the payment button Finally, you will need to create a container in your HTML to define the location where the MercadoPago payment button will be displayed. The creation of the container is done by inserting an element in the HTML code of the page where the component will be rendered. \`\`\`html \`\`\` ## Render the payment button The Mercado Pago SDK will automatically render a button within this element, which will be responsible for redirecting the buyer to a purchase form in the Mercado Pago environment, as shown in the following image. !\[Button\](https://www.mercadopago.com.pe/images/cow/wallet-render-en-v1.png) :::: ::::TabComponent{title="Install the SDK using React"} ## Install the SDK using React To include the MercadoPago.js SDK in the frontend of your React project, you first need to set up your React environment. To do this, make sure you have \*\*Node.js\*\* and \*\*npm\*\* installed on your system. If you don't have them, download them from the \[official Node.js site\](http://Node.js). In your terminal or command line, run the following command to create a new React application: \`\`\` npx create-react-app my-mercadopago-app \`\`\` This will create a new directory named \`my-mercadopago-app\` with a basic React application structure. ### Install MercadoPago.js SDK Install the MercadoPago.js SDK library in the \`my-mercadopago-app\` directory. You can do this by running the following command: \`\`\` npm install @mercadopago/sdk-react \`\`\` ## Create a component for the payment button Open the \`src/App.js\` file of your React application. Once there, modify the content of the file to integrate the Mercado Pago \`wallet\` component, which is responsible for displaying the Mercado Pago payment button. To continue, use your :toolTipComponent\[test Public Key\]{content="Testing public key, used in the frontend to access information and encrypt data, whether in the development stage or the testing stage. You can access it through \*\*Your integrations > Integration data > Testing > Testing credentials\*\*."} credential. > NOTE > > If you are developing for someone else, you will be able to access the credentials of applications you do not manage. See \[Share credentials\](https://www.mercadopago.com.pe/developers/en/docs/checkout-pro/resources/credentials) for more information. You will also need to use the payment preference ID that you obtained as a response in \[Create and configure a payment preference\](https://www.mercadopago.com.pe/developers/en/docs/checkout-pro/create-payment-preference). Next, replace the value \`YOUR\_PUBLIC\_KEY\` with your key and \`YOUR\_PREFERENCE\_ID\` with the \*\*payment preference ID\*\* in the \`src/App.js\` file. See the following example. \`\`\`JavaScript import React from 'react'; import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'; // Initializes Mercado Pago with your Public Key initMercadoPago('YOUR\_PUBLIC\_KEY'); const App = () => { return ( 

# Payment Button

Click the button to make the payment.

{/\* Renders the payment button \*/} 

); }; export default App; \`\`\` ## Render the payment button When running your React application, the Mercado Pago SDK will render the payment button that will be responsible for redirecting the buyer to a purchase form in the Mercado Pago environment, as shown in the following image. !\[Button\](https://www.mercadopago.com.pe/images/cow/wallet-render-en-v1.png) :::: :::::   
Once you have completed the configuration of your frontend, you will need to set up \[Notifications\](https://www.mercadopago.com.pe/developers/en/docs/checkout-pro/payment-notifications) so that your integration receives real-time information about the events that occur in your integration.