Unable to use chekcout pro with modal shema

[joweste]

Hi,

I have tried to use modal schema, but I have no information in docs about how to do it.
The docs only make mention about modal schema.
There is no sample.
In my app, I get get a preference_id from my nodejs backend.
I´d like how to open a MP modal payment dialog using that preference.
I am using vuejs in my frontend.

[estefaniadiazartucio]

Hi @joweste !

The checkout is opened by default in a modal / dialog window. Just follow the steps described in this documentation or the readme from this project and you should be able to open the checkout in a modal window when clicking on the payment button rendered

[joweste]

Hi, thank you for your response.

I just follow the link.
I have success to get a pref id from my backend.

But when I click the MP rendered button It always redirect to a new tab page.
I also see this message on chrome debug console(I am not using iframe):
[Report Only] Refused to frame 'https://www.mercadopago.com.br/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".
I am using:

let MP,
....
 
 <div id="mpagobutton" />

  mounted(){
   MP = new MercadoPago(MP_PUBLIC_KEY_TESTE, {
      locale: 'pt-BR', // The most common are: 'pt-BR', 'es-AR' and 'en-US'
    })
  this.mpago()
}

async mpago() {
      try {
        const orderData={....}
          const response = await fetch(
          `${API_BASE_URL(
            this.$config.baseURL
          )}/api/growcare/mercadopago/create_preference`,
          {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(orderData),
          }
        )
        const preference = await response.json()
        this.mp_pref_id = preference.id
        // set mp payment
        MP.checkout({
          preference: {
            id: this.mp_pref_id,
          },
          render: {
            container: '#mpagobutton', // Indicates the name of the class where the payment button will be displayed
            label: 'Pagar', // Changes the button label (optional)
          },
        })
      } catch (e) {
        console.log(e)
      }
    },

[joweste]

Here is the MP opening in a new tab when I click the rendered MP button

[estefaniadiazartucio]

Hi @joweste !
The message you see in the console is a report only type of message and it does not block or affect the integration in any way.
If the checkout isn't being opened in modal view, please make sure you don't have cookies and/or pop-ups blocked.
Chrome Incognito and browsers like Safari usually block them by default and that triggers a redirection to give the user the possibility to pay even if they have those options blocked.