I have the following problem while integerating paypal sdk in my vuejs project
55:5 error 'paypal' is not defined no-undef
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>Checkout.vue
<template>
<div class="checkout"></div>
</template>
<script>
export default {
props: {
amount: {
type: Number,
default: 0.01
}
},
mounted: function(){
paypal.Buttons().render('.checkout')
}
}
</script>What I want to achieve is, to render paypal buttons each time, the view is loaded. It seems, that I am missing something.
- I also tried to use vue-plugin-load-script but it gives me the same error
- I am not using
checkout.js, which seems not supported anymore by paypal
if I add the paypal.Buttons().render('.checkout') function call inside index.html just below the paypal js script tag, it seems to work. But it would load the buttons only the first time the application is loaded. It also gives an error, if there is no div container with a "checkout" class found.
All research gives me either results for old and deprecated versions or does not work for me. What am I doing wrong?
Thank you