A simple Vue wrapper for Google Pay
Please note that at the moment it doesn't support shipping and dynamic price update
npm install vue-google-pay
or
yarn add vue-google-pay
- Import the component
import { GooglePayButton } from 'vue-google-pay'
- Add the component
<GooglePayButton
id="google-pay-btn"
:options="options"
@payed="processPayment($event)"
@cancel="handleCancel"
/>
- Add options and methods
data () {
return {
environment: 'TEST',
buttonColor: 'white',
allowedCardNetworks: [
'AMEX',
'DISCOVER',
'INTERAC',
'JCB',
'MASTERCARD',
'VISA'
],
allowedCardAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
merchantInfo: {
merchantName: 'Example Merchant',
merchantId: '0123456789'
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: '1.00',
currencyCode: 'USD',
countryCode: 'US'
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId'
}
}
}
},
methods: {
payed (paymentData) {
// process payment
},
cancelled () {
// handle cancel event
}
}