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: [
...
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.
In the real world application, you need to complete those steps:
- post order information to the server.
- request the shipping information.
- calculate taxes.
- handle errors.
