How to accept payments through Google Pay in Angular ?

· · 205 words · 1 minute read

To integrate Google Pay to your Angular project, install Angular component for Google Pay by this command.

npm install @google-pay/button-angular

Then register Google Pay button module to application module using this line of code.

import { GooglePayButtonModule } from '@google-pay/button-angular';

Add it to imports in app.module.ts.

imports: [

Now, you can add google-pay-button like this.


And, in the typescript file, use this.

paymentRequest!: google.payments.api.PaymentDataRequest;

and in ngOnInit() method add this code.

this.paymentRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['MASTERCARD', 'VISA']
tokenizationSpecification: {
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId',
merchantInfo: {
merchantId: '1234567890864222',
merchantName: 'Blah Blah',
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: this.item.price.toFixed(2),
currencyCode: 'USD',
countryCode: 'US',

Then handle the onLoadPaymentData() as follows.

async onLoadPaymentData(event: Event){
const paymentData = (event as CustomEvent<google.payment.api.PaymentData>).details;
await this.storeService.processOrder(
item: this.item,
quantity: this.quantity,
size: this.size,

If you prefer watching a video, just watch this official video.

In the real world application, you need to complete those steps:

  1. post order information to the server.
  2. request the shipping information.
  3. calculate taxes.
  4. handle errors.