I'm trying to integrate Paddle as the payment method into my Vue app.
I inserted the official Paddle CDN link into the index, as shown below:
<head>
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
</head>
Then, I created a subscribe.vue page and added the 'subscribe' button as shown below:
<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>
I followed Paddle's instructions and added 'https://localhost' to the default payment link. (Initially, I added 'http://localhost' but it was automatically changed to 'https'. I'm not sure if this is the reason for the error.)
However, when I click the subscribe button, an issue arises. Please check the screenshot here:
