Loading Google Maps & Square Web Payments Causes Collison for GooglePay

Questions
1

I notice if Google Maps is loaded into the same project as Square Web Payments like so:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>

There will be a collision with google.payments.api.PaymentsClient.

Does anyone have any recommendations to mitigate this issue when initializing googlePay?

  googlePay = await payments.googlePay(payments.paymentRequest({
        countryCode: 'US',
        currencyCode: 'USD',
        total: {
          amount: '1.00',
          label: 'Total',
        },
      }));

Since my specific use case is for an Angular 12 project, I’m thinking I can just load the Google Map’s external script dynamically from the component that shows a map. Then, onNgDestroy, I can remove the Google Map’s external script. Lastly, when an app user gets to the checkout component, I can load Square’s Web Payment’s external script.

I’m just brainstorming but I’m thinking this could work.

1 Like
2

Unfortunately, at this time we don’t have a recommended way to handle this. We are looking into it. If we figure anything out we will be sure to update this thread. :slightly_smiling_face:

2 Likes