Home
Support Forums

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>

Hey @WolfPath,
A comment on this post:

suggests that you need to make a call to an endpoint that will return that ID:

If that’s the case, then you cannot set the id the way you’ve written. But that is not specific to Netlify- it’s a Javascript issue that is beyond what our staff can help with. Of course will still leave this post up in case anyone else has ideas for you to dynamically update that attribute value!

Thank you for your time, after some testing, i have checked that the problem is due to nuxt. Since i can render the button in a plain html website in Netlify. HERE
I already saw the post that you shared with me, when i started my implementation, and i solved that problem using a netlify function for generating the id and it works locally.

I’ve opened a question in stack overflow HERE

Thank you again!