Home
Documentation
Resources
Certifications
Community
Preference on submit - Advanced features - Mercado Pago Developers

Intelligent search powered by OpenAI 

Preference on submit

If you prefer, you can also create the preference at the moment of clicking the button. This can be useful in cases similar to one-click, using the button directly on the product page to be purchased.

          
const renderWalletBrick = async (bricksBuilder) => {
  const settings = {
    callbacks: {
      onSubmit: (formData) => {
        // callback called when clicking on Wallet Brick
        // this is possible because Brick is a button
        // at this submission moment, you should create the preference
        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) => {
              // resolve the promise with the preference ID
              resolve(response.preference_id);
            })
            .catch((error) => {
              // handle the error response when attempting to create the preference
              reject();
            });
        });
      },
    },
  };
  window.walletBrickController = await bricksBuilder.create(
    'wallet',
    'walletBrick_container',
    settings,
  );

};
renderWalletBrick(bricksBuilder);

        
          
const onSubmit = async (formData) => {
 // callback called when clicking on Wallet Brick
 // this is possible because Brick is a button
 // at this submission moment, you should create the preference
 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) => {
       // resolve the promise with the preference ID
       resolve(response.preference_id);
     })
     .catch((error) => {
       // handle the error response when attempting to create the preference
       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 on your website, for example.
 */
};

        

In this case, it is not necessary to pass the preference on startup.