PreferĂȘncia no envio
Caso prefira, tambĂ©m Ă© possĂvel criar a preferĂȘncia no momento do clique no botĂŁo, ou seja, no envio do formulĂĄrio. Isso pode ser Ăștil em casos semelhantes aos de one click, utilizando o botĂŁo diretamente na pĂĄgina do produto a ser comprado.
const renderWalletBrick = async (bricksBuilder) => {
const settings = {
callbacks: {
onSubmit: (formData) => {
// 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(formData),
})
.then((response) => response.json())
.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();
});
});
},
},
};
window.walletBrickController = await bricksBuilder.create(
'wallet',
'walletBrick_container',
settings,
);
};
renderWalletBrick(bricksBuilder);
const onSubmit = async (formData) => {
// 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) => response.json())
.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();
});
});
};
const onError = async (error) => {
// callback chamado para todos os casos de erro do Brick
console.log(error);
};
const onReady = async () => {
/*
Callback chamado quando o Brick estiver pronto.
Aqui vocĂȘ pode ocultar loadings do seu site, por exemplo.
*/
};
Nesse caso, nĂŁo Ă© preciso passar a preferĂȘncia na inicialização.