I'm trying to disable the paypal button in VueJs by using JavaScript native So, when the paypal iframe was loaded, i'm trying to do it like this :
methods: {
async initPaypal() {
this.$store.dispatch('app/clearMessage')
this.isLoading = true
try {
const { payments } = await paymentService.getPaymentContext(this.group)
const widgetParameters =
payments[payments.length - 1]?.additionalDatas?.PAYMENT_WIDGET_INFORMATION.widgetParameters
if (widgetParameters) {
this.client = new adeocookie.CookiePgwClient(widgetParameters, 'paypal-container')
this.client.initialize().then(() => {
console.log('loaded')
this.client.render()
this.isLoading = false
// to disable button
const iframe = document.getElementsByTagName('iframe')[0]
iframe.style.pointerEvents = 'none'
})
But it doesn't work I've tried to display in console if the iframe was loaded and it's Ok
So, how can i disable this iframe and ideally just the div that contains the button role ?
Thanks
Rethink what you're doing. With the current PayPal JS SDK, there is no reason to be checking for iframes. If you need to disable the buttons when they are initialized, you can either have their div container start hidden (display:none) by simply coding it to start as such before any button code executes, or instead of hiding use the buttons' own method of actions.disable() (which does not hide) from onInit, as documented in Validate user input.
Here is an example of delayed render with display:none ...
<div id="paypal-button-container"></div>
<script>
document.querySelector('#paypal-button-container')
.style.display = 'none';
paypal.Buttons().render('#paypal-button-container');
document.querySelector('#myRadioField')
.addEventListener('click', function() {
document.querySelector('#paypal-button-container')
.style.display = 'block';
});
</script>