2

So I am trying to integrate google pay into angular but I can not find any good sources. My biggest problem is this...

<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="console.log('TODO: add onload function GOOGLE PAY')">
</script>

onload does not seem to be firing. I tried putting the script in the app component level but it still doesn't seem to fire.

numerical25
  • 10,524
  • 36
  • 130
  • 209
  • That's because Angular will strip any ` – Qortex Jul 01 '20 at 11:10

1 Answers1

2

EDIT: Answer updated to reference the Angular version of the button instead of the web component

Consider using the recently released Google Pay Angular component for your Angular integration.

Example integration:

<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>
Soc
  • 7,425
  • 4
  • 13
  • 30
  • that link is for React though. – bvdb Jul 20 '20 at 15:09
  • Support for Angular and other frameworks is included in the form of a custom element. See [Angular example](https://github.com/google-pay/google-pay-button/blob/main/examples/angular/src/app/app.component.html#L53-L72). – Soc Jul 20 '20 at 17:17
  • Updated answer to reference the Angular version of the button instead of the custom element. Custom Element should be used for non React and non Angular use cases. – Soc Aug 27 '21 at 15:53