how to disable back_urls in modal opening scheme

[Luciano Bosco (lucianobosco)]

Using sdk-js in Vue js with below config:

const mp = new window.MercadoPago(process.env.VUE_APP_MERCADOPAGO_KEY, {
                locale: 'es-AR'
 })

 mp.checkout({
       preference: {
             id: this.room.payment.preference_id
       },
       autoOpen: true,
       theme: {
             elementsColor: '#00BD9F',
             headerColor: '#00BD9F'
       }
})

The preference is created with sdk-php (Laravel) with back_urls since preference can be used on both mobiles and websites

$response = Http::acceptJson()
            ->withToken($this->access_token)
            ->timeout(30)
            ->post('https://api.mercadopago.com/checkout/preferences', [
                'external_reference' => Str::uuid()->toString(),
                'items' => [
                    (object) [
                        'title' => 'My company payment',
                        'description' => 'My company description',
                        'picture_url' => 'https://www.mercadopago.com/org-img/MP3/home/logomp3.gif',
                        'category_id' => 'lorem-ipsum',
                        'quantity' => 1,
                        'currency_id' => 'ARS',
                        'unit_price' => floatval($request->price),
                    ]
                ],
                'payer' => [
                    'name' => $request->first_name,
                    'surname' => $request->last_name,
                    'email' => $request->email,
                    "identification" => [
                        'type' => $request->doc_type,
                        'number' => $request->doc_number
                    ],
                ],
                'auto_return' => 'approved',
                'back_urls' => [
                    'success' => getCallbackUrl().'/web/payment-success',
                    'pending' => getCallbackUrl().'/web/payment-pending',
                    'failure' => getCallbackUrl().'/web/payment-failure'
                ],
                'statement_descriptor' => 'My company',
                'notification_url' => getCallbackUrl().'/payments/callback'
            ]);

        return $response;

As per docs

Note that the auto_return attribute only works for Checkout Pro's redirect and mobile mode. It does not work in [modal mode](https://www.mercadopago.com.ar/developers/pt/guides/online-payments/checkout-pro/integration) since in the latter the buyer remains on the site throughout the payment process.

I'm wondering if there is a way to also disable the back_urls when payment is being opened in modal scheme. I don't want any redirection at all and that's what's happening right now when the user clicks the Accept button.

The only way I found to achieve that is by not defining back_urls on preference creation.

[Estefania (estefaniadiazartucio)]

Hi there Luciano Bosco (@lucianobosco) ! Sorry for the late reply

Thank you for your report. We managed to reproduce the auto_redirect issue in modal view which, as stated, should not happen, so we are going to be working in a fix for it asap.

Auto redirect feature aside, if the original intention was configuring back_urls only for mobile views then that would not be possible.

[Luciano Bosco (lucianobosco)]

Great! Any chance to keep track of this to be aware of when to update the SDK-js at my end? Is there any issue or PR created?

[Juan Ignacio Aldama (Mad-Man)]

Luciano Bosco (@lucianobosco) to sum up this issue.
both cases are solved by not sending de back_urls when creating the preference.
for both cases:
in order for the auto_return to be rendered:

• needs to be redirect or mobile
• needs to have back_urls defined (success, fail, pending)
• needs to have the auto_return property of the preference set to: all | approved
  peference example for auto_return:

...
"auto_return": "all",
  "back_urls": {
    "failure": "www.google.com",
    "pending": "www.google.com",
    "success": "www.google.com"
  },
...

in order for the button ("volver al sitio") to render:

• needs to be redirect or mobile
• needs to have back_urls defined (success, fail, pending)

So if there are no back_url set on the preference there will be no redirection after the payment is done.

[Luciano Bosco (lucianobosco)]

That's correct, but since the preference could be used in a website and/or iOS/Android app, back_urls must be present.
That's why Checkout Pro using the modal scheme should ignore these URLs, to keep using them in case the customer opens it on any mobile device which needs a redirect to handle the response as per needs.

[Rafael Cardoso (rafaelfaria)]

On this topic.

If we are using the modal, and not defining the back_urls, how do we get all the information that would otherwise be getting redirected through the back_urls like (payment_id, status, external_reference and merchant_order_id)?

[Luciano Bosco (lucianobosco)]

It pretty much depends on how you handle your app flow. If you are working on SPA you don't want the user to leave your page after payment is done.
In my case, I'm using websockets/API requests to check current preference information on mercadopago success callback or page refresh.