Injected Script tag working in Localhost but not in Production deploy

Hello!
I’m creating a JAMstack ecommerce site in Nuxt - Universal mode. For that i’m implementing a latin american payment solution called MercadoPago. My best option was the Checkout-pro implementation:

MercadoPago CheckOut Pro doc

which consists in an script tag that generates a button within a form tag in html. This button opens a modal from the service with all the shopping-order data-preference-id.

<form method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-preference-id='<%= global.id %>'>
  </script>
</form>

This works absolutely fine in localhost, but when i deploy the script seems not to be rendering anything, and it shows just an empty form tag.

I tried using the tag from nuxt. and I even tested deploying the form in a plain http file.

Do you have any idea what is going on with that scrip tag? I bet iis something basic, but again, I still newbie.

Thanks in advance!

Hey there,
This probably either has to do with the timing of the script loading on the page, or the script not being able to find that global.id that it needs… or both! If you want to share your Netlify URL where you’re trying this, we’d be happy to take a look and see if that looks like it’s the issue. You should be able to see some evidence of that in the browser’s developer console- do you see any errors there when you load this?

Hi Jen!
Thanks for replying, has been frustrating and sorry about the late reply

So I created a test page so you can check what is going on. https://renacer-lrb-2020.netlify.app/checkout/
There is a button that calls a lambda fuction and creates a test puchase id.This ID is the one that goes in global.id. I hardcoded this directly to the data-preference-id=. And it works in localhost.
As you can see the conflict ist not ocurring in there.
I also tried using nuxt’s <client-only></client-only> snippet so this component will only be rendered on client-side, without any luck.
I sopose it has to be something with it`s lifecycle. but i have no clue right now.

Here you can find my test module`s code:

<template>
  <div>
    <v-btn
      block
      x-large
      tile
      color="black"
      @click="getCheckoutId"
      class="white--text"
      ref="AAA"
      >PAGAR</v-btn
    >
    
      <form
        method="POST"
        ref="mpBtn"
        :action= formAction 
        data-netlify="true"
             >
             
        <script
          src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
          data-preference-id="654853549-c74b33d7-6468-4316-aab6-5fa582ef559f"
          data-header-color="#e8e6d6"
          data-elements-color="#e8e6d6"
          data-button-label="PAGAR"
        ></script>
        
      </form>
   
    <h1>{{ prefId }}</h1>
    <h1>{{}}</h1>
  </div>
</template>

<script>
import axios from "axios";

export default {
  transition: "slide-left",
  data() {
    return {
      formAction: `${this.$config.baseURL}/.netlify/functions/show-res`,
      prefId: "654853549-4154ee41-3993-432a-a273-a45a9c23c559",
    };
  },
  methods: {
    getCheckoutId() {
      return new Promise((resolve, reject) => {
        axios
          .get(`${this.$config.baseURL}/.netlify/functions/checkout-mp`)
          .then((res) => {
            this.prefId = res.data;
            resolve();
          });
      });
    },
    triggerCheckout() {
      this.$refs.mpBtn[0].click();
    },
    cancelCheckout() {
      this.prefId = null;
    },
  },
};
</script>