The Angular 17 Google Pay button
The Google Pay API
enables fast, simple checkout on your website. This provides convenient access
to hundreds of millions of cards that are saved to Google Accounts worldwide.
An Angular version of the Google Pay button has been created to make it easier to integrate Google Pay into your Angular website. The advantage of using the Angular version of the Google Pay button over the web component is that it eliminates the need to register CUSTOM_ELEMENTS_SCHEMA.
Installation: npm install @google-pay/button-angular
Example usage: Angular website
<google-pay-button
environment="TEST"
buttonType="buy"
buttonColor="black"
[paymentRequest]="{
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods:
['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks:
['AMEX', 'VISA', 'MASTERCARD']
},
tokenizationSpecification: {
type:
'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId:
'exampleGatewayMerchantId'
}
}
}
],
merchantInfo: {
merchantId:
'12345678901234567890',
merchantName: 'Demo
Merchant'
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: '100.00',
currencyCode: 'USD',
countryCode: 'US'
}
}"
(loadpaymentdata)="onLoadPaymentData($event)"
></google-pay-button>
Properties:
1.
buttonColor
2.
buttonLocale
3.
buttonSizeMode
4.
buttonType
5.
environment
6.
existingPaymentMethodRequired
7.
paymentRequest
Callbacks/events:
1.
cancelCallback
2.
clickCallback
3.
errorCallback
4.
loadPaymentDataCallback
5.
paymentAuthorizedCallback
6.
paymentDataChangedCallback
7.
readyToPayChangeCallback
Find out the GitHub code sample about the GooglePay Angular button.