Vue 3 Uncaught ReferenceError: [function] is not defined

Question

I am trying to implement Culqi, Peru's payment gateway in my Vue 3 application according to its documentation (in Spanish).

I have created a very simple component for my tests:

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
    console.log("before mount");
    let culqi_script = document.createElement('script');
    culqi_script.setAttribute('src', "https://checkout.culqi.com/js/v4");
    document.head.appendChild(culqi_script);
})

function openCulqi(e) {
    e.preventDefault();
    Culqi.publicKey = "pk_test_L7C8H665X8yqvF4P";
    Culqi.settings({
        title: 'Prueba',
        currency: 'USD',
        amount: 100,
    })
    Culqi.open();
}

function culqi() {
    if (Culqi.token) {
        const token = Culqi.token.id;
        console.log("Se ha creado un Token: ", token);
    } else if (Culqi.order) {
        const order = Culqi.order;
        console.log("Se ha creado el objeto Order: ", order);
    } else {
        console.log("Error : ", Culqi.error);
    }
}
</script>
<template>
    <h1>Culqi</h1>
    <button @click="openCulqi">Pagar</button>
</template>

When the button is clicked the payment gateway modal opens.

You can use the following test card to simulate a payment

Card number: 4111 1111 1111 1111 Expiration date: 09/25 CVV: 123

The payment gateway should return a token to the culqi function, but I get the following error

Vue 3 Uncaught ReferenceError: culqi is not defined

I have tried placing the culqi function inside script tags directly in my index.html document and it works fine without problems. However, I need it inside my component to process the payment.

I get the impression that the culqi function is not available globally so it seems that it is not defined.

What can I do?

Answer 1

As Jaromanda X suggested in his comment, you can make the function global by declaring it as window.culqi = function.

Additionally, I had to add a method to close the modal. This functionality that should happen automatically is also broken since the Culqi object is not global either.

The final code looked like this:

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
    console.log("before mount");
    let culqi_script = document.createElement("script");
    culqi_script.setAttribute("src", "https://checkout.culqi.com/js/v4");
    document.head.appendChild(culqi_script);
});

function openCulqi(e) {
    e.preventDefault();
    Culqi.publicKey = "pk_test_L7C8H665X8yqvF4P";
    Culqi.settings({
        title: 'Prueba',
        currency: 'USD',
        amount: 100,
    })
    Culqi.open();
}

window.culqi = function () {
    console.log("culqi function");
    if (Culqi.token) {
        // ¡Objeto Token creado exitosamente!
        const token = Culqi.token.id;
        console.log("Se ha creado un Token: ", token);
        //En esta linea de codigo debemos enviar el "Culqi.token.id"
        //hacia tu servidor con Ajax
        window.Culqi.close();
    } else if (Culqi.order) {
        // ¡Objeto Order creado exitosamente!
        const order = Culqi.order;
        console.log("Se ha creado el objeto Order: ", order);
        window.Culqi.close();
    } else {
        // Mostramos JSON de objeto error en consola
        console.log("Error : ", Culqi.error);
        window.Culqi.close();
    }
}

</script>

<template>
    <h1>Culqi</h1>
    <!-- <p>Token= {{ culqiToken }}</p> -->
    <button @click="openCulqi">Pagar</button>
</template>

Carlos