Value In Brief
All You Need To Know Explained In Brief

How to accept payments through Google Pay in Angular ?

Angular tutorials

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: [
...
GooglePayButtonModule,
...
]

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

<google-pay-button
environment="TEST"
buttonSizeMode="fill"
[paymentRequest]="paymentRequest"
(loadpaymentdata)="onLoadPaymentData($event)"
></google-pay-button>

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: {
type: 'PAYMENT_GATEWAY',
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,
},
],
paymentData,
);
this.router.navigate(['/confirm']);
}

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

accept payment with Google Pay in Angular

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.