google-pay / google-pay-button

Google Pay button - React, Angular, and custom element
Apache License 2.0
247 stars 60 forks source link

onClick preventDefault is not working in Vue integration #289

Open hassanAwanAlvi opened 2 months ago

hassanAwanAlvi commented 2 months ago

Describe the bug A clear and concise description of what the bug is. I am using Vite / Vue and I am trying to preventDefault in google-pay-button's onClick. But I've tried a low of different ways and it seems to have some bug.

To Reproduce Steps to reproduce the behavior:

  1. Install the component in Vue
  2. do @click="(event)=> {event.preventDefault()}"
  3. It will still open the payment sheet.

Expected behavior It should prevent the payment sheet.

Screenshots NA Component information:

Environment:

Please don't hesitate to ask me any further questions. Looks like this line has some issues.

const request = this.createLoadPaymentDataRequest(config); try { if (config.onClick) { config.onClick(event); } if (event.defaultPrevented) { return; }

dmengelt commented 2 months ago

@hassanAwanAlvi did you check how we do it for our Vue example?

https://github.com/google-pay/google-pay-button/blob/e1bfb1e3d1f43ad85ef00b631b651cc7a5e03823/examples/vue/src/components/Examples.vue#L236

Like this it works for me and the Google Pay sheet is not shown.