Vue项目集成Paddle支付时遭遇内容安全策略问题

我正尝试在Vue应用中集成Paddle作为支付方式，已按官方指引将Paddle CDN链接引入index.html文件：

<head>
  <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
</head>

并创建了subscribe.vue页面实现订阅按钮功能：

<script setup lang="ts">
var vendorId = parseInt(import.meta.env.VITE_GLOB_PADDLE_VENDOR_ID)
if (import.meta.env.VITE_GLOB_PADDLE_SANDBOX_ENV == "true") {
    Paddle.Environment.set("sandbox");
}
Paddle.Setup({
    seller: vendorId // replace with your seller ID 
});
const onSubscribe = () => {
    Paddle.Checkout.open({
        settings: {
            displayMode: "overlay",
            theme: "light",
            locale: "en"
        },
        items: [
            {
                priceId: 'pri_01haxcpg4m4e5m067mghbjk7r8',
                quantity: 1
            },
            {
                priceId: 'pri_01haxcp3m43vmna28whxr0qe7v',
                quantity: 1
            }
        ],
    });
}
</script>
<template>
    <VBtn @click="onSubscribe">Subscribe</VBtn>
</template>

已按Paddle要求将默认支付链接设置为https://localhost（最初添加的http://localhost被自动转为https，不确定是否因此引发问题），但点击订阅按钮时出现异常，详情见截图：

内容的提问来源于stack exchange，提问作者Saihhold Chiu