N
Nuxt•2mo ago
NicolasPL

How can I load a 3rd party script widget?

The documentation I'm following says that I need to add the following code: 
<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH"
    data-currency="COP"
    data-amount-in-cents="7890000"
    data-reference="37DNKF84S92N1S"
    data-signature:integrity="37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5"
    data-redirect-url="https://transaction-redirect.wompi.co/check"
    data-expiration-time="2023-06-09T20:28:50.000Z"
    data-tax-in-cents:consumption="590000"
    data-tax-in-cents:vat="1290000"
    data-customer-data:email="[email protected]"
    data-customer-data:full-name="Lola Perez"
    data-customer-data:phone-number="3019777777"
    data-customer-data:phone-number-prefix="+57"
    data-customer-data:legal-id="123456789"
    data-customer-data:legal-id-type="CC"
    data-shipping-address:address-line-1="Carrera 123 # 4-5"
    data-shipping-address:address-line-2="apto 123"
    data-shipping-address:country="CO"
    data-shipping-address:city="Bogota"
    data-shipping-address:phone-number="3019988888"
    data-shipping-address:region="Cundinamarca"
    data-shipping-address:name="Pedro Perez"
  ></script>
</form>
<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH"
    data-currency="COP"
    data-amount-in-cents="7890000"
    data-reference="37DNKF84S92N1S"
    data-signature:integrity="37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5"
    data-redirect-url="https://transaction-redirect.wompi.co/check"
    data-expiration-time="2023-06-09T20:28:50.000Z"
    data-tax-in-cents:consumption="590000"
    data-tax-in-cents:vat="1290000"
    data-customer-data:email="[email protected]"
    data-customer-data:full-name="Lola Perez"
    data-customer-data:phone-number="3019777777"
    data-customer-data:phone-number-prefix="+57"
    data-customer-data:legal-id="123456789"
    data-customer-data:legal-id-type="CC"
    data-shipping-address:address-line-1="Carrera 123 # 4-5"
    data-shipping-address:address-line-2="apto 123"
    data-shipping-address:country="CO"
    data-shipping-address:city="Bogota"
    data-shipping-address:phone-number="3019988888"
    data-shipping-address:region="Cundinamarca"
    data-shipping-address:name="Pedro Perez"
  ></script>
</form>
However I can't place a <script> tag inside a <template>. What should I do to load this widget?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @NicolasPL. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You are correct: in Nuxt (and Vue), you cannot place a <script> tag directly inside a <template>. To load a third-party script widget like the Wompi checkout, you should use Nuxt's head management utilities to inject the script tag dynamically. The recommended approach is to use the useHead composable to add external scripts. For scripts that require custom attributes (like your data attributes), you can specify them in the useHead configuration. However, note that not all custom data attributes are supported directly via the useHead API, so you may need to use a combination of useHead and DOM manipulation in a lifecycle hook. Here’s how you can approach this: 1. Use useHead to Load the Script You can add the external script using useHead in your <script setup> block. For example: 
<script setup>
useHead({
  script: [
    {
      src: '<https://checkout.wompi.co/widget.js',>
      // You can add standard attributes here
      // For custom data attributes, see the next step
    }
  ]
})
</script>
<script setup>
useHead({
  script: [
    {
      src: '<https://checkout.wompi.co/widget.js',>
      // You can add standard attributes here
      // For custom data attributes, see the next step
    }
  ]
})
</script>
This will load the script globally. However, to add all the required data-* attributes, you need to create the script element manually and append it to your form after the component is mounted. 2. Dynamically Inject the Script with Data Attributes You can use the onMounted lifecycle hook to programmatically create and append the script tag with all the necessary attributes: 
<template>
  <form ref="wompiForm"></form>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const wompiForm = ref(null)
