Vue3集成Culqi支付网关报错：culqi函数未定义

问题核心在于Vue3的<script setup>语法中，组件内定义的函数属于模块私有作用域，Culqi的支付脚本无法访问到组件内的culqi函数，必须将其挂载到全局window对象上才能被外部脚本调用。

解决步骤 #

将组件内的culqi函数赋值给window.culqi，使其成为全局可用函数。

修改后的完整组件代码 #

<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");
    // 可选：添加脚本加载完成回调，避免Culqi对象未初始化的问题
    culqi_script.onload = () => {
        console.log("Culqi脚本加载完成");
    };
    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();
}

// 将culqi函数挂载到window，让Culqi脚本能全局调用
window.culqi = function() {
    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>

补充说明 #

• 挂载到window的函数依然能访问组件内的响应式变量和方法，因为它是在组件作用域内定义的闭包函数。
• 建议给Culqi脚本添加onload回调，确保脚本加载完成后再进行支付操作，避免出现Culqi is not defined的偶发问题。

内容的提问来源于stack exchange，提问作者Carlos Vidal