# MD for: https://www.mercadopago.com.br/developers/pt/docs/checkout-bricks/payment-brick/default-rendering.md

\# Default rendering Before rendering the Payment Brick, first execute the \[initialization steps\](https://www.mercadopago.com.br/developers/en/docs/checkout-bricks/common-initialization) shared among all Bricks. From there, see below the necessary information to configure and render the Payment Brick. > NOTE > > Note > > To consult the types and specifications of the parameters and responses of the Brick functions, refer to the \[technical documentation\](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/payment.md). ## Configure the Brick Create Brick's startup configuration. 

* [javascript ](#editor%5F1)
* [react-jsx ](#editor%5F2)
javascript react-jsx 

```
const renderPaymentBrick = async (bricksBuilder) => {
 const settings = {
  initialization: {
  /*
  "amount" is the total amount to be paid by all means of payment with the exception of the Mercado Pago Account and Installment without a credit card, which have their processing value determined in the backend through the "preferenceId"
  */
  amount: 100,
  preferenceId: "<PREFERENCE_ID>",
  },
  customization: {
  paymentMethods: {
  ticket: "all",
  bankTransfer: "all",
  creditCard: "all",
  prepaidCard: "all",
  debitCard: "all",
  mercadoPago: "all",
  },
  },
  callbacks: {
  onReady: () => {
  /*
  Callback called when Brick is ready.
  Here you can hide loadings from your site, for example.
  */
  },
  onSubmit: ({ selectedPaymentMethod, formData }) => {
  // callback called when clicking the submit data button
  return new Promise((resolve, reject) => {
  fetch("/process_payment", {
  method: "POST",
  headers: {
  "Content-Type": "application/json",
  },
  body: JSON.stringify(formData),
  })
  .then((response) => response.json())
  .then((response) => {
  // receive payment result
  resolve();
  })
  .catch((error) => {
  // handle error response when trying to create payment
  reject();
  });
  });
  },
  onError: (error) => {
  // callback called for all Brick error cases
  console.error(error);
  },
  },
 };
 window.paymentBrickController = await bricksBuilder.create(
  "payment",
  "paymentBrick_container",
  settings
 );
};
renderPaymentBrick(bricksBuilder);
```

Copiar 

```
const initialization = {
 amount: 100,
 preferenceId: "<PREFERENCE_ID>",
};
const customization = {
 paymentMethods: {
  ticket: "all",
  bankTransfer: "all",
  creditCard: "all",
  prepaidCard: "all",
  debitCard: "all",
  mercadoPago: "all",
 },
};
const onSubmit = async (
 { selectedPaymentMethod, formData }
) => {
 // callback called when clicking the submit data button
 return new Promise((resolve, reject) => {
  fetch("/process_payment", {
  method: "POST",
  headers: {
  "Content-Type": "application/json",
  },
  body: JSON.stringify(formData),
  })
  .then((response) => response.json())
  .then((response) => {
  // receive payment result
  resolve();
  })
  .catch((error) => {
  // handle error response when trying to create payment
  reject();
  });
 });
};
const onError = async (error) => {
 // callback called for all Brick error cases
 console.log(error);
};
const onReady = async () => {
 /*
  Callback called when Brick is ready.
  Here you can hide loadings from your site, for example.
 */
};
```

Copiar 

\> WARNING > > Attention > > Whenever the user leaves the screen where some Brick is displayed, it is necessary to destroy the current instance with the command \`window.paymentBrickController.unmount()\`. When entering again, a new instance must be generated. To use a payment method (\`paymentMethods\`) of the "mercadoPago" type, a preference must be sent during Brick initialization, replacing the value \`\` by the ID of the preference created. Instructions for creating the preference are in the \[Enable payment with Mercado Pago\](https://www.mercadopago.com.br/developers/en/docs/checkout-bricks/payment-brick/default-rendering#bookmark\_enable\_payment\_with\_mercado\_pago) section. ## Render the Brick Once the configurations are created, enter the code below to render the Brick. > NOTE > > Important > > The id \`paymentBrick\_container\` of the html div below should correspond to the value used in the method \`create()\` of the last step. 

* [html ](#editor%5F3)
* [react-jsx ](#editor%5F4)
html react-jsx 

```
<div id="paymentBrick_container"></div>
```

Copiar 

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

<Payment
  initialization={initialization}
  customization={customization}
  onSubmit={onSubmit}
  onReady={onReady}
  onError={onError}
/>
```

Copiar 

The result of rendering the Brick should look like the image below. !\[payment-Brick-layout-mlb\](https://www.mercadopago.com.br/checkout-bricks/payment-brick-layout-mlb-en.jpg) ## Enable payment with Mercado Pago To use a payment method (paymentMethods) of the "mercadoPago" type, a preference must be sent during Brick initialization, replacing the value  by the ID of the preference created. To create a preference in your backend, add the \[Mercado Pago SDK\](https://www.mercadopago.com.br/developers/en/docs/sdks-library/landing) and the necessary \[credentials\](https://www.mercadopago.com.br/developers/en/guides/additional-content/your-integrations/credentials) to your project to enable the preference usage: 

* [csharp ](#editor%5F9)
* [java ](#editor%5F7)
* [node ](#editor%5F6)
* [php ](#editor%5F5)
* [python ](#editor%5F10)
* [ruby ](#editor%5F8)
php node java ruby csharp python 

```
<?php
// Mercado Pago SDK
require __DIR__ . '/vendor/autoload.php';
// Add Your credentials
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>
```

Copiar 

```
// Mercado Pago SDK
const mercadopago = require ('mercadopago');
// Add Your credentials
mercadopago.configure({
  access_token: 'PROD_ACCESS_TOKEN'
});
```

Copiar 

```
// Mercado Pago SDK
import com.mercadopago.MercadoPagoConfig;
// Add Your credentials
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");
```

Copiar 

```
# Mercado Pago SDK
require 'mercadopago'
# Add Your credentials
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')
```

Copiar 

```
// Mercado Pago SDK
 using MercadoPago.Config;
 // Add Your credentials
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";
```

Copiar 

```
# Mercado Pago SDK
import mercadopago
# Add Your credentials
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")
```

Copiar 

Then set the preference according to your product or service. The code examples below set the \*\*purpose of preference\*\* to \`wallet\_purchase\`, but it is also possible to set it to \`onboarding\_credits\`. Understand the difference between the two: \* \*\*wallet\_purchase\*\*: the user must log in when redirected to his Mercado Pago account. \* \*\*onboarding\_credits\*\*: after logging in, the user will see the pre-selected credit payment option in his Mercado Pago account. 

* [csharp ](#editor%5F15)
* [curl ](#editor%5F17)
* [java ](#editor%5F13)
* [node ](#editor%5F12)
* [php ](#editor%5F11)
* [python ](#editor%5F16)
* [ruby ](#editor%5F14)
php node java ruby csharp python curl 

```
<?php
$client = new PreferenceClient();
$preference = $client->create([
  "items"=> array(
  array(
  "title" => "My product",
  "quantity" => 1,
  "unit_price" => 25
  )
  )
]);
?>
```

Copiar 

```
// Create a preference object
let preference = {
  // o "purpose": "wallet_purchase" only allows logged payments
  // to allow guest payments you can omit this property
  "purpose": "wallet_purchase",
  "items": [
  {
  "id": "item-ID-1234",
  "title": "Meu produto",
  "quantity": 1,
  "unit_price": 75.76
  }
  ]
};

mercadopago.preferences.create(preference)
  .then(function (response) {
  // This value is the preferenceId that will be sent to the Brick at startup
  const preferenceId = response.body.id;
  }).catch(function (error) {
  console.log(error);
  });
```

Copiar 

```
// Create a preference object
PreferenceClient client = new PreferenceClient();

// Create an item in the preference
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
  PreferenceItemRequest.builder()
  .title("Meu produto")
  .quantity(1)
  .unitPrice(new BigDecimal("100"))
  .build();
items.add(item);

PreferenceRequest request = PreferenceRequest.builder()
  // o .purpose('wallet_purchase') only allows logged payments
  // to allow guest payments you can omit this line
  .purpose('wallet_purchase')
  .items(items).build();

client.create(request);
```

Copiar 

```
# Create a preference object
preference_data = {
  # the purpose: 'wallet_purchase', allows only logged payments
  # to allow guest payments you can omit this property
  purpose: 'wallet_purchase',
  items: [
  {
  title: 'Meu produto',
  unit_price: 75.56,
  quantity: 1
  }
  ]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]

# This value is the preferenceId you will use in the HTML on Brick startup
@preference_id = preference['id']
```

Copiar 

```
// Create the preference request object
var request = new PreferenceRequest
{
  // the Purpose = 'wallet_purchase', allows only logged payments.
  // to allow guest payments you can omit this property
  Purpose = 'wallet_purchase',
  Items = new List<PreferenceItemRequest>
  {
  new PreferenceItemRequest
  {
  Title = "Meu produto",
  Quantity = 1,
  CurrencyId = "BRL",
  UnitPrice = 75.56m,
  },
  },
};

// Create the preference using the client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
```

Copiar 

```
# Create an item in the preference
preference_data = {
  # the "purpose": "wallet_purchase", allows only logged in payments
  # to allow guest payments, you can omit this property
  "purpose": "wallet_purchase",
  "items": [
  {
  "title": "My Item",
  "quantity": 1,
  "unit_price": 75.76
  }
  ]
}

preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
```

Copiar 

```
curl -X POST \
'https://api.mercadopago.com/checkout/preferences' \
-H 'Content-Type: application/json' \
-H 'cache-control: no-cache' \
-H 'Authorization: Bearer **PROD_ACCESS_TOKEN**' \
-d '{
  "purpose": "wallet_purchase",
  "items": [
  {
  "title": "My product",
  "quantity": 1,
  "unit_price": 75.76
  }
  ]
}'
```

Copiar 

\> WARNING > > When a user chooses to make a payment through Mercado Pago Wallet, they are redirected to the Mercado Pago page to complete the payment. The \[back\_urls\](https://www.mercadopago.com.br/developers/en/docs/checkout-bricks/wallet-brick/advanced-features/preferences#bookmark\_redirect\_the\_buyer\_to\_your\_site) allow them to be returned to the site after the payment is completed. Do not use local domains for this value (such as 'localhost/' or '127.0.0.1' with or without a specified port). We recommend using a server with a named domain (DNS) or development IPs to be able to return to the site after payment. For more details on how to configure it, access the \[Preferences\](https://www.mercadopago.com.br/developers/en/docs/checkout-bricks/wallet-brick/advanced-features/preferences) section.