GooglePay TypeScript VueJS — Playing Together.

GooglePay & TypeScript for a VUE component.

👉 This article is intended to write a Google Pay Button Integration with Vue JS. I am not posting any backend service intrgrations. As I see several people facing the issues for a quick integration extended the google provided javascript into a typescript, resulting in this quick write-up.

Points to catch:

1. Google Button click returns the “button” object for “this” reference. Not your component. So, make sure you get the singleton for processing further. If not, you will be seeing the below error as “is not a function”

<div no-gutters id="googleParent">
  <div id="googleButtons">
    <div id="google-button-container"></div>
  </div>
</div>

Once integrated this is how the rendered button looks like.

Find other articles @ my publication: ThinkSpecial