onMounted(() => {
  const script = document.createElement('script')
  script.src = '<https://checkout.wompi.co/widget.js'>
  script.setAttribute('data-render', 'button')
  script.setAttribute('data-public-key', 'pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH')
  script.setAttribute('data-currency', 'COP')
  script.setAttribute('data-amount-in-cents', '7890000')
  script.setAttribute('data-reference', '37DNKF84S92N1S')
  script.setAttribute('data-signature:integrity', '37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5')
  script.setAttribute('data-redirect-url', '<https://transaction-redirect.wompi.co/check'>)
  script.setAttribute('data-expiration-time', '2023-06-09T20:28:50.000Z')
  script.setAttribute('data-tax-in-cents:consumption', '590000')
  script.setAttribute('data-tax-in-cents:vat', '1290000')
  script.setAttribute('data-customer-data:email', '[email protected]')
  script.setAttribute('data-customer-data:full-name', 'Lola Perez')
  script.setAttribute('data-customer-data:phone-number', '3019777777')
  script.setAttribute('data-customer-data:phone-number-prefix', '+57')
  script.setAttribute('data-customer-data:legal-id', '123456789')
  script.setAttribute('data-customer-data:legal-id-type', 'CC')
  script.setAttribute('data-shipping-address:address-line-1', 'Carrera 123 # 4-5')
  script.setAttribute('data-shipping-address:address-line-2', 'apto 123')
  script.setAttribute('data-shipping-address:country', 'CO')
  script.setAttribute('data-shipping-address:city', 'Bogota')
  script.setAttribute('data-shipping-address:phone-number', '3019988888')
  script.setAttribute('data-shipping-address:region', 'Cundinamarca')
  script.setAttribute('data-shipping-address:name', 'Pedro Perez')
  wompiForm.value.appendChild(script)
})
</script>
<template>
  <form ref="wompiForm"></form>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const wompiForm = ref(null)
onMounted(() => {
  const script = document.createElement('script')
  script.src = '<https://checkout.wompi.co/widget.js'>
  script.setAttribute('data-render', 'button')
  script.setAttribute('data-public-key', 'pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH')
  script.setAttribute('data-currency', 'COP')
  script.setAttribute('data-amount-in-cents', '7890000')
  script.setAttribute('data-reference', '37DNKF84S92N1S')
  script.setAttribute('data-signature:integrity', '37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5')
  script.setAttribute('data-redirect-url', '<https://transaction-redirect.wompi.co/check'>)
  script.setAttribute('data-expiration-time', '2023-06-09T20:28:50.000Z')
  script.setAttribute('data-tax-in-cents:consumption', '590000')
  script.setAttribute('data-tax-in-cents:vat', '1290000')
  script.setAttribute('data-customer-data:email', '[email protected]')
  script.setAttribute('data-customer-data:full-name', 'Lola Perez')
  script.setAttribute('data-customer-data:phone-number', '3019777777')
  script.setAttribute('data-customer-data:phone-number-prefix', '+57')
  script.setAttribute('data-customer-data:legal-id', '123456789')
  script.setAttribute('data-customer-data:legal-id-type', 'CC')
  script.setAttribute('data-shipping-address:address-line-1', 'Carrera 123 # 4-5')
  script.setAttribute('data-shipping-address:address-line-2', 'apto 123')
  script.setAttribute('data-shipping-address:country', 'CO')
  script.setAttribute('data-shipping-address:city', 'Bogota')
  script.setAttribute('data-shipping-address:phone-number', '3019988888')
  script.setAttribute('data-shipping-address:region', 'Cundinamarca')
  script.setAttribute('data-shipping-address:name', 'Pedro Perez')
  wompiForm.value.appendChild(script)
})
</script>
This approach ensures the script is only added on the client side, after the component is mounted, and all required attributes are set. References - How to add inline script tags to Nuxt 3? - Nuxt SEO and Meta: useHead If you need to manage many third-party scripts, consider using the Nuxt Scripts module for more advanced use cases and better performance management, as described in the Nuxt roadmap and community resources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@230717673665724416> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?