Preferência no onSubmit
Para facilitar e otimizar o seu processo de integração, veja abaixo um exemplo completo de como incluir o Wallet Brick em seu site.
Configure a integração
Client-Side
Atenção
Caso seja necessário fechar e abrir o Brick novamente (quando um usuário retorna ao carrinho para alterar algum detalhe da compra, por exemplo) é necessário eliminar a instância atual do Brick e criar uma nova quando for preciso mostrar o Brick novamente.
Para isso, utilize o método
unmount disponível no controller do Brick, sendo neste caso: window.walletBrickController.unmount().html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bricks</title>
</head>
<body>
<div id="walletBrick_container"></div>
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
const renderWalletBrick = async (bricksBuilder) => {
const settings = {
callbacks: {
onReady: () => {
/*
Callback chamado quando o Brick estiver pronto.
Aqui você pode ocultar loadings do seu site, por exemplo.
*/
},
onSubmit: () => {
// callback chamado ao clicar no Wallet Brick
// isso é possível porque o Brick é um botão
// neste momento de submit, você deve criar a preferência
const yourRequestBodyHere = {
items: [
id: "202809963",
title: "Dummy title",
description: "Dummy description",
quantity: 1,
unit_price: 10,
],
purpose: "wallet_purchase"
};
return new Promise((resolve, reject) => {
fetch("/create_preference", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(yourRequestBodyHere)
})
.then((response) => {
// resolver a promise com o ID da preferência
resolve(response.preference_id);
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar a preferência
reject();
})
});
},
onError: (error) => {
// callback chamado para todos os casos de erro do Brick
console.error(error);
},
},
};
window.walletBrickController = await bricksBuilder.create(
'wallet',
'walletBrick_container',
settings
);
};
renderWalletBrick(bricksBuilder);
</script>
</body>
</html>Crie sua preferência
Server-Side
Os exemplos de código abaixo configuram o purpose da preferência como wallet_purchase, mas também é possível configurá-lo como onboarding_credits. Entenda a diferença entre os dois:
wallet_purchase: o usuário deverá fazer login quando for redirecionado para sua conta do Mercado Pago.
onboarding_credits: após fazer login, o usuário verá a opção de pagamento com crédito pré-selecionada em sua conta do Mercado Pago.
<?php // Cria um objeto de preferência $preference = new MercadoPago\Preference(); // Cria um item na preferência $item = new MercadoPago\Item(); $item->title = 'Meu produto'; $item->quantity = 1; $item->unit_price = 75.56; $preference->items = array($item); // o $preference->purpose = 'wallet_purchase'; permite apenas pagamentos logados // para permitir pagamentos como guest, você pode omitir essa propriedade $preference->purpose = 'wallet_purchase'; $preference->save(); ?>// Cria um objeto de preferência let preference = { // o "purpose": "wallet_purchase" permite apenas pagamentos logados // para permitir pagamentos como guest, você pode omitir essa propriedade "purpose": "wallet_purchase", "items": [ { "id": "item-ID-1234", "title": "Meu produto", "quantity": 1, "unit_price": 75.76 } ] }; mercadopago.preferences.create(preference) .then(function (response) { // Este valor é o preferenceId que será enviado para o Brick na inicialização const preferenceId = response.body.id; }).catch(function (error) { console.log(error); });// Cria um objeto de preferência PreferenceClient client = new PreferenceClient(); // Cria um item na preferência 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') permite apenas pagamentos logados // para permitir pagamentos como guest, você pode omitir essa linha .purpose('wallet_purchase') .items(items).build(); client.create(request);# Cria um objeto de preferência preference_data = { # o purpose: 'wallet_purchase', permite apenas pagamentos logados # para permitir pagamentos como guest, você pode omitir essa propriedade purpose: 'wallet_purchase', items: [ { title: 'Meu produto', unit_price: 75.56, quantity: 1 } ] } preference_response = sdk.preference.create(preference_data) preference = preference_response[:response] # Este valor é o preferenceId que você usará no HTML na inicialização no Brick @preference_id = preference['id']// Cria o objeto de request da preferência var request = new PreferenceRequest { // o Purpose = 'wallet_purchase', permite apenas pagamentos logados // para permitir pagamentos como guest, você pode omitir essa propriedade Purpose = "wallet_purchase", Items = new List<PreferenceItemRequest> { new PreferenceItemRequest { Title = "Meu produto", Quantity = 1, CurrencyId = "BRL", UnitPrice = 75.56, }, }, }; // Cria a preferência usando o client var client = new PreferenceClient(); Preference preference = await client.CreateAsync(request);# Cria um item na preferência preference_data = { # o "purpose": "wallet_purchase", permite apenas pagamentos logados # para permitir pagamentos como guest, você pode omitir essa propriedade "purpose": "wallet_purchase", "items": [ { "title": "Meu Item", "quantity": 1, "unit_price": 75.76 } ] } preference_response = sdk.preference().create(preference_data) preference = preference_response["response"]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": "Meu produto", "quantity": 1, "unit_price": 75.76 } ] }'