Integrating Google Pay Into Angular

Question

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.

That's because Angular will strip any <script> tag outside index.html for security purposes (see stackoverflow.com/questions/38088996/…). The best way to go is to find a module to add to packages.json, I guess it exists for Google Pay. Or use the sanitizer to bypass? (also see github.com/angular/angular/issues/4903) — Qortex
– Qortex, Commented Jul 1, 2020 at 11:10

Soc · Accepted Answer · 2021-08-27 15:52:19Z

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>

edited Aug 27, 2021 at 15:52

answered Jul 1, 2020 at 16:21

Soc

7,8184 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bvdb Over a year ago

that link is for React though.

Soc Over a year ago

Support for Angular and other frameworks is included in the form of a custom element. See Angular example.

Soc Over a year ago

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.

Collectives™ on Stack Overflow

Integrating Google Pay Into Angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related