How can I show up the button of paypal in vuejs? I already tried these below, it shows build successfull but the button does not show up. And bdw the input field shows, only the button not.
Is this really impossible to happen, paypal in vuejs?
<template>
<div id="container">
<input type="text" class="form-control">
<div id="paypal-button"></div>
</div>
</template>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
export default {
mounted() {
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: 'ARQ-WKAkFn3g4C111Ud3lLaUAfzagvJ_pmkLKBVMASvv6nyjX3fv3j0gtBdJEDhRPznYP9sLtf9oiJfH',
production: 'EFNo9sAyqiOmnlRHsAdXiGBf6ULysEIfKUVsn58Pq6ilfGHVFn03iVvbWtfiht-irdJD_df1MECvmBC2'
},
locale: 'en_US',
style: {
size: 'medium',
color: 'gold',
shape: 'pill',
},
commit: true,
payment: function(data, actions) {
return actions.payment.create({
transactions: [{
amount: {
total: '11',
currency: 'USD'
}
}]
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
window.alert('Thank you for your purchase!');
});
}
}, '#paypal-button');
console.log('notification mounted');
}
}
</script>
Error in my console:
ReferenceError: “paypal is not defined”
I also tried other functions created()
, and init()
but still doesn’t show.
4
Answers
because your
paypal
variable is not described.use this
install
import
and now
PayPal
is your variable and it is describedIt shows you these
ReferenceError: "paypal is not defined"
because you fail to import the js file of paypal.So here’s how you do it, first install npm:
And add these code inside your app.js:
And you can now import the js file of paypal and execute the paypal codes:
full documentation
Also you can use vue-head it loads the script only in the component or view you need it:
install
npm install vue-head
Configure globally main.js
and then call it in your component:
The paypal button file looks like this:
In 2021, I recommend having a look at their new official npm package at https://github.com/paypal/paypal-js, so you can do: