We are currently working on implementing an iframe payment option on our checkout screen and we’ve ran into issues when running in a sandbox environment. The issue appears when we try using google pay as a checkout option. We are following the document
https://docs.clover.com/docs/clover-iframe-features.
We get one issue when using the google pay option in both production and sandbox. When the google button renders, we see the following in the console log
Refused to connect to 'https://google.com/pay' because it violates the following Content Security Policy directive: "connect-src 'self' https://token.clover.com https://token-sandbox.dev.clover.com https://token-dev1.dev.clover.com https://token-stg1.dev.clover.com https://token-stg4.dev.clover.com https://dev1.dev.clover.com https://stg1.dev.clover.com https://sandbox.dev.clover.com https://api.clover.com".
However, the ability to click the button and generate a token appears to work ok in production. In Sandbox however we are getting the following errors after selecting a card on the google pay modal.
Access to fetch at 'https://token-sandbox.dev.clover.com/v1/tokens' from origin 'https://checkout.sandbox.dev.clover.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
POST https://token-sandbox.dev.clover.com/v1/tokens net::ERR_FAILED 500 (Internal Server Error)
The listener for the “paymentMethod” does get fired, however the tokenData is an empty object. We are able to get a token when using a production account, but we need to have the sandbox account working for testing before releasing to production. We a have verified that we are loading the correct js file for sandbox and are using a sandbox merchant and key.
In addition, when we are using the manual card entry rather than google pay, we are seeing a cors issue in the console when the user enters a single word in the card holder field. I understand that one word isn't a valid entry for the card holder name, but it seems like it should be handled better than just throwing a cors issue
Please let us know if there is anything that needs to be fixed from your end for this to work as I don’t believe there is anything else we can do from our end.
